Step 1 - add style name to template-settings.xml

Open site_root/templates/template_name/template-settings.xml file and find variable name yjsg_get_styles

markup:

<field name="yjsg_get_styles" type="yjsglist" default="blue|40b1e2" label="YJSG_COLOR_LABEL" description="YJSG_COLOR_DESC" yjsgstyles="blue==40b1e2">
    <option value="blue|40b1e2">Blue</option>
</field>

yjsg_get_styles field name attributes:

• name: variable that contains style information.
• type: yjsglist element type.
• default: default select color style and its link color.
• label: element label for template manager
• description: element description for template manager.
• yjsgstyles: all available template styles.
• option value: option style name and its default link color.

add new style name:

We will now add new style name green to existing style names so our field name yjsg_get_styles changes to this;

markup:

<field name="yjsg_get_styles" type="yjsglist" default="blue|40b1e2" label="YJSG_COLOR_LABEL" description="YJSG_COLOR_DESC" yjsgstyles="blue==40b1e2|green==748500">
    <option value="blue|40b1e2">Blue</option>
    <option value="green|748500">Green</option>
</field>

You new template style name should now be visible in template manager.

Step 2 - add new style images folder

Please go to site_root/templates/template_name/images folder copy blue images folder and rename it to green.

Step 3 - add and edit new stylesheet

Since we already have stylesheets for each style name please go to site_root/templates/template_name/css folder copy blue.css file name and rename it to green.css.

Open green.css and replace all instances of images/blue to images/green and all instances of color code 40b1e2 to 748500.
Note that some CSS properties like a:hover color property or specific background images need to be changed as well.
We will not go in to details for those but just note that you might need to change them in order to adapt your new template style.
Now go to template manager and set Green as your default template style. Hit save and go to your homepage:

change and replace your logo:

As you can see only thing left is changing your logo to fit your new style. Please open logo.psd and change it's color code.
Now replace existing logo.png file name in site_root/templates/template_name/images/green folder with new logo;

Go to your homepage and refresh. Your new logo should be visible.

If logo process change is to complicated, you can upload new logo file within template manager. Go to tab name Layout and upload or select logo file from your server: