BuilderChild-Book-Nook

(Difference between revisions)
Jump to: navigation, search
(Header Module)
(How to set up homepage to look like demo site)
Line 10: Line 10:
  
 
== How to set up homepage to look like demo site ==
 
== How to set up homepage to look like demo site ==
 +
 +
Update on Thursday, May 16, 2013: [http://demos.ithemes.com/book-nook/ Book Nook demo site] PSDs can be downloaded from [http://cl.ly/Oz6k here].
  
 
'''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.
 
'''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

Revision as of 19:03, May 15, 2013

Contents

Introduction

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

Book-Nook-2012-06-23-12-16-59.jpg

Live Demo

Blog entry announcing the release of Book Nook

How to set up homepage to look like demo site

Update on Thursday, May 16, 2013: Book Nook demo site PSDs can be downloaded from here.

1. Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

2. Go to Appearance -> Menus. Create a menu named say Main having your desired items (Pages, Categories, custom links etc).

3. Create a layout named say, Home. Width = 960px.

Add modules in this order:

2012-07-12 19-25-05.png

Navigation Module

Select the menu created earlier in Navigation Type dropdown.

2012-07-12 19-32-41.png

Header Module

2012-07-12 19-33-59.png

In the demo site, an image is placed in a Widget Content widget in Header module's sidebar having the following code:

<a href="http://www.amazon.com/The-Entrepreneurial-Adventure-For-ebook/dp/B006UH274O"><img class="alignnone size-full wp-image-61" title="purchase-small-ad" src="http://demos.ithemes.com/book-nook/files/2012/06/purchase-small-ad.png" alt="" height="58" width="411"></a>

Instead of the image, if you would like to use HTML code so you can alter the price and change the "Purchase the Book" phrase, place the following in a text widget in the Header module's widget area:

http://pastebin.com/EVyVZFiu

Change URL and any text in the above to your liking.

Then add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

/*********************************************
    Purchase Button
*********************************************/

.purchase-button a {
    display: block;
	border: 1px solid #000000;
	border-radius: 3px;
	background-color: #b35332;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 83, 50)), to(rgb(123, 43, 16)));
	background-image: -webkit-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -moz-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -o-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -ms-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
    padding: 0.5em 1.3em;
    text-decoration: none;

	-webkit-transition:  all .2s linear;
	-moz-transition:  all .2s linear 0s;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.purchase-button a:hover {

}

.purchase-message {
    color: #FFFFFF;
    font-size: 1.4em;
    text-shadow: 1px 1px 3px #333;
}

.purchase-price {
    color: #35160c;
    font-size: 1.1em;
    padding-left: 0.5em;
}

to get

Purchase-the-book.png

Widget Bar 1

2012-07-12 19-35-32.png

Widget Bar 2

2012-07-12 19-39-29.png

Widget Bar 3

2012-07-12 19-40-43.png

Footer Module

2012-07-12 19-41-54.png

4. Create a Page named say, Home and select Home layout for this in the Custom Layout meta box. This page can be left blank.

2012-07-12 19-46-47.png

5. Go to Settings -> Reading. Set Home as the Front page.

2012-07-12 19-48-19.png

6. Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on Manage Widgets for this Layout. Add your desired widgets in the sidebars.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox