Builder Style Manager: Introduction

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
The '''Builder Style Manager - BETA''' is a plugin for iThemes Builder that provides an easy-to-use interface to adjust basic styling of various site elements. Style Manger generates the CSS code and gives a preview of changes in real time to easily assign colors, change fonts, add borders or change spacing specifications for various site components.
+
The '''Builder Style Manager - BETA''' is a plugin for iThemes Builder that provides an easy-to-use interface to adjust basic styling of various site elements. Style Manager generates the CSS code and gives a preview of changes in real time to easily assign colors, change fonts, add borders or change spacing specifications for various site components.
  
 
<br />
 
<br />
Line 7: Line 7:
 
Styling options available in Style Manager include:
 
Styling options available in Style Manager include:
  
* '''Site Background''' - modify the main site background with a background color, image, attachement, repeat and positioning
+
* '''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. These settings can be overrriden for specific areas by using the options offered in other sections.  
+
*'''Site Font''' - Modify the base font on the site by choosing the font family, size and color.
*'''Links''' -
+
*'''Links''' - These options are for global styling of links. Choose Link color, decoration, hover color and hover decoration.
*'''Headings''' -
+
*'''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''' -
+
*'''Container''' - These options style the Container. The container is the wrapper div that contains all the modules.
*'''Post/Page Content Styling''' -
+
*'''Post/Page Content Styling''' - These options style the page and post content.
*'''Comments Styling''' -
+
*'''Comments Styling''' - Styling for the wrapper around all the comments and styles for individual comments.
*'''Basic Module Styling''' -
+
*'''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''' -
+
*'''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''' -
+
*'''Header Module''' - These options control the styling of the Header Module.
*'''Content 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''' -
+
*'''Navigation Module''' - These settings style the unhovered, hovered and active styling appearance of the Navigation Modules.
*'''Image Module''' -
+
*'''Image Module''' - These options control the styling of the Image Module.
*'''Widget Bar 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''' -
+
*'''HTML Module''' - These options control the styling of the HTML Module.
*'''Footer Module''' -
+
*'''Footer Module''' - These options control the styling of the Footer Module.
  
 
=Style Manager Formats: Responsive vs. Non-Responsive=
 
=Style Manager Formats: Responsive vs. Non-Responsive=
Line 52: Line 52:
 
<br />
 
<br />
  
=Creating a New Style=
+
=Stylesheet Location=
  
To create a new style, click '''Create Style''' from the '''Styles''' page.
+
Saved Style Manager stylesheets are located in <code>wp-content/uploads/builder-style-manager/home.css</code>.
  
<br />
+
=Additional Links=
  
[[File:create-style.png|link=]]
+
[http://ithemes.com/forum/style-manager-plugin/ Style Manager Support Forum]
  
<br />
+
=See also=
  
==The Style Editor==
+
* [[Builder_Style_Manager:_Introduction| Introduction]]
 
+
* [[Builder_Style_Manager:_Video_Overview| Builder Style Manager Video Overview]]
The '''Style Editor''' page will appear.
+
* [[Builder_Style_Manager:_Creating_Styles| Creating Styles]]
 
+
* [[Builder_Style_Manager:_Scope_and_Limitations| Scope/Limitations]]
=Additional Links=
+
* [[Builder_Style_Manager:_FAQ| FAQ]]
 
+
[http://ithemes.com/forum/style-manager-plugin/ Style Manager Support Forum]
+

Latest revision as of 10:17, November 13, 2013

The Builder Style Manager - BETA is a plugin for iThemes Builder that provides an easy-to-use interface to adjust basic styling of various site elements. Style Manager generates the CSS code and gives a preview of changes in real time to easily assign colors, change fonts, add borders or change spacing specifications for various site components.


Contents

Available Options

Styling options available in Style Manager include:

  • 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.

Style Manager Formats: Responsive vs. Non-Responsive

Style Manager supports two different formats: a format for the newer, responsive-ready child themes and a format for the older, non-responsive child themes. These formats are not compatible with one another, meaning that you will only have access to the Styles that are usable by your current child theme.

If you are running a responsive-ready child theme, a notice will appear after installing Style Manager with a list of Styles created in this format. Any Styles in the other format still exist and can still be used if you switch back to a non-responsive child theme.


Stylemanager-notice.png


Installation

  1. Download the Builder Style Manager - Beta plugin from iThemes Member Panel.
  2. From the WordPress dashboard, navigate to Plugins > Add New.
  3. Install and Activate the builder-style-manager zip file.


Once Builder Audio Block has been installed, you'll notice a new menu item has been added to the My Theme left-hand navigation of your WordPress dashboard for Style Manager.


Style-manager-dashboard.png


Stylesheet Location

Saved Style Manager stylesheets are located in wp-content/uploads/builder-style-manager/home.css.

Additional Links

Style Manager Support Forum

See also

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox