Skip to content

Instantly share code, notes, and snippets.

@phproberto
Created June 21, 2012 23:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phproberto/2969223 to your computer and use it in GitHub Desktop.
Save phproberto/2969223 to your computer and use it in GitHub Desktop.
In extension parameters show a section header customized with bootstrap appearence. Based on K2 approach.
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
jimport('joomla.form.formfield');
class JFormFieldBshead extends JFormField {
var $type = 'bshead';
function getInput(){
$doc = JFactory::getDocument();
$css = "
.modBsclr {
background: none repeat scroll 0 0 transparent;
border: medium none;
clear: both;
float: none;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
}
.modBsHeader {
float: left;
font-size: 12px;
font-weight: bold;
margin: 12px 0 4px;
padding: 0;
width: 100%;
background: #0088cc; /* Old browsers */
background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* IE10+ */
background: linear-gradient(top, #0088cc 0%,#0055cc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #ffffff;
border-bottom: 2px solid #0055cc;
}
.modBsHeaderContent {
padding: 6px 8px;
}
";
$doc->addStyleDeclaration($css);
return '<div class="modBsHeader"><div class="modBsHeaderContent">'.JText::_($this->value).'</div><div class="modBsclr"></div></div>';
}
function getLabel(){
return '';
}
}
############
BASIC HOWTO:
############
1.- Save bshead.php to a folder called "fields" in your extension module
2.- In your extension parameters add the field path like:
<fields name="params" addfieldpath="modules/YOUR_MODULE/fields">
3.- To create a section header create a field like:
<field name="" type="bshead" default="MOD_YOUR_MODULE_VALUE_HEADER_TITLE" label="" description=""/>
The text shown in the header will be: "MOD_YOUR_MODULE_VALUE_HEADER_TITLE" (or the translation if you have set one).
<?xml version="1.0" encoding="utf-8"?>
<config>
<fields name="params" addfieldpath="modules/YOUR_MODULE/fields">
<fieldset name="basic">
<field name="" type="bshead" default="MOD_YOUR_MODULE_VALUE_HEADER_TITLE" label="" description=""/>
</fieldset>
</fields>
</config>
@realityking
Copy link

Fieldsets can have labels. Wouldn't it be better to style those?

@phproberto
Copy link
Author

That's great because it will fit the title perfectly with the fieldset. In my case I needed different uncollapsed sections inside the same fieldset. Thanks for the idea!

Edit: Trying to implement your suggestion as a second gist I found the problem that I need to load a false field type to load the CSS to stylize fieldset labels. That seems ugly. A plugin will be a better solution for that.

If someone is interested the required CSS to stylize fieldset labels as suggested:

    .pane-sliders .panel { border: 0; }
    .pane-sliders .content { border: 1px solid #cccccc !important; }
    .pane-sliders .panel h3 {
        font-size: 12px;
        font-weight: bold;
        margin: 12px 0 0px;
        padding: 6px 0;
        width: 100%;
        background: #0088cc; /* Old browsers */
        background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* IE10+ */
        background: linear-gradient(top, #0088cc 0%,#0055cc 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #ffffff;
        border-bottom: 2px solid #0055cc;
    }
    .pane-sliders .panel h3 a { color: #FFFFFF; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment