add a custom Storebox template color

Hello,

Is it difficult to add a fourth or fifth color to orange blue or violet to the template ?

thanks for your help

It is easy to add different colors.

You would need to create or copy and rename following files. Replace x with a number such as style4.css.
css/stylex.css
css/typography/typography.stylex.css
css/typography/typography.iconset.stylex.css

If you want to be able to select style in admin > template settings then you need to add your extra option.
File: templates/gk_templatename/templateDetails.xml
Find Line: 128 following code.

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>


Then add your own as fourth or fifth such as below

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>
               <option value="4">TPL_GK_LANG_COLOR_4</option>
               <option value="5">TPL_GK_LANG_COLOR_5</option>
            </field>


Then add extra language strings to your templates language file.
File: /language/en-GB/en-GB.tpl_gk_storebox.ini
Line: 24 which is below

Code: Select all

TPL_GK_LANG_COLOR_3="Color III"


Then after it add your own strings, going by above example it would as below. Obviously you can enter any text value you want.

Code: Select all

TPL_GK_LANG_COLOR_3="Color III"
TPL_GK_LANG_COLOR_4="Color IIII"
TPL_GK_LANG_COLOR_5="Fifth Color"


Now template should show you options in template settings.

If you want also your users to be able to select your new colors in front end you need to do following.
Add your new color options to current selection in front end.
File: /templates/gk_storebox/layouts/default.php
Line: 236 to 240 which is below

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>


Add your own options.

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>
         <a href="#" id="gkColor5"><?php echo JText::_('TPL_GK_LANG_COLOR_5'); ?></a>
         </div>


Now add colors in css for this selection only. You can add them to override.css file, these are for the color selectors only. Change #96A0D6 to your chosen colors.

Code: Select all

#gkColor4 { background: #96A0D6;}
#gkColor5 { background: #96A0D6;}


Now edit your new colors css files and change to your liking.

See you around...