Need to create seasonal styles for this template

I was just informed that we will use seasonal styles for the site. That means that each season and on major holidays we will change both the content of the home page but more importantly for me, the entire color scheme for the template.

I know of several tricks to accomplish that, but it looks like to me that this template is already good to go for switching styles.

My only question is this: SInce the structure of the template proper remains the same and all I need to do is create a color.css file what is the best way to approach this?

I could easily create a summer.css file and manually import it inside my override.css but I noticed that the template has already two features that could probably handle this well:

Template Color
Layout Override
For instance, I know I could create a different style per season/holiday and simply point each style to load the Color CSS I need. I am pretty sure that would work.
But I don't want to miss out on something even simpler.

Could you guys be so kind to point me out to where these are explained (I looked under "support" but no luck) or tell me which method you prefer and why?

Thank you.

Ill provide you 2 ideas. Please select one that fits your workflow better.
1. Template already uses color styles. They are defined in style1-6.css inside template folder/css. You can use those files to create different looks and colour schemes. Just chose one that you use by default, copy it to other styles and start from that point. You just need to remember backing up those files whenever you update the template.
2. You can always use override.css - create there all the changes and just use 4 versions of that file renaming it when the change is needed. Override.css is designed to handle all the css changes made to the template, it is loaded as last css file so it has priority on all other css declarations. Still, you have to back it up when updating template.

Thank you for the replay. I did look at the Color Styles, but unfortunately I didn't find a quick way to rename each "color" or to add more than those provided.
Since the styles are seasonal and follow the 4 seasons as well as holidays, I did not want to run out of available "colors". In addition, I didn't see a good way to rename them and since I am not going to be the one operating the site, even a look up table would have been hard to implement since they would probably lose it inside of the first week after launch.

However, I did find the "styles" work pretty well. I created a style per each season and inserted a CSS file named after the bstyle as well as created a folder to store images and such.

I would have preferred to use the colors, but I simply could not figure out how to customize them properly.

there is a negative aspect of using styles, which is that if I need to make a layout change, I am going to have to repeat it many times over. That I don't like. But unless someone can show me how to create my own colors as needed and/or rename the ones that already exist, that the best way someone with little training can make the change without having to rename files.

Thank you for the help.

you can create aditional color schemes (wit numbers beyond current ones by editing:
/templates/gk_shop_and_buy/templateDetails.xml
Find this section:

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>
                     <option value="6">TPL_GK_LANG_COLOR_6</option>
                </field>


the value in option is next used to create css file name to load, for example: style1.css, style2.css etc.
You can edit those elements to make them work for you best, but while updating template, please remember to back them up first and restore after update.

Brilliant. I will try that. Thank you. I would prefer by far to use this system rather than style and reserve those for layout changes.

Thank you so much.

PS: I assume I can rename the current styles as long as I rename the files??

You must stick to the rule I have described above, still it might not work the exact way.
If you will add this menu option:

Code: Select all

<option value="foo">Foo color scheme</option>


then corresponding .css file should be named:

Code: Select all

stylefoo.css


If you name the option:

Code: Select all

<option value="_fbar">Bar color scheme</option>


then corresponding .css file should be named:

Code: Select all

style_bar.css


I hope you see the connection between value of the option and css file name.

It's pretty clear, thanks. I don't think I should have too many problems.

And of course I was wrong. For clarity I should say that since I am starting from scratch, I decided to use the template gk_storebox instead of SHop and Buy. I just discovered it is easier to achieve the design I want with it, even though they are very similar.

As per your instructions I went to

Code: Select all

/templates/gk_shop_and_buy/templateDetails.xml

And there I found this:

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>

To which I added this:

Code: Select all

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

Then I went to default.php where I added a line like this:

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>

And after that I changed the language file in this manner:

Code: Select all

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

After that, I create a file named 'style4.css' and I uploaded it. However, while I can see COLOR IV listed in the template backend and I can choose it, the front end is still loading style3.css instead of style4.css

I have done a lot of searches all over, but I cannot find anywhere else where any string in this code is mentioned The file is there so I don't know what I could be doing wrong.

To translate it to you furrther instructions it seems I did it right

<option value="foo">Foo color scheme</option>
<option value="4">TPL_GK_LANG_COLOR_4</option>

stylefoo.css
style4.css

The only one that's not clear is your further explanation of:
<option value="_fbar">Bar color scheme</option>

style_bar.css (I think you meant style_fbar.css

But that looks to me like it was simply mistyped.

Why is it not working? To give you full credit, you did say you weren't sure it wouldn't work. But logically I cannot see why. I'll take a look at the other template and see if maybe I can find out from that one since it has more color choices. But if you could ask around I'd be obliged.

Otherwise, I'll have to go back to using styles.

Thank you.

EDIT: me and my hurry. I did everything correct and indeed it works. Unfortunately my tests coincided with some network congestion and the reason why the style4.css wasn't loading was because of it. I waited a bit, checked in a new browser and sure enough I was calling style4.css just fine.

This works great . Thank you.

Great
Thanks for the info. Indeed there was a mystyped place, but you have found it well .
I was going to ask you for ftp and admin to check whats wrong... but you have found it .

If You will have any other questions, feel free to post new forum threads.

I could not have done it (at least this quickly) without your help. My next step will be to figure out if ZI can create an override if not for the whole thing, at least for some of the files. My goal will be to simplify updating the template since I won't be around forever and someone else may need to work with it.

Right now however I am rebuilding the site (I am also the author of the "Broken Mobile menu" post. I have now got the two sites, the one with the broken menu and the one I am rebuilding, carrying exactly the same plugins and components. Yet one works and the other doesn't.

BIzarre, but I'll keep discussing that in the other post.

Thank you again.

I hope you will be able to fix the second site. For the moment I have checked it, the source code was messed up, but as far as I know you was able to fight with that, and right now all works fine.
Small advice - if you change anything, make backup once per day (database + files backup), and every time you change something check if it didn't break any part of the site. I know it is hard to click through all the elements, but checkin most important parts might be a good method.