Genesis Extender Front-End CSS Builder

left-sidebarSome tips for getting the most out of the Front-End CSS Builder

The Front-End CSS Builder is comprised of the following parts:

  1. Horizontal Navigation bar across the top
  2. Left Hand Side Bar
  3. Staging Area for Custom CSS (Middle of left sidebar)
  4. Custom CSS (Bottom of left sidebar)

The Horizontal Navigation is comprised of links for the elements you may want to style and some common CSS additions, such as border’s, shadows, backgrounds, etc

 

elements

The Left Hand Sidebar helps you find the elements and their associated CSS tags for styling.  Specifically, the Element Selectors Button, when clicked, introduces the buttons across the page for the various elements of your website.  Click an element selector and the dropdown in the left hand column reflects the components of that element for styling.

The staging and Custom CSS Editor areas of the left sidebar are where you write your Custom CSS. Keep in mind that, while both will show your updates in real time, the Custom CSS Editor is where you MUST save your CSS in order for it to become active for all visitors.