Builder Style Manager: Creating Styles

From iThemes Codex
Jump to: navigation, search

To create a new style, click Create Style from the Styles page.


The Style Editor

The Style Editor page will appear.


Tip: Expand the Preview Section

Tip: Drag the Preview Section to the top to expand it full-width.

Global Setting

Setting a Style as Global applies the styling to all layouts that don't have a Style selected.

Note: Only one Style can be Global.

Style Manager Options

From here, add any styles to the corresponding sections:

  • Site Background - Modify the main site background with a background color, image, attachement, repeat and positioning.
  • Site Font - Modify the base font on the site by choosing the font family, size and color.
  • Links - These options are for global styling of links. Choose Link color, decoration, hover color and hover decoration.
  • Headings - These styles are mostly-useful for modifying styling of content as different sections allow for styling specific headings (such as h1, h2, h3, etc.).
  • Container - These options style the Container. The container is the wrapper div that contains all the modules.
  • Post/Page Content Styling - These options style the page and post content.
  • Comments Styling - Styling for the wrapper around all the comments and styles for individual comments.
  • Basic Module Styling - These options set some basic module styling options that apply to all modules. The background options can be overridden for specific modules in each modules' options.
  • Module Sidebars (and Widgets) - These options style the background behind the modules in all module sidebars. Note that Widget Bar module sidebars are styled separately in the Widget Bar Modules section.
  • Header Module - These options control the styling of the Header Module.
  • Content Module - These options control the styling of the Content Module. The post and page content can be styled in the Post/Page Content Styling section. Comments can be styled in the Comments Styling section.
  • Navigation Module - These settings style the unhovered, hovered and active styling appearance of the Navigation Modules.
  • Image Module - These options control the styling of the Image Module.
  • Widget Bar Module - These options style the Widget Bar module container that holds all the widget areas, the Widgets and Widget titles
  • HTML Module - These options control the styling of the HTML Module.
  • Footer Module - These options control the styling of the Footer Module.

Applying Styles

Click Save Style. You'll now see your new Style added to the list.

Styles can also be applied while adding or editing a Layout. Selecting a Style from the dropdown list will override the Global Style (if one is set).


See also

← Back to Builder Codex Home