Created
June 21, 2012 23:25
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ''; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
############ | |
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
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
Fieldsets can have labels. Wouldn't it be better to style those?