With the code from below you can change colors and backgrounds in your BigCommerce template without having to touch the CSS files. For someone that does not work with HTML/CSS and still wants to change things around it can be
hard to locate exactly the lines that need to be changed.
In the code from below you will see comments that will help you identify what and where you change in the template. The code will handle changes like text or link color and color of the background for different elements of the page like the top menu, main menu, left and right panels or background image of the entire store.
Some things you need to learn:
- you can set transparent colors or background using the value: transparent
- colors need to be writen in shorthand hex code, which looks like this: #FFF (for white) or #000 (for black)
- to change the color of a text or link you will need to change the line with : color
- to change the background of an HTML element look for : background (this allows you to use even images as background) or background-color (only when you set colors as background)
- you can get the hex value of a color by using: Online color Schemer
- if you want to use your own images for the background simply upload them to Website content- Image Manager, and then get the link to insert it where you see the 'url' value (in the lines that have both 'url' and 'background')
Since there are no easy ways to change things in the BigCommerce templates you need to use workarounds like this one. Copy the entire code and paste it in Panels/HTMLHead.html, right under the %%GLOBAL_RTLStyles%% variable and then you are ready to change colors and backgrounds in most of the elements on home page.
The code does not handle colors and background for category, product or brand pages. This will come in a later tutorial.
What other changes would you like to do using the below code?