Builder Style Manager: FAQ

From IThemes Codex
Revision as of 16:24, July 18, 2013 by Kristen (Talk | contribs)
Jump to: navigation, search

Contents

How can I update Style Manager?

Follow this.

Styles appear in preview window but not on the site

  1. Use Firefox. Do not use other browsers, especially IE when using Style Manager.
  2. 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.
  3. Ensure that permissions (CHMOD) of wp-content/uploads/builder-style-manager directory is 755 (should apply to all 3 directories).
  4. Ensure that permissions (CHMOD) of Style Manager generated .css file(s) inside wp-content/uploads/builder-style-manager directory is 644.

Why is the preview window so small?

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

More info.

How can I add web 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' );

Video Instructions: http://ithemes.com/screencasts/builder/adding-fonts-style-manager/

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

For an example of using @font-face fonts in Style Manager, see this.

How can I use Typekit fonts in Builder?

Update on Monday, April 01, 2013: This seems to be a simpler method.

1. Create an account at typekit. Create a kit by specifying the domain on which you wish to use the font(s) that will be added to the kit. Copy the embed code provided by typekit.

Screen Shot2 2012-01-30 at 6.45.13 PM.png

2. Go to WordPress dashboard, My Theme -> Settings -> Analytics and JavaScript Code and paste it in the List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below. text area.

Screen Shot 2012-01-30 at 7.11.12 PM.png

Save Settings.

3. At typekit.com, add the font that you wish to use to this kit. In the window that opens up when a font is added, click on Using fonts in CSS.

2012-01-30 19-19-43.png

Copy the font-family line.

2012-01-30 20-04-43.png

4. Now we can use the font in our child theme's style.css just like any other.

Ex.:

.entry-title {
    font-family: "museo-slab",serif;
}

results in

Screen Shot 2012-01-30 at 7.30.25 PM.png

5. To make this font available in Style Manager, the following code should be added in child theme's functions.php:

function customize_font_stacks( $font_stacks ) { 
    $new_font_stacks = array(
        "'museo-slab', serif"  => 'Museo Slab'
    );
    
    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' );

In the above 'museo-slab', serif should be replaced with font-family value copied in step 3. Note that single quotes are being used instead of double quotes because 'museo-slab', serif will be surrounded by double quotes.

Also Museo Slab should be replaced with the name that you would like to assign to this font in Style Manager's Font Family dropdown.

6. Now this typekit font will be available for use in Style Manager.

2012-01-30 20-08-49.png

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

Why are color changes for links not appearing 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

Why aren't my changes appearing in the preview window when it shows the generated code in CSS Preview?

This is most probably due to a more specific CSS being applied to the element of interest via child theme's style.css.

To illustrate this, please see http://screencast.com/t/z8btUdLahHtX

Even though the text color for widgets of widget bar module has been set to be white in Style Manager, text in the preview window (and on the site) is not white.

This is because of color property in the following from style.css:

.builder-module-sidebar .widget p {
    margin-top: 0;
    color: #333333  ;
}

There is no option to style paragraphs inside widgets in Style Manager.

So we will have to manually add the following CSS either inside Custom CSS or in child theme's style.css to get our desired white color text inside widget bar module's widgets:

.builder-module-widget-bar .widget p {
    color: #FFFFFF  ;
}

Why are changes like body background image appearing in the preview but not on the site?

Webpage elements like Slideshow plugin and AWeber widget script could directly inject CSS into the content of the site.

Ex.: The style injected by AWeber has a rule of body {}. This empty body rule is overriding the one created by Style Manager that sets the background, causing the background modification to be lost in the generated stylesheet.

To diagnose this problem, observe CSS rules in the CSS Preview box such as #af-form-1602098000 { overflow: hidden; } as Style Manager would never produce such a rule. This means that rules from other styles are bleeding into Style Manager's generated stylesheet.

The way to manually work around the issue is to navigate the preview to a view that is free of any styles in the content. Ex.: Let's say there is a View that uses the Full Width Layout (no aWeber widget) for archives (no slideshow slider). Navigate the preview to any archive page, wait for the CSS Preview to refresh, and then save the uncorrupted Style.

To summarize, the fix is:

  1. Edit the Style in Style Manager
  2. Navigate in your preview to a page that does not have an problem causing elements like Aweber form or a Slideshow
  3. Save the Style

Forum topic: http://ithemes.com/forum/index.php?/topic/20557-background-image-disappeared/#p97606

What should I do? I'm getting this error: "Unable to generate stylesheet file. Check file permissions for your uploads directory"

When you get the following upon saving a style in Style Manager

Unable to generate stylesheet file. Check file permissions for your uploads directory. The stylesheet will still function but will not be as efficient as it could be.

the fix is to correct the wrong path that is present for "Store uploads in this folder" field at Settings -> Media. Change it to "wp-content/uploads".

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox