Custom CSS Rules 2019
It is possible to add extra styling to the web site using custom CSS rules per individual element.
CSS (Cascading Style Sheets) is a standard web technology for changing the appearance of a page. Modifying the CSS rules requires some understanding of web design, how CSS properties influence the website/page appearance, and how CSS selectors work.
To modify or add and custom CSS to an element on the website, click on its Settings link and choose the Appearance pane, then click the CSS Rules tab.
You can define CSS rules in one of two ways:
- To define a property that applies to the whole element just enter it as css-property: value, for example, to change the background color of an element to red:
- To define a property that requires a CSS selector use the following syntax:
css-selector >> css-property: value;
For example, to change the background of a menu to green and use white text for its links, apply the following rules in the Menu element's Settings' CSS Rules tab:
Example CSS Rules
Below are a number of common changes that you might find useful:
Disable the caption bar (grey bar) in a text and image side-by-side element:
div.caption-holder div >> display: none;
Change a purchase element from 2-column mode to a single, wide column; and, hide the instructions on the right side:
div.col-md-push-6 >> display: none; div.col-md-6 >> width: 100%; div.col-md-6 >> right: 0% !important;
Stack the columns of the purchase element in a single file instead of side by side:
div.col-md-push-6 >> left: 0%; div.col-md-6 >> width: 100%; div.col-md-6 >> right: 0% !important;
Change the background, and foreground, colors of the menu element:
nav div >> background-color: red; nav >> border-color: red; a >> color: white;
Hide the "quantity remaining" display on a purchase element:
div.qty-remaining >> display: none;