How to add a color style for the template

Hi:

I need to add a few color variations for the template (in template options, "Template Color" selector; like "Color IV, Color V, etc.), but i don't know how to make this.

Thanks

Hi,
first you have to go to layouts/blocks/footer.php and find:

Code: Select all

<div id="gkStyleArea">
       <a href="#" id="gkColor1"><?php echo JText::_('TPL_GK_LANG_COLOR_1'); ?></a>
       <a href="#" id="gkColor2"><?php echo JText::_('TPL_GK_LANG_COLOR_2'); ?></a>
       <a href="#" id="gkColor3"><?php echo JText::_('TPL_GK_LANG_COLOR_3'); ?></a>
   </div>


and add new color:

Code: Select all

<div id="gkStyleArea">
       <a href="#" id="gkColor1"><?php echo JText::_('TPL_GK_LANG_COLOR_1'); ?></a>
       <a href="#" id="gkColor2"><?php echo JText::_('TPL_GK_LANG_COLOR_2'); ?></a>
       <a href="#" id="gkColor3"><?php echo JText::_('TPL_GK_LANG_COLOR_3'); ?></a>
            <a href="#" id="gkColor4"><?php echo JText::_('TPL_GK_LANG_COLOR_4'); ?></a>
   </div>


Then you have to go to language/en-GB/en-GB.tpl_gk_startup.ini and find:

Code: Select all

TPL_GK_LANG_COLOR_1="Color I"
TPL_GK_LANG_COLOR_2="Color II"
TPL_GK_LANG_COLOR_3="Color III"


Here you have to add:

Code: Select all

TPL_GK_LANG_COLOR_4="Color IV"


Next you have to edit templateDetails.xml and find:

Code: Select all

<field name="template_color" type="list" default="1" label="TPL_GK_LANG_TEMPLATE_COLOR" description="TPL_GK_LANG_TEMPLATE_COLOR_DESC">
   <option value="1">TPL_GK_LANG_COLOR_1</option>
        <option value="2">TPL_GK_LANG_COLOR_2</option>
   <option value="3">TPL_GK_LANG_COLOR_3</option>
</field>


and add:

Code: Select all

<option value="4">TPL_GK_LANG_COLOR_4</option>


Then you have to go to css/template.css and find:

Code: Select all

#gkColor1 {
   background: #eb592a;
}
#gkColor2 {
   background: #3eabe9;
}
#gkColor3 {
   background: #8f87e4;
}


here you have to set color for dot in color switcher. Last thing you have to do is go to css folder and copy one of style1.css, style2.css or style3.css. Then rename it to style4.css and edit to fit your needs.