Americana

(Difference between revisions)
Jump to: navigation, search
m
Line 1: Line 1:
How to set up Americana to look like the demo site
+
=How to set up Americana to look like the demo site=
 +
 
 +
==Introduction==
  
 
Activate Americana child theme at Themes -> Appearance.
 
Activate Americana child theme at Themes -> Appearance.
Line 34: Line 36:
 
==Module 4==
 
==Module 4==
  
This should be a widget bar module with 3 widgets.
+
This should be a Widget Bar module with 3 widgets.
  
 
Widget widths: 33% / 33% / 33%
 
Widget widths: 33% / 33% / 33%
Line 51: Line 53:
  
 
This should be a Content module with 1 right sidebar whose width is 290px.
 
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:
 +
 +
<pre class="brush:html;"><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&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe></p></pre>
 +
 +
The content of the bottom widget on the front page of demo site is:
 +
 +
<pre class="brush:html;"><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></pre>
  
 
'''How to show thumbnail images'''
 
'''How to show thumbnail images'''
Line 60: Line 79:
 
==Module 6==
 
==Module 6==
  
This should be a widget bar module with 2 widgets.
+
This should be a Widget Bar module with 2 widgets.
  
 
Widget Widths: 30% / 70%
 
Widget Widths: 30% / 70%
Line 79: Line 98:
  
 
This is a 'Recent Posts" widget.
 
This is a 'Recent Posts" widget.
 +
 +
==Module 7==
 +
 +
This should be the Footer module.
 +
 +
==Conclusion==
 +
 +
This concludes the 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.

Revision as of 05:19, December 13, 2010

Contents

How to set up Americana to look like the demo site

Introduction

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.

Module 1

Edit this layout. 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 typed 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/content (on front page/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.

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 the 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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox