Americana

From IThemes Codex
Revision as of 00:35, June 30, 2011 by Sridhar (Talk | contribs)
Jump to: navigation, search

Contents

How to set up Americana to look like the demo site

Introduction

Live Demo

Activate Americana child theme at Themes -> Appearance.

Go to My Theme -> Layouts. Duplicate "960 Home" as say, "Americana 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. Edit this layout..

Module 1

Add a HTML module having the following code:

<a href="<?php bloginfo('url'); ?>"><h1><?php bloginfo('name'); ?></h1></a>

Select "Blue background" in Style dropdown and enable PHP. Save the module and save the layout.

Refresh your site's front page. You should be now seeing your site's title which links to the site's address at the top in blue background. Site Name and Site Address (URL) values can be changed at Settings -> General.

Module 2

The module below the HTML module is a Navigation module. If you would like to display links to Pages in your site as menu items in the nav bar, this module should be set as "Builder Settings Pages" type. The list of Pages that should appear as menu items in this setting can be controlled by going to My Theme -> Settings.

If you would like to display a special character like ★ to the left of menu item as in the demo site, go to Appearance -> Menus. Create a custom menu there with your desired links. The special character can be pasted in the Label field when adding a custom link. 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

This should be a Navigation module that is either a "Builder Settings Categories" type or "Custom Menu - <name of your menu>". Style dropdown should be set to "Subnav Blue".

Note: If you have set this to show categories, the category names that should appear as menu items can be controlled at My Theme -> Settings under "Menu Builder" section. Only those categories that contain at least 1 published post will appear in the nav bar.

Module 4

This should be a Widget Bar module with 3 widgets.

Widget widths: 33% / 33% / 33%

Style: Blue (full width)

Go to Appearance -> Widgets. Populate the top 3 widget areas with text widgets having code similar to the following (You should change the URLs of the images and their corresponding hyperlinks):

<a href="http://demos.ithemesbuilder.com/americana/vote/"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/vote.png"></a>
<a href="http://demos.ithemesbuilder.com/americana/donate/"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/donate.png"></a>
<a href="http://demos.ithemesbuilder.com/americana/volunteer/"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/volunteer.png"></a>

Module 5

This should be a Content module with 1 right sidebar whose width is 290px.

To add widgets into the right sidebar, go to Appearance -> Widgets. Expand the corresponding widget area and drag and drop widgets into it.

The content of the top widget on the front page of demo site is:

<p><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/okguy2.png"></p>
<h4>If you don't stand for something, you'll fall for anything.</h4>
<p>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.<br>
<a href="http://demos.ithemesbuilder.com/americana/about/">Read Thomas's whole story here.</a></p>
<p><iframe width="262" height="152" frameborder="0" src="https://player.vimeo.com/video/14089005?title=0&byline=0&portrait=0&color=ffffff"></iframe></p>

The content of the bottom widget on the front page of demo site is:

<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/50fb.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/50tw.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/vimeo.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/flickr.png"></a>

How to show thumbnail images

In the demo site, the dimension of each image appearing to the left of post excerpt (on front page)/content (when viewed in full) is 250px by 250px.

In the post editor screen, type the content of the post first. Then place the cursor before the first character. Scroll down to "Featured Image" box at the right side and click on "Set featured image" link. Select and upload your desired image for this post. Set Alignment to Left. Click "Use as featured image" link. click "Insert into Post" button. Publish the post.

Module 6

This should be a Widget Bar module with 2 widgets. On the page, this module's content will be displayed directly above the footer.

Widget Widths: 30% / 70%

Style: Blue (full width)

Left widget content

<img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/name.png"><br/>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/fdark.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/vdark.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/fldark.png"></a>
<a href="#"><img src="http://demos.ithemesbuilder.com/americana/wp-content/uploads/2010/11/ydark.png"></a>

You might want to of course change the URL of image in the above and other hyperlinks.

Right widget

This is a 'Recent Posts" widget.

Module 7

This should be the Footer module.

Conclusion

This concludes setting up of layout for front page.

Next step would be to duplicate this layout and call it something like "Americana Content". You might want to use Duplicate Sidebar Widget to duplicate the widgets of front page onto those of this layout. Set this as your default layout and add/edit any widgets to your liking.

Click on Configure Views in layout manager. Add a view to associate "Home" view with the layout that has been created for the site's front page.

Americana Libertas PSD files

Header image PSD can be downloaded from here.

PSD of name.png, the image which appears in the left side of footer: http://www.mediafire.com/file/7tjrri5a1osdlj7/name.psd. Thanks to Frank.

Name-graphic-americana.png

How to customize the VOTE, DONATE and VOLUNTEER images

Americana has been updated to include the PSD file needed to edit the VOTE, DONATE and VOLUNTEER graphics. This PSD file can also be downloaded from http://d.pr/XOQt.

  1. Download League Gothic font from here to your computer. Extract the zip file, right click on "League_Gothic.otf" and select Install.
  2. Open the PSD file in a program like Adobe Photoshop or the free GIMP.
  3. Select the vote layer. Switch to text tool, click on VOTE text and replace it with your desired text. You can similarly change the text "for this awesome person".
  4. Save the optimized image for web in your desired file format (the images in the demo are in .png format)
  5. Repeat the above steps to create the other two images.

Examples of adding custom module style

  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

How to set blue background for Image Module

The steps below outline how custom module style can be used to set blue background for a image module.

1. Edit Americana's functions.php.

Find

		builder_register_module_style( 'html', 'Blue Background', 'html-blue' );

Paste the following below that:

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

Save and close the file.

2. Edit Americana's style.css.

Locate

/*********************************************
	Content Module
*********************************************/

Add the following above that:

/*********************************************
	Alternate: Image Module Blue Background
*********************************************/
.image-blue-outer-wrapper {
	background: #1E3240;
}

Save and close the file.

3. Edit layout(s), edit image module and select Blue Background style.

How to stop the navigation module from stretching full width

By default, background of navigation module in Americana (any color variant) stretches full width from left edge to the right edge of browser. If you would like to restrict it to the container width, edit theme's style.css.

Comment out or delete the ".builder-module-navigation-outer-wrapper" selector block.

Ex.:

Change

.builder-module-navigation-outer-wrapper {
	background: #D1598C url('images/pinknav.png') bottom left repeat-x; 
	border-top: 2px groove #EBEBEB;
	border-bottom: 2px groove #EBEBEB;
}

to

/*.builder-module-navigation-outer-wrapper {
	background: #D1598C url('images/pinknav.png') bottom left repeat-x; 
	border-top: 2px groove #EBEBEB;
	border-bottom: 2px groove #EBEBEB;
} */

Add the background, top and bottom border property lines from the above to ".builder-module-navigation" selector block.

Ex.:

Change

.builder-module-navigation {
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: .8em;
	line-height: 2em;
	display: block;
	margin-bottom: 1.8em;
}

to

.builder-module-navigation {
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: .8em;
	line-height: 2em;
	display: block;
	margin-bottom: 1.8em;
	background: #D1598C url('images/pinknav.png') bottom left repeat-x;
	border-top: 2px groove #EBEBEB;
	border-bottom: 2px groove #EBEBEB;
}

Change

/*********************************************
	Alternate: Subnav Blue
*********************************************/
.subnav-blue {
	line-height: 1.4em;
	font-size: .5em;
}
.subnav-blue-outer-wrapper {
	background: #0F1920 url('images/subnav-blue-bg.png') bottom left repeat-x;
	border: 0;
}

to

/*********************************************
	Alternate: Subnav Blue
*********************************************/
.subnav-blue {
	line-height: 1.4em;
	font-size: .5em;
	background: #0F1920 url('images/subnav-blue-bg.png') bottom left repeat-x;
	border: 0;
}
/* .subnav-blue-outer-wrapper {
	background: #0F1920 url('images/subnav-blue-bg.png') bottom left repeat-x;
	border: 0;
} */

How to show full post content instead of just the excerpt in Posts page?

Edit theme's index.php.

Replace

<?php the_excerpt(); ?>

with

<?php the_content(); ?>

How to show excerpts instead of full posts in Archives and Category pages?

Edit theme's archive.php.

Replace

<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Americana-Interstate' ) ); ?>

with

<?php the_excerpt(); ?>

How to place a clickable logo as header in Americana Interstate

Americana-clickable-logo-header.png

1. Edit your theme's layout and add a HTML module with the following content in it:

<a href="<?php bloginfo('url'); ?>"><img src="http://files.droplr.com/files/12530702/4Y1s.logo.png" width="297" height="35" alt="" /></a>

Enable PHP.

Set Style to Dark.

In the above code, change the image source to that of your logo.

Americana-clickable-logo-header-modulesettings.png

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

.builder-module-1 {
    height: 75px;
}

.builder-module-1 img {
    padding-top: 22px;
}

In the above, change 1 in ".builder-module-1" to the number of module from top in your layout. Height of the module and top padding of the logo image can also be changed to your liking.

How to center nav bar menu items horizontally and vertically

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

.builder-module-navigation li a, .builder-module-navigation li.current_page_item li a, .builder-module-navigation li.current-cat li a {
    padding: 1em 1em 0.5em 1em;
}

How to increase the size of post thumbnails on front page

Edit theme's index.php.

Change

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail' ); ?></a>

to

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'homepage-thumb' ); ?></a>

Add the following before the closing PHP tag in functions.php:

add_image_size( 'homepage-thumb', 250, 250, true );

In the above, change width and height to your desired values.

Refresh your site's front page. If the set dimensions of the thumbnail won't take effect, install AJAX thumbnail rebuild plugin and regenerate homepage-thumb thumbnails.

Source: http://codex.wordpress.org/Function_Reference/add_image_size

How to replace date graphic with simple text

Edit theme's index.php.

Replace

<div class="title clearfix">
					
					<div class="post-meta">
						<span class="month"><?php the_time( 'M' ); ?></span><br />
						<span class="day"><?php the_time( 'j' ); ?></span>
					</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-Americana-Interstate' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
					</div>
				
				</div>

with

<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="date">
						<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
						<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>
					</div>
					
					<div class="author-meta">
						<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Americana-Interstate' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
					</div>
				
				</div>

If you would like to do the same in category and archive pages, edit archive.php similarly.

How to replace comments graphic with simple text and add categories

1. Edit theme's index.php.

Replace

<!-- categories, tags and comments -->
				<div class="meta-bottom clearfix">
					<div class="alignleft">
					<?php do_action( 'builder_comments_popup_link', '<span class="comments">', '</span>', __( '%s', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '0', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '1', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '%', 'it-l10n-BuilderChild-Americana-Interstate' ) ); ?>
					</div>
				</div>

with

<!-- categories, tags and comments -->
				<div class="meta-bottom clearfix">
					<div class="alignleft"><span class="categories"><?php printf( __( 'Categories %s', 'it-l10n-BuilderChild-Americana-Interstate' ), get_the_category_list( ', ' ) ); ?></span><br />
					<?php do_action( 'builder_comments_popup_link', '<span class="comments">', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '(0)', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '(1)', 'it-l10n-BuilderChild-Americana-Interstate' ), __( '(%)', 'it-l10n-BuilderChild-Americana-Interstate' ) ); ?>
					</div>
				</div>

2. Download this image and upload it to theme's images directory.

3. Edit theme's style.css.

Change

.meta-bottom {
	margin-top: 1.5em;
	padding-top: 1.4em;
}

to

.meta-bottom {
	/* margin-top: 1.5em; */
	padding-top: 1.4em;

and replace

.meta-bottom .comments {
	font-size: 1.5em;
	height: 68px;
	width: 46px;
	background: url('images/comment-bg.png') top left no-repeat;
	position: absolute;
	margin-left: -61px;
	margin-top: -84px;
	padding: 11px 0 0 14px;
}
.builder-module-content .builder-module-element-outer-wrapper.left .meta-bottom .comments {
	font-size: 1.5em;
	height: 68px;
	width: 46px;
	background: url('images/comment-bg.png') top left no-repeat;
	position: absolute;
	margin-left: -61px;
	margin-top: -84px;
	padding: 11px 0 0 14px;
}
.builder-module-content .builder-module-element-outer-wrapper.right .meta-bottom .comments,
.builder-module-content .builder-module-element-outer-wrapper.middle .meta-bottom .comments {
	display: none;
}

with

.meta-bottom .comments, .builder-module-content .builder-module-element-outer-wrapper.left .meta-bottom .comments {
	font-size: 0.8em;
	padding-left: 25px;
	background: url('images/comments-bg.png') center left no-repeat;
}

If you would like to do the same in category and archive pages, edit archive.php similarly.

How to use Flexx style date image and categories

Before: Americana-flexxdate-categories-before.png

---

After: Americana-flexxdate-categories-after2.png

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

2. Edit child theme's index.php.

Replace

<div class="post-meta">
						<span class="month"><?php the_time( 'M' ); ?></span><br />
						<span class="day"><?php the_time( 'j' ); ?></span>
					</div>

with

<div class="date">
						<div class="month"><?php the_time( 'M' ); ?></div>
						<div class="day"><?php the_time( 'd' ); ?></div>
					</div>

and replace

<?php do_action( 'builder_comments_popup_link', '<span class="comments">', '</span>', __( '%s', 'it-l10n-BuilderChild-Americana' ), __( '0', 'it-l10n-BuilderChild-Americana' ), __( '1', 'it-l10n-BuilderChild-Americana' ), __( '%', 'it-l10n-BuilderChild-Americana' ) ); ?>

with

<?php do_action( 'builder_comments_popup_link', '<span class="comments">', '</span>', __( '%s', 'it-l10n-BuilderChild-Americana' ), __( '0', 'it-l10n-BuilderChild-Americana' ), __( '1', 'it-l10n-BuilderChild-Americana' ), __( '%', 'it-l10n-BuilderChild-Americana' ) ); ?>
					<span class="categories"><?php printf( __( 'Categories : %s', 'it-l10n-BuilderChild-Americana' ), get_the_category_list( ', ' ) ); ?></span>

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.8em;
}
.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;
}

.meta-bottom {
	margin-top: 0;
}

.builder-module-content .builder-module-element-outer-wrapper.left .meta-bottom .comments {
    margin-top: -66px;
}

How to remove stars from widget titles

Comment out or delete the following from style.css:

.builder-module-sidebar h4.widget-title:before {
    content: url('images/star.png');
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox