BuilderChild-Blueprint

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added "How to show post excerpts with thumbnails on Posts page")
(Added = How to show links to previous and next posts in single post pages =)
 
(10 intermediate revisions by one user not shown)
Line 3: Line 3:
 
==Introduction==
 
==Introduction==
  
[http://demos.ithemesbuilder.com/blueprint/ Live Demo]
+
[http://demos.ithemes.com/blueprint/ Live Demo]
 +
 
 +
You can either import the Blueprint demo site content and layouts & views into your existing site or follow the manual steps given below this section.
 +
 
 +
'''Demo site Export''':
 +
 
 +
* [http://ithemes.com/builder/child-themes/blueprint/blueprint.wordpress.2011-07-30.xml All Content]
 +
* [http://ithemes.com/builder/child-themes/blueprint/builder-export-blueprint-layouts-views-settings.zip Layouts and Views, Theme Settings]
 +
* [http://ithemes.com/builder/child-themes/blueprint/builder-export-blueprint-layouts-views.zip Layouts and Views only]'''
 +
 
 +
'''Manual Steps''':
  
 
Activate Blueprint child theme at Themes -> Appearance.
 
Activate Blueprint child theme at Themes -> Appearance.
Line 9: Line 19:
 
== Home Layout ==
 
== Home Layout ==
  
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.  
+
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.
  
 
[[Image:Home-layout.png]]
 
[[Image:Home-layout.png]]
Line 111: Line 121:
 
</gallery>
 
</gallery>
  
'''1.''' Edit theme's index.php
+
'''1.''' Edit theme's index.php.
  
 
Replace
 
Replace
Line 136: Line 146:
 
</pre>
 
</pre>
  
'''2.''' Edit theme's functions.php
+
'''2.''' Edit theme's functions.php.
  
 
Add the following before the closing PHP tag:
 
Add the following before the closing PHP tag:
Line 180: Line 190:
 
// add_image_size('front-page-thumbnail', 150, 150, true);
 
// add_image_size('front-page-thumbnail', 150, 150, true);
 
</pre>
 
</pre>
 +
 +
= How to make nav bars go full width =
 +
 +
<gallery widths=200px caption="Before and After">
 +
File:Blueprint-navbars.png
 +
File:Blueprint-fullwidthnavbars.png
 +
</gallery>
 +
 +
'''1.''' Add the following at the end of your theme's style.css above <code>/* second level stuff */</code>
 +
 +
<pre class="brush:css;">
 +
/****************************************************
 +
Alternate: Navigation Module Tan Full width
 +
****************************************************/
 +
 +
.builder-module-navigation-tan-full-outer-wrapper {
 +
background: #babab0 url('images/gradient13.png') bottom repeat-x;
 +
}
 +
 +
/****************************************************
 +
Alternate: Navigation Module Blue Full width
 +
****************************************************/
 +
 +
.builder-module-navigation-blue-full-outer-wrapper {
 +
background: #2C445E url('images/gradient13.png') bottom repeat-x;
 +
}
 +
 +
.builder-module-navigation-blue-full {
 +
background: #2C445E url('images/gradient13.png') bottom repeat-x;
 +
margin-bottom: 0.6em;
 +
opacity: .98;
 +
}
 +
.builder-module-navigation-blue-full li ul {
 +
border: 1px solid #b4b7bd;
 +
border-top: none;
 +
padding: .3em 0em;
 +
}
 +
.builder-module-navigation-blue-full li {
 +
border-right: 1px solid #334d69;
 +
}
 +
.builder-module-navigation-blue-full li a {
 +
color: #6f8baa;
 +
}
 +
.builder-module-navigation-blue-full li a:hover {
 +
background: #445d7c;
 +
color: #bdcfe4;
 +
}
 +
.builder-module-navigation-blue-full li.current_page_item a {
 +
background: #ebebeb;
 +
color: #445e7b;
 +
}
 +
.builder-module-navigation-blue-full li.current_page_item a:hover {
 +
background: #ffffff;
 +
}
 +
</pre>
 +
 +
'''2.''' Edit functions.php in child theme directory.
 +
 +
Replace
 +
 +
<pre class="brush:php;">
 +
builder_register_module_style( 'navigation', 'Blue', 'builder-module-navigation-blue' );
 +
</pre>
 +
 +
with
 +
 +
<pre class="brush:php;">
 +
builder_register_module_style( 'navigation', 'Blue', 'builder-module-navigation-blue' );
 +
builder_register_module_style( 'navigation', 'Tan (full width)', 'builder-module-navigation-tan-full' );
 +
builder_register_module_style( 'navigation', 'Blue (full width)', 'builder-module-navigation-blue-full' );
 +
</pre>
 +
 +
'''3.''' Edit the layout, edit navigation module which you wish to make full width and select either ''Tan (full width)'' or ''Blue (full width)'' from Style dropdown. Save the module and layout.
  
 
= How to have shorter nav bars =
 
= How to have shorter nav bars =
Line 190: Line 273:
  
 
Forum thread: http://ithemes.com/forum/index.php?/topic/11588-nav-bar-styling-with-blueprint-child-theme/
 
Forum thread: http://ithemes.com/forum/index.php?/topic/11588-nav-bar-styling-with-blueprint-child-theme/
 +
 +
= How to remove spacing between modules =
 +
 +
Add the following at the end of your theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.builder-module-outer-wrapper {
 +
    margin-top: 0 !important;
 +
    margin-bottom: 0 !important;
 +
}
 +
</pre>
 +
 +
= How to show tags below posts =
 +
 +
<gallery widths=200px caption="Before and After">
 +
File:Blueprint-add-tags-before.png
 +
File:Blueprint-add-tags-after.png
 +
</gallery>
 +
 +
'''1.''' Download [http://i.min.us/id3Niq.gif this] image, rename it as ''tags-bg.gif'' and upload to your theme's images directory.
 +
 +
'''2.''' Edit theme's index.php.
 +
 +
Add
 +
 +
<pre class="brush:php;">
 +
<?php the_tags( '<div class="tags">' . __( 'Tags ', 'it-l10n-BuilderChild-Blueprint' ), ', ', '</div>' ); ?>
 +
</pre>
 +
 +
below
 +
 +
<pre class="brush:php;">
 +
<div class="alignleft"><span class="categories"><?php printf( __( 'Categories %s', 'it-l10n-BuilderChild-Blueprint' ), get_the_category_list( ', ' ) ); ?></span><br />
 +
</pre>
 +
 +
Edit archive.php similarly.
 +
 +
'''3.''' Edit single.php.
 +
 +
Add
 +
 +
<pre class="brush:php;">
 +
<?php the_tags( '<div class="tags">' . __( 'Tags : ', 'it-l10n-BuilderChild-Blueprint' ), ', ', '</div>' ); ?></div>
 +
</pre>
 +
 +
below
 +
 +
<pre class="brush:php;">
 +
<div class="alignleft"><span class="categories"><?php printf( __( 'Categories : %s', 'it-l10n-BuilderChild-Blueprint' ), get_the_category_list( ', ' ) ); ?></span>
 +
</pre>
 +
 +
'''4.''' Add the following at the end of your theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.meta-bottom .tags {
 +
    background: url("images/tags-bg.gif") no-repeat left center;
 +
    padding-left: 25px;
 +
    font-size: 0.8em;
 +
}
 +
</pre>
 +
 +
= How to fix dropdown menus appearing behind slideshow =
 +
 +
Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.builder-module-navigation-blue {
 +
    opacity: 1;
 +
}
 +
</pre>
 +
 +
Source: http://ithemes.com/forum/index.php?/topic/13530-menu-bar-drop-downs-behind-slideshow-on-blueprint-builder-theme/#p63252
 +
 +
= How to get Flexx style date =
 +
 +
== Blueprint 2.0.0 and above ==
 +
 +
<u>Before</u>: [[File:Blueprintnew-flexx-date-before.png]]
 +
 +
---
 +
 +
<u>After</u>: [[File:Blueprintnew-flexx-date-after.png]]
 +
 +
'''1.''' Download wp-content/themes/Builder/extensions/old-extensions.zip. Extract the contents, upload old-extensions/blog/images/date.png to wp-content/themes/BuilderChild-Blueprint/images
 +
 +
'''2.''' Edit child theme's index.php.
 +
 +
Replace
 +
 +
<pre class="brush:php;">
 +
<!-- title, meta, and date info -->
 +
<div class="entry-header">
 +
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 +
<div class="entry-meta author-meta">
 +
<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
<div class="entry-meta date">
 +
<span class="month"><?php the_time( 'F' ); ?></span>
 +
<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
 +
<span class="year"><?php the_time( 'Y' ); ?></span><br />
 +
</div>
 +
</div>
 +
</pre>
 +
 +
with
 +
 +
<pre class="brush:php;">
 +
<!-- title, meta, and date info -->
 +
<div class="entry-header">
 +
<div class="entry-meta date">
 +
<div class="month"><?php the_time( 'M' ); ?></div>
 +
<div class="day"><?php the_time( 'd' ); ?></div>
 +
</div>
 +
 +
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 +
<div class="entry-meta author-meta">
 +
<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
</div>
 +
</pre>
 +
 +
Make similar change in other child template files like archive.php and single.php, if needed.
 +
 +
'''3.''' Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.blog .post .date {
 +
display: block;
 +
width: 69px; height: 75px;
 +
background: url('images/date.png') no-repeat;
 +
text-align: center;
 +
color: #FFF;
 +
float: left;
 +
margin-right: 0.7em;
 +
}
 +
.blog .hentry .entry-meta.date {
 +
margin-top: 0;
 +
}
 +
.blog .post .date .month {
 +
font-size: 16px;
 +
line-height: 32px;
 +
text-transform: uppercase;
 +
}
 +
.blog .post .date .day {
 +
font-size: 35px;
 +
line-height: 35px;
 +
}
 +
 +
.blog .entry-title {
 +
clear: none;
 +
}
 +
 +
.blog .entry-title a {
 +
padding-left: 0;
 +
}
 +
 +
.blog .entry-title, .archive .entry-title, .single .entry-title {
 +
padding-top: 4px;
 +
}
 +
</pre>
 +
 +
== Blueprint 1.0.3 and below ==
 +
 +
<u>Before</u>: [[File:Blueprint-flexx-date-before.png]]
 +
 +
---
 +
 +
<u>After</u>: [[File:Blueprint-flexx-date-after.png]]
 +
 +
'''1.''' Copy wp-content/themes/Builder/extensions/blog/images/date.png to wp-content/themes/BuilderChild-Blueprint/images
 +
 +
'''2.''' Edit child theme's index.php.
 +
 +
Replace
 +
 +
<pre class="brush:php;">
 +
<!-- title, meta, and date info -->
 +
<div class="title clearfix">
 +
<div class="post-title">
 +
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 +
</div>
 +
 +
<div class="author-meta">
 +
<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
 +
<div class="post-meta">
 +
<span class="month"><?php the_time( 'F' ); ?></span>
 +
<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
 +
<span class="year"><?php the_time( 'Y' ); ?></span><br />
 +
</div>
 +
</div>
 +
</pre>
 +
 +
with
 +
 +
<pre class="brush:php;">
 +
<!-- title, meta, and date info -->
 +
<div class="title clearfix">
 +
 +
<div class="date">
 +
<div class="month"><?php the_time( 'M' ); ?></div>
 +
<div class="day"><?php the_time( 'd' ); ?></div>
 +
</div>
 +
 +
<div class="post-title">
 +
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 +
</div>
 +
 +
<div class="author-meta">
 +
<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
 +
</div>
 +
 +
</div>
 +
</pre>
 +
 +
Make similar change in other child template files like archive.php and single.php.
 +
 +
'''3.''' Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.post .date,
 +
.page .date {
 +
display: block;
 +
width: 69px; height: 75px;
 +
background: url(images/date.png) no-repeat;
 +
text-align: center;
 +
color: #FFF;
 +
float: left;
 +
margin-right: 0.7em;
 +
}
 +
.post .date .month,
 +
.page .date .month {
 +
font-size: 16px;
 +
line-height: 32px;
 +
text-transform: uppercase;
 +
}
 +
.post .date .day,
 +
.page .date .day {
 +
font-size: 35px;
 +
line-height: 35px;
 +
}
 +
 +
.post-title h3 {
 +
clear: none;
 +
}
 +
 +
.post-title a {
 +
padding-left: 0;
 +
}
 +
 +
.blog .post-title, .archive .post-title, .single .post-title {
 +
padding-top: 4px;
 +
}
 +
</pre>
 +
 +
= How to show links to previous and next posts in single post pages =
 +
 +
[[File:2012-08-02 11-24-01.png|692px|thumb|none]]
 +
 +
'''1.''' Edit Blueprint's <code>single.php</code>.
 +
 +
Above
 +
 +
<pre class="brush:php;">
 +
<?php comments_template(); // include comments template ?>
 +
</pre>
 +
 +
add
 +
 +
<pre class="brush:php;">
 +
<!-- Previous/Next page navigation -->
 +
<div class="loop-footer clearfix">
 +
<div class="loop-utility alignleft"><?php previous_post_link( '&larr; <strong>%link</strong>' ); ?></div>
 +
<div class="loop-utility alignright"><?php next_post_link( '<strong>%link</strong> &rarr;' ); ?></div>
 +
</div>
 +
</pre>
 +
 +
 +
'''2.''' Add the following at the end of Blueprint's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.loop-footer .loop-utility {
 +
clear: none;
 +
}
 +
</pre>

Latest revision as of 00:01, August 2, 2012

Contents

How to set up Blueprint to look like demo site

Introduction

Live Demo

You can either import the Blueprint demo site content and layouts & views into your existing site or follow the manual steps given below this section.

Demo site Export:

Manual Steps:

Activate Blueprint child theme at Themes -> Appearance.

Home Layout

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.

Left Sidebar Layout

Duplicate Home layout as "Left Sidebar". Hide Widget Areas of all other layouts but this one.

Edit the layout

  1. Remove both the Widget Bar Modules.
  2. Edit Content Module. Set 1 left sidebar having a width of 320. Set the Style as "Blue Sidebar".

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

Drag your desired widgets in the content module's left sidebar.

Create a Page titled "Left Sidebar", apply "Left Sidebar" layout and publish it. Of course this layout can similarly be applied to any Page or post or any other view by clicking on Configure Views button in Layout Manager (My Theme -> Layouts).

Regarding other layouts and Conclusion

If you have followed this far, you shouldn't face any problems setting up the rest of the layouts shown in the demo site. If you get stuck, feel free to ask in the Builder support forum.

Some Observations:

  • Most Pages (unless set another explicitly) in the demo site are using "Left Sidebar" layout. All the Pages in your site can be set to use this layout by going to Layout Manager, clicking on "Configure Views" button, then "Add View" button and associating "Page" view with "Left Sidebar" layout.
  • All single post pages in demo site are using a layout in which content module has a 320px wide right sidebar with module style left at Default.
  • Ensure that the default layout has a content module.

How to show post excerpts with thumbnails on Posts page

1. Edit theme's index.php.

Replace

				
<!-- "Read More" link -->
<div class="post-content">
	<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Blueprint' ) ); ?>
</div>

with

				
<?php if (has_post_thumbnail()) { ?>
<div class="front-page-thumbnail">
	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'front-page-thumbnail' ); ?></a>
</div>
<?php } ?>
				
<div class="post-content">
	<?php the_excerpt(); ?>
</div>

2. Edit theme's functions.php.

Add the following before the closing PHP tag:

// add_image_size('front-page-thumbnail', 150, 150, true);

function new_excerpt_more($more) {
       global $post;
	return '<div class="readmore"><a href="'. get_permalink($post->ID) . '">Read the Rest...</a></div>';
}
add_filter('excerpt_more', 'new_excerpt_more');

3. Edit theme's style.css.

Add the following at the end of your theme's style.css:

/* For front page thumbnail */

.blog .front-page-thumbnail {
	float: left;
	margin: 1em 1em 1em 0;
}

.blog .post-content {
	clear: none;
}

.blog .post-content p {
	margin-top: 0;
}

.readmore {
	margin-top: 1em;
}

Note: To change the dimensions of thumbnails, uncomment the following line from functions.php and specify your desired width and height:

// add_image_size('front-page-thumbnail', 150, 150, true);

How to make nav bars go full width

1. Add the following at the end of your theme's style.css above /* second level stuff */

/****************************************************
	Alternate: Navigation Module Tan Full width
****************************************************/

.builder-module-navigation-tan-full-outer-wrapper {
	background: #babab0 url('images/gradient13.png') bottom repeat-x;
}

/****************************************************
	Alternate: Navigation Module Blue Full width
****************************************************/

.builder-module-navigation-blue-full-outer-wrapper {
	background: #2C445E url('images/gradient13.png') bottom repeat-x;
}

.builder-module-navigation-blue-full {
	background: #2C445E url('images/gradient13.png') bottom repeat-x;
	margin-bottom: 0.6em;
	opacity: .98;
}
.builder-module-navigation-blue-full li ul {
	border: 1px solid #b4b7bd;
	border-top: none;
	padding: .3em 0em;
}
.builder-module-navigation-blue-full li {
	border-right: 1px solid #334d69;
}
.builder-module-navigation-blue-full li a {
	color: #6f8baa;
}
.builder-module-navigation-blue-full li a:hover {
	background: #445d7c;
	color: #bdcfe4;
}
.builder-module-navigation-blue-full li.current_page_item a {
	background: #ebebeb;
	color: #445e7b;
}
.builder-module-navigation-blue-full li.current_page_item a:hover {
	background: #ffffff;
}

2. Edit functions.php in child theme directory.

Replace

builder_register_module_style( 'navigation', 'Blue', 'builder-module-navigation-blue' );

with

builder_register_module_style( 'navigation', 'Blue', 'builder-module-navigation-blue' );		
builder_register_module_style( 'navigation', 'Tan (full width)', 'builder-module-navigation-tan-full' );
builder_register_module_style( 'navigation', 'Blue (full width)', 'builder-module-navigation-blue-full' );

3. Edit the layout, edit navigation module which you wish to make full width and select either Tan (full width) or Blue (full width) from Style dropdown. Save the module and layout.

How to have shorter nav bars

Blueprint-nav-variation.png

Set the Style of second nav bar (categories) to Blue.

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/

How to remove spacing between modules

Add the following at the end of your theme's style.css:

.builder-module-outer-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

How to show tags below posts

1. Download this image, rename it as tags-bg.gif and upload to your theme's images directory.

2. Edit theme's index.php.

Add

<?php the_tags( '<div class="tags">' . __( 'Tags ', 'it-l10n-BuilderChild-Blueprint' ), ', ', '</div>' ); ?>

below

<div class="alignleft"><span class="categories"><?php printf( __( 'Categories %s', 'it-l10n-BuilderChild-Blueprint' ), get_the_category_list( ', ' ) ); ?></span><br />

Edit archive.php similarly.

3. Edit single.php.

Add

<?php the_tags( '<div class="tags">' . __( 'Tags : ', 'it-l10n-BuilderChild-Blueprint' ), ', ', '</div>' ); ?></div>

below

<div class="alignleft"><span class="categories"><?php printf( __( 'Categories : %s', 'it-l10n-BuilderChild-Blueprint' ), get_the_category_list( ', ' ) ); ?></span>

4. Add the following at the end of your theme's style.css:

.meta-bottom .tags {
    background: url("images/tags-bg.gif") no-repeat left center;
    padding-left: 25px;
    font-size: 0.8em;
}

How to fix dropdown menus appearing behind slideshow

Add the following at the end of child theme's style.css:

.builder-module-navigation-blue {
    opacity: 1;
}

Source: http://ithemes.com/forum/index.php?/topic/13530-menu-bar-drop-downs-behind-slideshow-on-blueprint-builder-theme/#p63252

How to get Flexx style date

Blueprint 2.0.0 and above

Before: Blueprintnew-flexx-date-before.png

---

After: Blueprintnew-flexx-date-after.png

1. Download wp-content/themes/Builder/extensions/old-extensions.zip. Extract the contents, upload old-extensions/blog/images/date.png to wp-content/themes/BuilderChild-Blueprint/images

2. Edit child theme's index.php.

Replace

<!-- title, meta, and date info -->
					<div class="entry-header">
						<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						<div class="entry-meta author-meta">
							<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
						</div>
						<div class="entry-meta date">
							<span class="month"><?php the_time( 'F' ); ?></span>
							<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
							<span class="year"><?php the_time( 'Y' ); ?></span><br />
						</div>
					</div>

with

<!-- title, meta, and date info -->
					<div class="entry-header">
						<div class="entry-meta date">
							<div class="month"><?php the_time( 'M' ); ?></div>
							<div class="day"><?php the_time( 'd' ); ?></div>
						</div>
					
						<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						<div class="entry-meta author-meta">
							<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
						</div>
					</div>

Make similar change in other child template files like archive.php and single.php, if needed.

3. Add the following at the end of child theme's style.css:

.blog .post .date {
	display: block;
	width: 69px; height: 75px;
	background: url('images/date.png') no-repeat;
	text-align: center;
	color: #FFF;
	float: left;
	margin-right: 0.7em;
}
.blog .hentry .entry-meta.date {
	margin-top: 0;
}
.blog .post .date .month {
	font-size: 16px;
	line-height: 32px;
	text-transform: uppercase;
}
.blog .post .date .day {
	font-size: 35px;
	line-height: 35px;
}

.blog .entry-title {
	clear: none;
}

.blog .entry-title a {
	padding-left: 0;
}

.blog .entry-title, .archive .entry-title, .single .entry-title {
	padding-top: 4px;
}

Blueprint 1.0.3 and below

Before: Blueprint-flexx-date-before.png

---

After: Blueprint-flexx-date-after.png

1. Copy wp-content/themes/Builder/extensions/blog/images/date.png to wp-content/themes/BuilderChild-Blueprint/images

2. Edit child theme's index.php.

Replace

<!-- title, meta, and date info -->
				<div class="title clearfix">
					<div class="post-title">
						<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
					</div>
					
					<div class="author-meta">
						<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
					</div>
					
					<div class="post-meta">
						<span class="month"><?php the_time( 'F' ); ?></span>
						<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
						<span class="year"><?php the_time( 'Y' ); ?></span><br />
					</div>
					</div>

with

<!-- title, meta, and date info -->
				<div class="title clearfix">
				
					<div class="date">
						<div class="month"><?php the_time( 'M' ); ?></div>
						<div class="day"><?php the_time( 'd' ); ?></div>
					</div>
				
					<div class="post-title">
						<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
					</div>
					
					<div class="author-meta">
						<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Blueprint' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
					</div>
					
				</div>

Make similar change in other child template files like archive.php and single.php.

3. Add the following at the end of child theme's style.css:

.post .date,
.page .date {
	display: block;
	width: 69px; height: 75px;
	background: url(images/date.png) no-repeat;
	text-align: center;
	color: #FFF;
	float: left;
	margin-right: 0.7em;
}
.post .date .month,
.page .date .month {
	font-size: 16px;
	line-height: 32px;
	text-transform: uppercase;
}
.post .date .day,
.page .date .day {
	font-size: 35px;
	line-height: 35px;
}

.post-title h3 {
	clear: none;
}

.post-title a {
	padding-left: 0;
}

.blog .post-title, .archive .post-title, .single .post-title {
	padding-top: 4px;
}

How to show links to previous and next posts in single post pages

2012-08-02 11-24-01.png

1. Edit Blueprint's single.php.

Above

<?php comments_template(); // include comments template ?>

add

<!-- Previous/Next page navigation -->
			<div class="loop-footer clearfix">
				<div class="loop-utility alignleft"><?php previous_post_link( '← <strong>%link</strong>' ); ?></div>
				<div class="loop-utility alignright"><?php next_post_link( '<strong>%link</strong> →' ); ?></div>
			</div>


2. Add the following at the end of Blueprint's style.css (WP dashboard -> Appearance -> Editor):

.loop-footer .loop-utility {
	clear: none;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox