Style Manager

(Difference between revisions)
Jump to: navigation, search
m
(Added "Style Manager Video")
Line 6: Line 6:
  
 
[http://ithemes.com/forum/style-manager-plugin/ Style Manager Support Forum]
 
[http://ithemes.com/forum/style-manager-plugin/ Style Manager Support Forum]
 +
 +
=Style Manager Video=
 +
 +
{{#ev:vimeo|20080264|800}}
 +
 +
Above video is 73-minute recording of "Builder Style Manager Exposed" webinar from WebDesign.com that shows you how to use the Builder's style manager to control the look of your site.
 +
 +
[http://ithemes.com/how-to-use-the-builder-style-manager/ Corresponding blog post].
  
 
= FAQ =
 
= FAQ =

Revision as of 11:36, May 26, 2011

Contents

Introduction

Style Manager is a plugin for iThemes Builder that provides a easy interface to adjust styling of various elements of Builder theme.

It can be downloaded from Member Panel.

Style Manager Support Forum

Style Manager Video

Above video is 73-minute recording of "Builder Style Manager Exposed" webinar from WebDesign.com that shows you how to use the Builder's style manager to control the look of your site.

Corresponding blog post.

FAQ

Styles appear in preview window but not on the site

  • Use Firefox. Do not use other browsers, especially IE when using Style Manager.
  • Ensure that your site is hosted on a server that runs PHP 5, not PHP 4. ServerBuddy plugin can be used to check this and more. You can contact your host for help on upgrading from a older version of PHP to version 5.

Preview window is too small to be usable

Ensure that WordPress address and Site address are the same at Settings -> General.

More info.

How to add fonts

It is possible to add font stacks and font sizes by adding code to child theme's functions.php.

Example code:

function customize_font_stacks( $font_stacks ) { 
    $new_font_stacks = array(
        "Arial, 'Helvetica Neue', Helvetica, sans-serif"  => 'Arial',
        "Baskerville, 'Times New Roman', Times, serif"    => 'Times',
        "'Century Gothic', 'Apple Gothic', sans-serif"    => 'Century Gothic',
    );
    
    return array_merge( $font_stacks, $new_font_stacks );
}
add_filter( 'builder_filter_style_manager_general_font_families', 'customize_font_stacks' );
function customize_font_sizes( $font_sizes ) { 
    $new_font_sizes = array(
        '37px'      => '37px',
        '37%'       => '37%',
        '37pt'      => '37pt',
    );
    
    return array_merge( $font_sizes, $new_font_sizes );
}
add_filter( 'builder_filter_style_manager_general_font_sizes', 'customize_font_sizes' );

A useful site for font families is http://font-family.com/

Source: Style Manager Suggestions section at http://ithemes.com/forum/index.php?/topic/1146-what-would-you-like-to-see-next-in-builder/page-7/#p36785

Background color does not appear on the nav bar in the preview window

This is happening because the nav bar has a background image set (depending on the child theme) in child theme's style.css. The solution is to set Background Image to None.

Navigation-module-background-style-manager.png

Color changes for links are not showing in the preview window

Make sure you are changing these in the correct section.

Links can be styled in these sections:

  1. Links
  2. Post/Page Content Styling
  3. Module Sidebars -> Widgets
  4. Widget Bar Module -> Widgets

Borders for widgets show in the preview window but not on the site

Left and right borders should be manually added via CSS.

Example: Adding the following at the end of child theme's style.css will set left and right borders for a widget whose ID is "text-5". This shows how to get ID of a widget.

#text-5 {
    border-left: 1px solid #B3B3B3;
    border-right: 1px solid #B3B3B3;
}

Useful tips and forum links

  • See this forum topic on permissions. Summary: "Anyway I discovered the css files being created in wp-content/uploads were being created with rw rw — permissions and as soon as I changed the file permissons to be rw rw r it all worked perfectly."
  • If you are using 1&1 hosting, create a single line .htaccess file with this code "AddType x-mapp-php5 .php" and upload it to the root. Source

Scope/Limitation

It is not possible to apply one set of styles to the complete module or individual widgets of a module differently than other modules of that type. i.e., the styles that you set to widget bar modules will apply to all widget bar modules. Ex.: You will not be able to apply say, a blue background to just one widget bar module while the rest of them have been set to say, a red background via Style Manager. For such changes, style.css has to be edited manually.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox