Style Manager

(Difference between revisions)
Jump to: navigation, search
(Added == Changes like setting body background image appear in the preview but not on the site ==)
m (Style Manager Video)
(16 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
[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=
+
= Style Manager Video =
  
{{#ev:vimeo|20080264|800}}
+
{{#ev:vimeo|59948982|640|none|Latest}}
 +
 
 +
Source: http://ithemes.com/tutorials/using-the-builder-style-manager/
 +
 
 +
{{#ev:vimeo|20080264|800|none|Older}}
  
 
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.
 
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].
 
[http://ithemes.com/how-to-use-the-builder-style-manager/ Corresponding blog post].
 +
 +
= Information for Style Manager 0.6.0 and up =
 +
 +
Beginning with version 0.6.0, Style Manager supports responsive-ready child themes as well while keeping the responsiveness intact. It is no longer needed to comment out
 +
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-responsive' );
 +
</pre>
 +
 +
in a responsive-ready child theme's (i.e., child theme having version number 4.0.0 and up) <code>functions.php</code> so as to use Style Manager.
 +
 +
At My Theme -> Style Manager, the following notice will appear:
 +
 +
"Style Manager now 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.
 +
 +
Since you are running a non-responsive child theme, the listing below will only show the Styles created in this format. Any Styles in the other format still exist and can still be used if you switch back to a responsive-ready child theme."
 +
 +
There are a few important things to know before you start using the new Style Manager on your responsive Builder sites, so we've outlined them all in [http://ithemes.com/2013/01/23/just-released-style-manager-update-for-builder-4-0/ this blog post].
  
 
= FAQ =
 
= FAQ =
 +
 +
== How to update Style Manager ==
 +
 +
Follow [http://ithemes.com/codex/page/General_WordPress_Related#How_to_update_a_plugin this].
  
 
== Styles appear in preview window but not on the site ==
 
== Styles appear in preview window but not on the site ==
  
* Use '''Firefox'''. Do not use other browsers, especially IE when using Style Manager.
+
# 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. [http://pluginbuddy.com/serverbuddy-check-hosting-quality-security-issues-more/ 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.
+
# Ensure that your site is hosted on a server that runs '''PHP 5''', not PHP 4. [http://pluginbuddy.com/serverbuddy-check-hosting-quality-security-issues-more/ 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.
 +
# Ensure that permissions (CHMOD) of wp-content/uploads/builder-style-manager directory is 755 (should apply to all 3 directories).
 +
# Ensure that permissions (CHMOD) of Style Manager generated .css file(s) inside wp-content/uploads/builder-style-manager directory is 644.
  
 
== Preview window is too small to be usable ==
 
== Preview window is too small to be usable ==
Line 66: Line 94:
 
A useful site for font families is http://font-family.com/
 
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
+
For an example of using @font-face fonts in Style Manager, see [http://ithemes.com/forum/topic/14898-entree-themes-font-change/page__view__findpost__p__70243 this].
  
For an example of using @font-face fonts in Style Manager, see [http://ithemes.com/forum/index.php?/topic/14898-entree-themes-font-change/#p70818 this].
+
=== How to use typekit fonts in Builder ===
 +
 
 +
'''1.''' Create an account at [https://typekit.com/ 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.
 +
 
 +
[[File:Screen Shot2 2012-01-30 at 6.45.13 PM.png|780px|thumb|none]]
 +
 
 +
'''2.''' Go to WordPress dashboard, My Theme -> Settings -> Analytics and JavaScript Code and paste it in the <code>List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below.</code> text area.  
 +
 
 +
[[File:Screen Shot 2012-01-30 at 7.11.12 PM.png|800px|thumb|none]]
 +
 
 +
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''.
 +
 
 +
[[File:2012-01-30 19-19-43.png|800px|thumb|none]]
 +
 
 +
Copy the font-family line.
 +
 
 +
[[File:2012-01-30 20-04-43.png|735px|thumb|none]]
 +
 
 +
'''4.''' Now we can use the font in our child theme's style.css just like any other.
 +
 
 +
Ex.:
 +
 
 +
<pre class="brush:css;">
 +
.entry-title {
 +
    font-family: "museo-slab",serif;
 +
}
 +
</pre>
 +
 
 +
results in
 +
 
 +
[[File:Screen Shot 2012-01-30 at 7.30.25 PM.png|492px|thumb|none]]
 +
 
 +
'''5.''' To make this font available in Style Manager, the following code should be added in child theme's functions.php:
 +
 
 +
<pre class="brush: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' );
 +
</pre>
 +
 
 +
In the above <code>'museo-slab', serif</code> should be replaced with font-family value copied in step 3. Note that single quotes are being used instead of double quotes because <code>'museo-slab', serif</code> will be surrounded by double quotes.
 +
 
 +
Also <code>Museo Slab</code> 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.
 +
 
 +
[[File:2012-01-30 20-08-49.png|643px|thumb|none]]
  
 
==Background color does not appear on the nav bar in the preview window==
 
==Background color does not appear on the nav bar in the preview window==
Line 145: Line 236:
 
* 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. [http://ithemes.com/forum/index.php?/topic/5298-having-a-problem-activating-builder-on-a-fresh-install-of-wp3/#p30612 Source]
 
* 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. [http://ithemes.com/forum/index.php?/topic/5298-having-a-problem-activating-builder-on-a-fresh-install-of-wp3/#p30612 Source]
 
* At Settings -> General, if WordPress address (URL) and Site address (URL) are the same location (which is usually the case), ensure that they are exactly the same. Ex.: "http://domain.com" for both the fields is good, not "http://domain.com" for one and "http://www.domain.com" for the other.
 
* At Settings -> General, if WordPress address (URL) and Site address (URL) are the same location (which is usually the case), ensure that they are exactly the same. Ex.: "http://domain.com" for both the fields is good, not "http://domain.com" for one and "http://www.domain.com" for the other.
 +
* Beginning v0.6.4, it is possible to change the URL of page that loads in Style Manager's Preview. See [http://ithemes.com/forum/topic/38640-changing-page-in-preview-window-in-test-mode-with-test-site/#entry176588 this] post for details.
  
 
=Scope/Limitation=
 
=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.
+
* Presence of Style Manager does not mean that one can get away from writing custom CSS code. While Style Manager can be used to set styles for some elements, it is not an extensive tool that covers each and every element on a webpage. In some cases, even when an option to style a particular element seems to be present in Style Manager it might not actually work because the child theme's style.css overrides it. The "Cascading" part of Cascading Style Sheets (CSS) must be understood to avoid frustrations generally associated with "Why the heck can't I style this with Style Manager?". The general answer to "What all can I style in Style Manager?" is: "Whatever you see and can style when you use Style Manager".
 +
 
 +
* Now that you know Style Manager is not your swiss army knife for all your styling needs, what is? The answer is: A knowledge of CSS and Firebug. iThemes Builder customers can watch [http://ithemes.com/forum/topic/1768-using-firebug-to-inspect-elements-and-getting-the-css-to-adjust-positioning-background-colors-etc/ several videos] on how to use Firebug to style various elements. We also compiled a list of CSS resources [http://ithemes.com/codex/page/CSS here].
 +
 
 +
* 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.
 +
 
 +
* When [http://wordpress.org/extend/plugins/jetpack/ Jetpack] is active, Style Manager does not work. More info [http://ithemes.com/forum/topic/37416-style-manager-060-still-not-working-with-jetpack/#entry171516 here].
 +
 
 +
Let's say a blue background is applied to a Style Manager Style that is set as Global. It will work fine (i.e., appear on the site) when Jetpack is not active. When Jetpack is activated (whether connected to wordpress.com or not), existing Style Manager Styles will continue to work. In our example, the blue background will continue to appear on the site. Now upon going back to the Style Manager Style, changes won't appear in Preview even though any modified values will remain. Any changes done to the Style will not take affect or appear on the site. The old rules (blue background in our example) will still be visible on the front-end.
 +
 
 +
Now if Jetpack is deactivated, in order to get any changes done in the Style to work, it has to be edited and saved.
 +
 
 +
To summarize, it is possible to style the site using Style Manager by deactivating Jetpack and once you are done, activate Jetpack if you wish to use it.
 +
 
 +
http://ithemes.com/forum/topic/38071-style-manager-save-buttons-are-greyed-out/#entry174243

Revision as of 08:56, February 26, 2013

Contents

Introduction

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

It can be downloaded from Member Panel.

Style Manager Support Forum

Style Manager Video

Latest

Source: http://ithemes.com/tutorials/using-the-builder-style-manager/


Older

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.

Information for Style Manager 0.6.0 and up

Beginning with version 0.6.0, Style Manager supports responsive-ready child themes as well while keeping the responsiveness intact. It is no longer needed to comment out

add_theme_support( 'builder-responsive' );

in a responsive-ready child theme's (i.e., child theme having version number 4.0.0 and up) functions.php so as to use Style Manager.

At My Theme -> Style Manager, the following notice will appear:

"Style Manager now 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.

Since you are running a non-responsive child theme, the listing below will only show the Styles created in this format. Any Styles in the other format still exist and can still be used if you switch back to a responsive-ready child theme."

There are a few important things to know before you start using the new Style Manager on your responsive Builder sites, so we've outlined them all in this blog post.

FAQ

How to 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.

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' );

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 to use typekit fonts in Builder

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

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

Changes don't appear in Preview although 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  ;
}

Changes like setting body background image appear 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

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

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
  • At Settings -> General, if WordPress address (URL) and Site address (URL) are the same location (which is usually the case), ensure that they are exactly the same. Ex.: "http://domain.com" for both the fields is good, not "http://domain.com" for one and "http://www.domain.com" for the other.
  • Beginning v0.6.4, it is possible to change the URL of page that loads in Style Manager's Preview. See this post for details.

Scope/Limitation

  • Presence of Style Manager does not mean that one can get away from writing custom CSS code. While Style Manager can be used to set styles for some elements, it is not an extensive tool that covers each and every element on a webpage. In some cases, even when an option to style a particular element seems to be present in Style Manager it might not actually work because the child theme's style.css overrides it. The "Cascading" part of Cascading Style Sheets (CSS) must be understood to avoid frustrations generally associated with "Why the heck can't I style this with Style Manager?". The general answer to "What all can I style in Style Manager?" is: "Whatever you see and can style when you use Style Manager".
  • Now that you know Style Manager is not your swiss army knife for all your styling needs, what is? The answer is: A knowledge of CSS and Firebug. iThemes Builder customers can watch several videos on how to use Firebug to style various elements. We also compiled a list of CSS resources here.
  • 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.
  • When Jetpack is active, Style Manager does not work. More info here.

Let's say a blue background is applied to a Style Manager Style that is set as Global. It will work fine (i.e., appear on the site) when Jetpack is not active. When Jetpack is activated (whether connected to wordpress.com or not), existing Style Manager Styles will continue to work. In our example, the blue background will continue to appear on the site. Now upon going back to the Style Manager Style, changes won't appear in Preview even though any modified values will remain. Any changes done to the Style will not take affect or appear on the site. The old rules (blue background in our example) will still be visible on the front-end.

Now if Jetpack is deactivated, in order to get any changes done in the Style to work, it has to be edited and saved.

To summarize, it is possible to style the site using Style Manager by deactivating Jetpack and once you are done, activate Jetpack if you wish to use it.

http://ithemes.com/forum/topic/38071-style-manager-save-buttons-are-greyed-out/#entry174243

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox