Custom CSS rules

It is possible to add extra styling to the web site using custom CSS rules per element.

CSS (Cascading Style Sheets) is a standard web technology for changing the appearance of a page. Modifying the CSS rules requires some understanding web design and how CSS properties influence the appearance and how CSS selectors work.

For any element on the web site click on Settings and choose the Appearance pane and then the CSS Rules tab

img

You can define CSS rules in one of two ways:

  1. To define a property that applies to the whole element just enter it as css-property: value, for example:

img

img

  1. To define a property that has a CSS selector use the syntax: css-selector >> css-propery: value;

For example to change the background of a menu to green and use white text apply the following rules:

img

img

There are a number of common changes that you might need:

  1. Disable the caption bar (grey bar) in a text and image side-by-side element

    div.caption-holder div >> display: none;
    
  2. Change a purchase element from 2 column mode to a single wide column and hide the instructions on the right

    div.col-md-push-6 >> display: none;
    div.col-md-6 >> width: 100%;
    div.col-md-6 >> right: 0% !important;
    
  3. Stack the columns in the purchase element in 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;
    
  4. Change the background and foreground colors of the menu

    nav div >> background-color: red;
    nav >> border-color: red;
    a >> color: white;
    
  5. Hide the 'quantity remaining' display on a purchase element

    div.qty-remaining >> display: none;
    
Last Updated: 12/10/2018, 6:22:56 PM