BuilderChild-Book-Nook - Revision history

Sridhar: /* How to set up homepage to look like demo site */

2013-05-16T03:38:34Z

How to set up homepage to look like demo site

Sridhar: /* How to set up homepage to look like demo site */

2013-05-16T01:03:56Z

How to set up homepage to look like demo site

Sridhar: /* Header Module */

2013-05-15T09:39:45Z

Header Module

Sridhar: Created and added initial content for BuilderChild-Book-Nook

2012-07-12T14:31:07Z

Created and added initial content for BuilderChild-Book-Nook

New page

== Introduction ==

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

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ 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 <code>Main</code> having your desired items (Pages, Categories, custom links etc).

'''3.''' Create a layout named say, <code>Home</code>. Width = 960px.

Add modules in this order:

[[File:2012-07-12 19-25-05.png|460px|thumb|none]]

=== Navigation Module ===

Select the menu created earlier in Navigation Type dropdown.

[[File:2012-07-12 19-32-41.png|576px|thumb|none]]

=== Header Module ===

[[File:2012-07-12 19-33-59.png|470px|thumb|none]]

=== Widget Bar 1 ===

[[File:2012-07-12 19-35-32.png|467px|thumb|none]]

=== Widget Bar 2 ===

[[File:2012-07-12 19-39-29.png|470px|thumb|none]]

=== Widget Bar 3 ===

[[File:2012-07-12 19-40-43.png|470px|thumb|none]]

=== Footer Module ===

[[File:2012-07-12 19-41-54.png|466px|thumb|none]]

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

[[File:2012-07-12 19-46-47.png|298px|thumb|none]]

'''5.''' Go to Settings -> Reading. Set <code>Home</code> as the Front page.

[[File:2012-07-12 19-48-19.png|489px|thumb|none]]

'''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 <code>Manage Widgets for this Layout</code>. Add your desired widgets in the sidebars.

@@ Line 11: / Line 11: @@
 == 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].
+Update on Thursday, May 16, 2013: [http://demos.ithemes.com/book-nook/ Book Nook demo site] PSDs can be downloaded from the link in [http://ithemes.com/forum/topic/30883-book-nook-buttons-and-ads/#entry194318 this] forum post.
 '''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

← Older revision		Revision as of 01:03, May 16, 2013
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.

← Older revision		Revision as of 09:39, May 15, 2013
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 ===