|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy. While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs. |
To change the colors of your microstore navigation, go to Settings > Microstores.
Once in the Microstores section, click on Microstore list.
Next, click on the edit icon for the miscrostore you wish to modify.
Once inside the micro store editor, scroll down to the “micro store settings” section. At the bottom of that section, you will see options to set the microstores' primary and secondary colors.
Using these options, you can either enter in your color values or click on the color picker button to choose your color from the selector.
Once you have selected the primary and secondary colors, make sure and hit the save button.
Because of the way microstores render the style sheet, merge codes need to be added to the head tags in order for the colors chosen to display properly.
To do this, click on the themes icon on the left hand column.
Once in the Themes Dashboard, you can either click on the edit button, or the image of your active theme.
Next, on the left hand navigation, click on Header > HTML Editor
The final step is to add the merge codes for your microstore colors to the header CSS.
Here are the two merge codes that you will need to add to your header:
- ##MSCOLOR1##
- ##MSCOLOR2##
Below is an example of how to change the navigation, links, and hover links.
Example for the navigation bar
<style>.navbar-collapse { background-color: ##MSCOLOR1## !important; border: 0; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: ##MSCOLOR2## !important; }
a { color: ##MSCOLOR1## !important; text-decoration: none; }
a:hover, a:focus { color: ##MSCOLOR2## !important; text-decoration: underline; }
h1 { color: ##MSCOLOR1## !important; }
h2 { color: ##MSCOLOR2## !important; }
</style>
Once you have added your merge codes, make sure and hit the save button.
|
Check out these other Articles on Microstores:
|