If you purchased a template from us, you may have noticed that it comes with at least 9 preset colors. 8 presets that are default on Helix Ultimate 2 template and starting with 9 are the preset colors inserted by us.

While it is possible to edit these presets inserting your own color, they may be overriden in future template updates.

The solution to not have your desired color overridden is to create your own preset. In the following lines we will let you know how to do this.

– First you need to go to templates – template-name – open options.xml. Here find the comment – scroll down to the last preset (usually preset9), and you will find:

        <preset name="preset9" 
            label="Preset 9" 
            default="#fe4b7b">
            <color name="text_color" 
                value="#252525" />
            <color name="bg_color" 
                value="#FFFFFF" />
            <color name="link_color" 
                value="#fe4b7b" />
            <color name="link_hover_color" 
                value="#044CD0" />
            <color name="header_bg_color" 
                value="#FFFFFF" />
            <color name="topbar_bg_color" 
                value="#333333" />
            <color name="topbar_text_color" 
                value="#AAAAAA" />
            <color name="logo_text_color" 
                value="#fe4b7b" />
            <color name="menu_text_color" 
                value="#252525" />
            <color name="menu_text_hover_color" 
                value="#fe4b7b" />
            <color name="menu_text_active_color" 
                value="#fe4b7b" />
            <color name="menu_dropdown_bg_color" 
                value="#FFFFFF" />
            <color name="menu_dropdown_text_color" 
                value="#252525" />
            <color name="menu_dropdown_text_hover_color" 
                value="#fe4b7b" />
            <color name="menu_dropdown_text_active_color" 
                value="#fe4b7b" />
            <color name="footer_bg_color" 
                value="#171717" />
            <color name="footer_text_color" 
                value="#FFFFFF" />
            <color name="footer_link_color" 
                value="#A2A2A2" />
            <color name="footer_link_hover_color" 
                value="#FFFFFF" />
        </preset>

Make a copy of this code and add your own preset, next number, in this case preset 10 (at the label you can write anything you want). Replace the default color of the preset with the one you want – let’s say you want your custom color code to be #cc2b5e. Your code should look like this:

        <preset name="preset10" 
            label="My custom color" 
            default="#cc2b5e">
            <color name="text_color" 
                value="#252525" />
            <color name="bg_color" 
                value="#FFFFFF" />
            <color name="link_color" 
                value="#cc2b5e" />
            <color name="link_hover_color" 
                value="#044CD0" />
            <color name="header_bg_color" 
                value="#FFFFFF" />
            <color name="topbar_bg_color" 
                value="#333333" />
            <color name="topbar_text_color" 
                value="#AAAAAA" />
            <color name="logo_text_color" 
                value="#cc2b5e" />
            <color name="menu_text_color" 
                value="#252525" />
            <color name="menu_text_hover_color" 
                value="#cc2b5e" />
            <color name="menu_text_active_color" 
                value="#cc2b5e" />
            <color name="menu_dropdown_bg_color" 
                value="#FFFFFF" />
            <color name="menu_dropdown_text_color" 
                value="#252525" />
            <color name="menu_dropdown_text_hover_color" 
                value="#cc2b5e" />
            <color name="menu_dropdown_text_active_color" 
                value="#cc2b5e" />
            <color name="footer_bg_color" 
                value="#171717" />
            <color name="footer_text_color" 
                value="#FFFFFF" />
            <color name="footer_link_color" 
                value="#A2A2A2" />
            <color name="footer_link_hover_color" 
                value="#FFFFFF" />
        </preset>

You now have to paste this code above after the last preset.

– Now you need to go to templates – template-name – css – presets – duplicate a preset file – open it with a text editor and replace the main color of that file with your custom color.

Using our example, you go to the path specified above templates – template-name – css – presets – duplicate preset9.css – name it preset10.css – open it with a text editor – find color #fe4b7b and replace it with #cc2b5e

This should be all, now you should have your custom color available in the template options – the preset tab of our template.

We tried to explain as better as we could, if the words are not enough, we also created a video tutorial for you:

That’s it, in only 2 minutes you can insert the preset color you want.

Stay tuned for more tutorials.