BuilderChild-Book-Nook

(Difference between revisions)
Jump to: navigation, search
(Created and added initial content for BuilderChild-Book-Nook)
 
(Header Module)
Line 30: Line 30:
  
 
[[File:2012-07-12 19-33-59.png|470px|thumb|none]]
 
[[File:2012-07-12 19-33-59.png|470px|thumb|none]]
 +
 +
In the [http://demos.ithemes.com/book-nook/ demo site], an image is placed in a Widget Content widget in Header module's sidebar having the following code:
 +
 +
<pre class="brush: html; gutter: false;">
 +
<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>
 +
</pre>
 +
 +
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 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):
 +
 +
<pre class="brush: css; gutter: false;">
 +
/*********************************************
 +
    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;
 +
}
 +
</pre>
 +
 +
to get
 +
 +
[[File:Purchase-the-book.png|800px|thumb|none]]
  
 
=== Widget Bar 1 ===
 
=== Widget Bar 1 ===

Revision as of 03:39, 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

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