Builder Features

(Difference between revisions)
Jump to: navigation, search
m (style-mobile.css and other stylesheets)
m (List of responsive-ready Builder child themes)
(8 intermediate revisions by 3 users not shown)
Line 100: Line 100:
 
=== My site uses Builder's Style Manager plugin, can I use both Style Manager and the responsive feature? ===
 
=== My site uses Builder's Style Manager plugin, can I use both Style Manager and the responsive feature? ===
  
'''Summary: If you are using Builder 4.0, Style Manager, and a pre-4.x child theme, there won't be any issues. The only compatibility issue is with Style Manager and the updated 4.x (responsive-ready) child themes.'''
+
'''Summary: If you are using Builder 4.0, Style Manager, and a pre-4.x child theme, there won't be any issues. The only compatibility issue is with Style Manager and the updated 4.x child themes WITH RESPONSIVE ENABLED. Updated 4.x child themes with RESPONSIVE DISABLED will have no issues with Style Manager.'''
  
Unfortunately, Style Manager needs some attention to make it properly handle the changes introduced by this new responsive feature. So, no, for now, you cannot use Style Manager and one of the responsive-ready child themes. We suggest that you deactivate Style Manager until a responsive-compatible version is released.
+
So you ''can'' use Builder Style Manager and a responsive child theme (version 4 and up) but you need to remove the "responsive" abilities of that child theme (so that it acts like the pre-version 4 theme). To do so, you need to edit functions.php, and remove this line, or add 2 forward slashes in front to disable the code.
 +
 
 +
<pre class="brush:php">
 +
add_theme_support( 'builder-responsive' );
 +
</pre>
 +
 
 +
Note that your child theme will NOT be behaving as a responsive theme anymore (forum: http://ithemes.com/forum/topic/34362-older-builder-theme-availability/#entry158872).
  
 
We had a choice to make: either hold off the Builder 4.0 release again or release it now with the notice that Style Manager isn't ready. We decided that everyone has been really patient and deserved to get the update sooner rather than later. So, expect to see updates about Style Manager soon as we get it patched up for the styling changes it needs to account for.
 
We had a choice to make: either hold off the Builder 4.0 release again or release it now with the notice that Style Manager isn't ready. We decided that everyone has been really patient and deserved to get the update sooner rather than later. So, expect to see updates about Style Manager soon as we get it patched up for the styling changes it needs to account for.
 +
 +
[http://ithemes.com/forum/topic/33469-builder-40-style-manager-is-not-available/page__st__20#entry159690 Here] is an update from Cory Miller on Style Manager's progress to make it work with responsive-ready child themes.
  
 
== List of responsive-ready Builder child themes ==
 
== List of responsive-ready Builder child themes ==
 +
 +
Any child theme that has version number equal to or greater than 4.0.0 (in the [http://ithemes.com/member/member.php Member Panel]) is responsive-ready.
 +
 +
The list below might not be up-to-date. You are advised to check the Member Panel for version numbers next to child themes to determine if a particular child theme is responsive-ready or not.
  
 
* Builder Child Theme - Default
 
* Builder Child Theme - Default
Line 117: Line 129:
 
* Builder Child Theme - Expansion Blue
 
* Builder Child Theme - Expansion Blue
 
* Builder Child Theme - Expansion Red
 
* Builder Child Theme - Expansion Red
 +
* Builder Child Theme - Avail
 +
* Builder Child Theme - Depot
 +
* Builder Child Theme - Essence Blue
 +
* Builder Child Theme - Essence Dark
 +
* Builder Child Theme - Essence Golden
 +
* Builder Child Theme - Essence Red
 +
* Builder Child Theme - Essence Silver
 +
* Builder Child Theme - Essence White
 +
* Builder Child Theme - Thrifty
 +
* Builder Child Theme - Icebox
 +
* Builder Child Theme - Threads
 +
* Builder Child Theme - Thrify
  
 
We are currently converting more child themes besides the above to be responsive-ready.
 
We are currently converting more child themes besides the above to be responsive-ready.
Line 128: Line 152:
 
'''style-responsive.css''' stylesheet loads when the screen width is less than or equal to the tablet-width (by default, this width is set to be the width of the current Layout).
 
'''style-responsive.css''' stylesheet loads when the screen width is less than or equal to the tablet-width (by default, this width is set to be the width of the current Layout).
  
'''style-tablet.css''' stylesheet loads when the screen width is less than or equal to the tablet-width AND is greater than the mobile-width
+
'''style-tablet.css''' stylesheet loads when the screen width is less than or equal to the tablet-width AND is greater than the mobile-width. Unless the settings are modified, tablet-width is the same as the layout-width.
  
 
'''style-mobile.css''' stylesheet loads when the screen width is less than or equal to the mobile-width. By default, this width is 500px.
 
'''style-mobile.css''' stylesheet loads when the screen width is less than or equal to the mobile-width. By default, this width is 500px.
Line 141: Line 165:
  
 
=== Add theme support builder responsive function parameters ===
 
=== Add theme support builder responsive function parameters ===
 +
 +
Examples:
 +
 +
1.
 +
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-responsive', array('tablet-width' => '800px', 'mobile-width' => '400px' ));
 +
</pre>
  
 
==== mobile-width ====
 
==== mobile-width ====
Line 147: Line 179:
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
add_theme_support( 'builder-responsive', array( 'mobile-width' => '700px' ) );
+
add_theme_support( 'builder-responsive', array( 'mobile-width' => '400px' ) );
 +
</pre>
 +
 
 +
<code>mobile-width</code> is used to determine what width is considered to be "mobile". In Builder's responsive feature, this width is used to cause the styling in the <code>style-mobile.css</code> file to take effect and is used to figure out when to add the auto-generated margins. The default value of <code>mobile-width</code> is 500px.
 +
 
 +
==== tablet-width ====
 +
 
 +
Ex.:
 +
 
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-responsive', array( 'tablet-width' => '800px' ) );
 
</pre>
 
</pre>
  
The <code>mobile-width</code> is used to determine what width is considered to be "mobile." In Builder's responsive feature, this width is used to cause the styling in the <code>style-mobile.css</code> file to take affect and is used to figure out when to add the auto-generated margins. The default value of <code>mobile-width</code> is 500px.
+
<code>tablet-width</code> is used to determine what width is considered to be "tablet". In Builder's responsive feature, this width is used to cause the styling in the <code>style-tablet.css</code> file to take effect.
  
 
==== enable-breakpoints ====
 
==== enable-breakpoints ====

Revision as of 19:58, January 23, 2013

Contents

Responsive

In this webinar, Koop and Chris demo the way Builder now dynamically responds for mobile or tablet viewing and answer questions about how this update effects existing and future child themes.

Builder-responsive-540x337.png

Introduction

Starting with version 4.0, Builder theme is responsive.

"Responsive is Coming to iThemes Builder" blog post

"Moving Forward With iThemes Builder Responsive" blog post

"iThemes Builder 4.0 with Responsive Support Is Here" Announcement

Responsive Builder demo site

iThemes Builder 4.0 Responsive Launch Webinar (Replay)

A Primer on Responsive Web Design

FAQ

What is the easiest and fastest way to get started with a Builder responsive site?

The quickest way to get a responsive Builder site up and running is to get the latest version of Builder and one of the updated child themes (currently any of the Foundation Series of child themes). Since the Foundation Series child themes are specifically intended as starting points for building custom designs, using one of these will give you a solid, responsive child theme to build your site.

Will updating my existing site with this new version of Builder break my child theme design?

A lot of effort has gone into ensuring that this version of Builder will not cause issues when you upgrade an existing site to Builder 4.0. There is a specific piece of code that needs to be in a child theme's functions.php in order to trigger the new responsive feature, so your child theme will still function as it does now after you upgrade. Here is that code:

add_theme_support( 'builder-responsive' );

Note that there are some Builder sites that have extreme modifications. Since we don't have access to these modified child themes, we can't test with them. So, if you have a large amount of customizations through filters that affect widths, positioning, and other aspects integral to rendering a Layout, it is possible that the changes in this release can cause you some issues.

If you have a highly-customized site such as this, we recommend keeping a backup of your existing Builder theme directory just in case. If you run into any issues after upgrading, revert to the previous version of Builder and contact us in the forum about the issue. If possible, please provide a copy of your child theme that is having the issue so that we can find a way to work around the issue.

Can I update my existing child theme to be responsive?

A big goal that we had for this release was to make it very easy to update existing child themes to be responsive. As Chris Jean mentioned here, the idea was to make it as simple as adding a line of PHP to your child theme's functions.php file.

In a way, this has been achieved. By adding a single line of PHP to your child theme’s functions.php file, you can enable Builder 4.0's responsive feature. However, what we overlooked to account for is that the old method of styling child themes create some inconsistencies as the design breaks down responsively.

Will adding this line of PHP make your existing child theme responsive? Yes; however, the styling may not take to it too well.

The best advice we can give to people is to try making the change on a test version of your site. Set up a test installation of WordPress (if you have BackupBuddy, you can use the magic migration feature to set up a mirror of your site for testing), install the latest version of Builder, add your child theme, make the modification (listed below) to the functions.php file, and test things out to see if your design is coping well with the new responsive feature.

Note that the functions.php modification can be removed to switch the child theme back to its non-responsive functionality, so trying out the feature will not do anything to prevent you from going back. If you don’t want to go to the trouble of making the test site and are comfortable with your site possibly having some style issues while you test out the new feature, you can easily remove the modification and put things back the way that they were.

If your child theme already has a functions.php file, simply add this line after the <?php line:

add_theme_support( 'builder-responsive' );

If your child theme doesn't have a functions.php, create a new file, add the following code to it, save it as functions.php, and add it to your child theme.

<?php
 
add_theme_support( 'builder-responsive' );

We will soon post tutorials that detail what methods we used when updating our existing child themes to be responsive ready. These tutorials will be CSS-heavy, so if you are a CSS novice, you are probably better off starting with one of the updated child themes and updating it to have the desired changes.

What if I want to use Builder 4.0 and one of the responsive-ready child themes but I don't want my site to be responsive?

In a responsive-ready child theme, you will find the following line of PHP in the functions.php file:

add_theme_support( 'builder-responsive' );

In order to disable the responsive feature, replace the above line with:

add_theme_support( 'builder-percentage-widths' );

For example, if the child theme’s functions.php file looks like:

<?php
 
add_theme_support( 'builder-3.0' );
add_theme_support( 'builder-responsive' );

Modify it to look like:

<?php
 
add_theme_support( 'builder-3.0' );
add_theme_support( 'builder-percentage-widths' );

My site uses Builder's Style Manager plugin, can I use both Style Manager and the responsive feature?

Summary: If you are using Builder 4.0, Style Manager, and a pre-4.x child theme, there won't be any issues. The only compatibility issue is with Style Manager and the updated 4.x child themes WITH RESPONSIVE ENABLED. Updated 4.x child themes with RESPONSIVE DISABLED will have no issues with Style Manager.

So you can use Builder Style Manager and a responsive child theme (version 4 and up) but you need to remove the "responsive" abilities of that child theme (so that it acts like the pre-version 4 theme). To do so, you need to edit functions.php, and remove this line, or add 2 forward slashes in front to disable the code.

add_theme_support( 'builder-responsive' );

Note that your child theme will NOT be behaving as a responsive theme anymore (forum: http://ithemes.com/forum/topic/34362-older-builder-theme-availability/#entry158872).

We had a choice to make: either hold off the Builder 4.0 release again or release it now with the notice that Style Manager isn't ready. We decided that everyone has been really patient and deserved to get the update sooner rather than later. So, expect to see updates about Style Manager soon as we get it patched up for the styling changes it needs to account for.

Here is an update from Cory Miller on Style Manager's progress to make it work with responsive-ready child themes.

List of responsive-ready Builder child themes

Any child theme that has version number equal to or greater than 4.0.0 (in the Member Panel) is responsive-ready.

The list below might not be up-to-date. You are advised to check the Member Panel for version numbers next to child themes to determine if a particular child theme is responsive-ready or not.

  • Builder Child Theme - Default
  • Builder Child Theme - Foundation
  • Builder Child Theme - Foundation Blank
  • Builder Child Theme - Foundation Bonsai
  • Builder Child Theme - Foundation Glacier
  • Builder Child Theme - Foundation Tropic
  • Builder Child Theme - Expansion
  • Builder Child Theme - Expansion Blue
  • Builder Child Theme - Expansion Red
  • Builder Child Theme - Avail
  • Builder Child Theme - Depot
  • Builder Child Theme - Essence Blue
  • Builder Child Theme - Essence Dark
  • Builder Child Theme - Essence Golden
  • Builder Child Theme - Essence Red
  • Builder Child Theme - Essence Silver
  • Builder Child Theme - Essence White
  • Builder Child Theme - Thrifty
  • Builder Child Theme - Icebox
  • Builder Child Theme - Threads
  • Builder Child Theme - Thrify

We are currently converting more child themes besides the above to be responsive-ready.

Notes

style-mobile.css and other stylesheets

  • Builder now adds supports for some new stylesheets in the child theme. You can now add style-responsive.css, style-tablet.css, and/or style-mobile.css. These stylesheets will only load when the screen is at a specific width.

style-responsive.css stylesheet loads when the screen width is less than or equal to the tablet-width (by default, this width is set to be the width of the current Layout).

style-tablet.css stylesheet loads when the screen width is less than or equal to the tablet-width AND is greater than the mobile-width. Unless the settings are modified, tablet-width is the same as the layout-width.

style-mobile.css stylesheet loads when the screen width is less than or equal to the mobile-width. By default, this width is 500px.

Further explanation and usage examples shall be added soon.

Adaptive design

Responsive fluidly changes as the browser changes while adaptive has specific sizes that it can change to, but it does not fluidly resize in between these different designs.

In this forum post, Chris explains how one can achieve adaptive design in Builder.

Add theme support builder responsive function parameters

Examples:

1.

add_theme_support( 'builder-responsive', array('tablet-width' => '800px', 'mobile-width' => '400px' ));

mobile-width

Ex.:

add_theme_support( 'builder-responsive', array( 'mobile-width' => '400px' ) );

mobile-width is used to determine what width is considered to be "mobile". In Builder's responsive feature, this width is used to cause the styling in the style-mobile.css file to take effect and is used to figure out when to add the auto-generated margins. The default value of mobile-width is 500px.

tablet-width

Ex.:

add_theme_support( 'builder-responsive', array( 'tablet-width' => '800px' ) );

tablet-width is used to determine what width is considered to be "tablet". In Builder's responsive feature, this width is used to cause the styling in the style-tablet.css file to take effect.

enable-breakpoints

Ex.:

add_theme_support( 'builder-responsive', array( 'enable-breakpoints' => false ) );

By setting enable-breakpoints to false, Builder will no longer generate the responsive breakpoints, essentially changing the design into a fluid design with a max width.

enable-auto-margins

Ex.:

add_theme_support( 'builder-responsive', array( 'enable-auto-margins' => false );

By default, Builder's responsive feature adds margins to the sides of the Layout as the browser width starts to shrink. This is to ensure that the Layout is pushed away from the edges of the device. If this isn't needed, for example, when you want to achieve an adaptive design, we can set enable-auto-margins to false in order to disable this feature.

Widget Content

The Widget Content feature adds the use of an advanced editor to create widget content. A new Widget Content top-level menu is now on the back-end and allows for creation of widget content with the same interface as posts and pages. Once a Widget Content entry is saved, you can add the Widget Content widget to a sidebar location and select the desired Widget Content entry from the drop down to add that content to a sidebar.

http://ithemes.com/two-great-new-features-for-ithemes-builder/

Note: Since Widget Content entries are supposed to be placed as widgets in sidebars, they are not designed to have Preview functionality working. Forum topic: http://ithemes.com/forum/topic/18446-widget-content-preview-is-page-not-found/page__view__findpost__p__85999

IMPORT/EXPORT

Builder provides the ability to export 'Layouts and Views' and/or 'Theme Settings' and import them to another WP site running Builder.

To access this, go to WP dashboard -> My Theme -> Settings -> Import / Export (tab)

Screenshot:

Builder-import-export.png

Tuesday, March 08, 2011

This new feature was announced by Chris Jean recently, and we now have a full webinar recording in which Chris walks through how to use Import/Export, step by step.

In this webinar you will learn what the feature does, when you might want to use it, and when it makes more sense to use BackupBuddy. Chris also reviews all the other changes he incorporated into Builder 2.8.0.

All iThemes Builder users should watch this video, especially those of you involved in web design and development as a career.

View the video here ==> http://ithemes.com/?p=4774

Custom Module Styles

Introduction

Builder provides the ability to select a custom style for a module when the module is being edited in Layout Editor. The name of custom module style and corresponding CSS class are defined in child theme's functions.php.

Custom Module Styles are present by default in these child themes: Americana and its color variants, Blueprint, Ionic and its color variants, Classen, Encased.

Custom Module Styles can also be easily added to other Builder child themes.

Example

Objective: To set a custom style to a specific image module so that the module's wrapper (which is full width by default in Americana) gets blue background that matches the image background.

The screenshot below shows how the site appears before we create and apply the custom style to the image module (top most in the layout):

Custom-module-style1-before.png

Step 1

Editing child theme's functions.php.

builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');

has been added in it_builder_loaded() function.

if ( ! function_exists( 'it_builder_loaded' ) ) {
	function it_builder_loaded() {
		builder_register_module_style( 'widget-bar', 'Blue (full width)', 'widget-bar-blue' );
		builder_register_module_style( 'navigation', 'Subnav Blue', 'subnav-blue' );
		builder_register_module_style( 'html', 'Blue Background', 'html-blue' );
		builder_register_module_style( 'footer', 'White Footer', 'footer-white');
		builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');
	}
	add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}
Custom-module-style-functions-file.png

Step 2

Editing child theme's style.css.

/*********************************************
	Alternate: Blue background (full width)
*********************************************/
.image-blue-outer-wrapper {
	background: #1e3240;
}

has been added.

It is important to note the difference in the class name: .image-blue-outer-wrapper, not just image-blue.

Custom-module-style-stylesheet.png

Step 3

Editing the layout, then editing the image module, applying the style named "Blue Background (full width)", saving the module and finally the layout.

Custom-module-style-dropdown.png

The screenshot below shows how the site looks after our custom style has been applied to the image module:

Custom-module-style1-after.png

More Examples

  1. http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290
  2. http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025

Custom Widget Styles

Builder provides a easy way to apply a style (Ex.: "Yellow Background") to a widget. This style's CSS (Ex.: "background: yellow;") is to be defined in style.css for a selector whose name is defined in functions.php.

Custom-widget-style-after2.png

Note:

  1. Only the Widget Content widget supports this option currently
  2. The support is already built into Builder, but like the Module Styles, the option will not appear unless the child theme provides some Widget Styles. Since none of the child themes do this yet, the option does not appear by default.

If you want to start using this in your own child themes with the realization that it will be limited to Widget Style widgets, you can add code like the following to your child theme's functions.php file:

if ( ! function_exists( 'custom_register_widget_styles' ) ) {
    function custom_register_widget_styles() {
        builder_register_widget_style( 'Style Name 1', 'css-class-1' );
        builder_register_widget_style( 'Style Name 2', 'css-class-2' );
        // Keep adding new Widget Styles as needed for your application
    }
    add_action( 'it_libraries_loaded', 'custom_register_widget_styles' );
}

Then all you'll need to do is change "Style Name 1" and "Style Name 2" to be the names you want for the Widget Styles and "css-class-1" and "css-class-2" to be the classes you want to be applied for each Widget Style. Simply call "builder_register_widget_style" and provide a name and class for each Widget Style you wish to add.

Example

The above code has been added before the closing PHP tag in functions.php of BuilderChild-Blueprint theme.

Custom-widget-style-code.png

Screenshots at Appearance -> Widgets before and after adding the above code:

The following has been added at the end of theme's style.css:

.css-class-1 {
	background: yellow !important;
}

or we can write more specific CSS like the following to avoid using !important:

.builder-module-sidebar .css-class-1 {
	background: yellow;
}

Screenshots of how the site appears before and after doing the above:

Henceforth any widget content widget that should get a yellow background can simply be set this style "Style Name 1" at Appearance -> Widgets.

Analytics and JavaScript Code

Builder makes it very easy to enter Google Analytics ID and custom JavaScript code that you might want to enter in <head> and/or just above </body> sections.

Builder-settings-google-analytics.png

Note: After entering Google Analytics ID in Builder settings,

1. it might take a day or two for Google Analytics to show tracking data in your account.

2. when page source of site is viewed,

UA- number doesn't print directly in the page.

We can see code similar to

<script type='text/javascript'>
(function() {
var bsl=document.createElement('script');
bsl.type='text/javascript';bsl.async=true;bsl.src='http://66.147.244.215/~hpgcom/hughes/wp-content/uploads/it-file-cache/builder-core/script.js?ver=3';
var se=document.getElementsByTagName('script')[0];se.parentNode.insertBefore(bsl,se);
})();
</script>

Above code loads wp-content/uploads/it-file-cache/builder-core/script.js file which is where the Builder-generated scripts are.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox