BuilderChild-Blueprint

(Difference between revisions)
Jump to: navigation, search
(Created page and wrote till Module 4)
 
Line 35: Line 35:
 
== Module 3 - Widget Bar Module ==
 
== Module 3 - Widget Bar Module ==
  
Set this to have 2 widgets (widget sidebars or widget areas to be more specific) at 50% / 50%. Style should be Blue (full width).
+
Set this to have 2 widgets (widget sidebars or widget areas would be the correct term) at 50% / 50%. Style should be Blue (full width).
  
 
[[Image:Blueprint-module3.png]]
 
[[Image:Blueprint-module3.png]]
Line 63: Line 63:
 
To match the dimensions of images used in demo site, ensure images embedded in posts are 582px wide and between 250px and 260px tall each.
 
To match the dimensions of images used in demo site, ensure images embedded in posts are 582px wide and between 250px and 260px tall each.
  
== Module 5 ==
+
== Module 5 - Widget Bar Module ==
== Module 6 ==
+
 
 +
Set this to have 3 widgets (widget sidebars or widget areas would be the correct term) at 33% / 33% / 33%. Style should be Tan (full width).
 +
 
 +
[[Image:Blueprint-module5.png]]
 +
 
 +
Go to Appearance -> Widgets. Drag your desired widgets into the left and right widget areas.
 +
 
 +
== Module 6 - Footer Module ==
 +
 
 +
Style should be Blue (full width).
 +
 
 +
[[Image:Blueprint-module6.png]]
 +
 
 +
Follow [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#How_do_I_edit_the_footer.3F this] to learn how to edit the footer.
 +
 
 +
= How to have shorter nav bars =
 +
 
 +
[[Image:Blueprint-nav-variation.jpg]]
 +
 
 +
Add [http://pastebin.com/mTz0tLuf this] code at the end of your theme's style.css.
 +
 
 +
Forum thread: http://ithemes.com/forum/index.php?/topic/11588-nav-bar-styling-with-blueprint-child-theme/

Revision as of 03:49, February 13, 2011

Contents

How to set up Blueprint to look like demo site

Note: This page is not complete yet.

Introduction

Live Demo

Activate Blueprint child theme at Themes -> Appearance.

Go to My Theme -> Layouts. Duplicate "960 Home" as say, "Home". If you have deleted the stock "960 Home" layout, create a new one and ensure that its width is 960px. Set this as default layout (for now). Hide widget areas of all other layouts.

Home-layout.png

Edit this layout..

Module 1 - Image Module

Ensure that the image being uploaded is 640 x 120. Set Link URL to your site's home page. Add one 320px right sidebar. Leave the Style at Default.

Blueprint-module1.png

Go to Appearance -> Widgets. Drag Search widget in the module's right widget area. Enter "Search the site" as Title.

Module 2 - Navigation Module

Navigation Type: Builder Settings Pages

The list of Pages that should appear as menu items in this setting can be controlled by going to My Theme -> Settings.

Note: You can also use a custom menu in this module instead of Builder Settings Pages. Go to Appearance -> Menus to create a custom menu with your desired links. To use this custom menu in the nav bar, the navigation module's type should be set to "Custom Menu - <name of your menu>".

Leave the Style dropdown at Default.

Module 3 - Widget Bar Module

Set this to have 2 widgets (widget sidebars or widget areas would be the correct term) at 50% / 50%. Style should be Blue (full width).

Blueprint-module3.png

Go to Appearance -> Widgets. Drag your desired widgets into the left and right widget areas.

In the demo site, below is the left widget's (of type Text) code with "Automatically add paragraphs" ticked:

Blueprint is a child theme for <strong>iThemes Builder</strong>. It uses Builder's Alternate Module Styles to provide you with 3 different widget bar styles, 2 navigation styles, 3 sidebar styles and 3 footer styles. And you can choose where everything goes and which style you want with just a few clicks, thanks to Builder.

Take a look around the demo to see all the options you have to choose from in this theme. Check out the <strong>layouts in the navigation</strong> to see an array of layouts Builder can create for you in seconds. Watch the video over there to see even more.

and below is the right widget's code:

<iframe src="https://player.vimeo.com/video/18427139?title=0&byline=0&portrait=0" width="432" height="238" frameborder="0"></iframe>

Module 4 - Content Module

Set this to have one 320px right sidebar. Leave Style as Default.

Blueprint-module4.png

To match the dimensions of images used in demo site, ensure images embedded in posts are 582px wide and between 250px and 260px tall each.

Module 5 - Widget Bar Module

Set this to have 3 widgets (widget sidebars or widget areas would be the correct term) at 33% / 33% / 33%. Style should be Tan (full width).

Blueprint-module5.png

Go to Appearance -> Widgets. Drag your desired widgets into the left and right widget areas.

Module 6 - Footer Module

Style should be Blue (full width).

Blueprint-module6.png

Follow this to learn how to edit the footer.

How to have shorter nav bars

Blueprint-nav-variation.jpg

Add this code at the end of your theme's style.css.

Forum thread: http://ithemes.com/forum/index.php?/topic/11588-nav-bar-styling-with-blueprint-child-theme/

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox