Builder Features

(Difference between revisions)
Jump to: navigation, search
(Added "IMPORT/EXPORT")
(Added "Custom Widget Styles")
Line 27: Line 27:
 
View the video here ==> http://ithemes.com/?p=4774
 
View the video here ==> http://ithemes.com/?p=4774
  
=Feature 4=
+
=Custom Widget Styles=
 +
 
 +
Note:
 +
 
 +
# Only the Widget Content widget supports this option currently
 +
# 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:
 +
 
 +
<pre class="brush:php;">
 +
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' );
 +
}
 +
</pre>
 +
 
 +
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.
 +
 
 +
[[Image:custom-widget-style-code.png|400px|none]]
 +
 
 +
Screenshots at Appearance -> Widgets before and after adding the above code:
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Custom-widget-style-before.png
 +
File:Custom-widget-style-after.png
 +
</gallery>
 +
 
 +
The following has been added at the end of theme's style.css:
 +
 
 +
<pre class="brush:css;">
 +
.css-class-1 {
 +
background: yellow !important;
 +
}
 +
</pre>
 +
 
 +
Screenshots of how the site appears before and after doing the above:
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Custom-widget-style-before2.png
 +
File:Custom-widget-style-after2.png
 +
</gallery>
 +
 
 +
Henceforth any widget content widget that should get a yellow background can simply be set this style "Style Name 1" at Appearance -> Widgets.

Revision as of 08:35, March 29, 2011

Contents

Duplicate Sidebar Widget

The Duplicate Sidebar Widget allows for easy duplication of another sidebar’s widgets simply by dropping in the Duplicate Sidebar widget and selecting the sidebar to be duplicated from the drop-down.

http://ithemes.com/builder-tip-use-duplicate-sidebar-widget-to-use-all-widgets-of-one-sidebar-in-another/

http://ithemes.com/codex/page/Duplicate_Sidebar_Widget

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

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/

IMPORT/EXPORT

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 Widget Styles

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;
}

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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox