BuilderChild-Blueprint

(Difference between revisions)
Jump to: navigation, search
m (How to set up Blueprint to look like demo site)
Line 1: Line 1:
 
= How to set up Blueprint to look like demo site =
 
= How to set up Blueprint to look like demo site =
 
Note: This page is not complete yet.
 
  
 
==Introduction==
 
==Introduction==

Revision as of 03:50, February 13, 2011

Contents

How to set up Blueprint to look like demo site

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