BuilderChild-Architect - Revision history

Ronald: /* Left menu background images */

2011-09-22T14:03:07Z

Left menu background images

Ronald: /* CSS code to style the module */

2011-09-22T13:56:20Z

CSS code to style the module

Ronald at 13:53, September 22, 2011

2011-09-22T13:53:47Z

Ronald: /* An HTML module */

2011-09-22T13:51:03Z

An HTML module

Ronald at 13:48, September 22, 2011

2011-09-22T13:48:40Z

Ronald at 13:42, September 22, 2011

2011-09-22T13:42:37Z

Ronald at 13:10, September 22, 2011

2011-09-22T13:10:04Z

Ronald at 13:07, September 22, 2011

2011-09-22T13:07:25Z

Ronald: Created page with '[http://demos.ithemes.com/architect-builder/ Demo Site] Note: this article refers to the Builder Child theme Architect, which is based on the [[Architect|Classic Architect the...'

2011-09-22T13:06:36Z

Created page with '[http://demos.ithemes.com/architect-builder/ Demo Site] Note: this article refers to the *Builder Child theme Architect*, which is based on the [[Architect|Classic Architect the...'

New page

[http://demos.ithemes.com/architect-builder/ Demo Site]

Note: this article refers to the *Builder Child theme Architect*, which is based on the [[Architect|Classic Architect theme]].

=How to create the homepage from Classic Architect=
As can be seen on the [[http://demos.ithemes.com/architect/|Classic Architect demo page]], the home page contains a 3 tabs vertical menu, and Rotating images next to it. This article will outline how you can achieve the same using the Builder child theme.

= Item 2 =

= Item 3 =

= Item 4 =

@@ Line 9: / Line 9: @@
 ==Left menu background images==
 The left 3 tabs navigation requires 2 background images. If they do not exist in the BuilderChild-Architect/images folder, download the [http://ithemes.com/downloads/hp-black.png black] and [http://ithemes.com/downloads/hp-orange.png orange image], and copy these to your /images/ folder in the BuilderChild-Architect folder.
 ==A rotating images group==

← Older revision		Revision as of 13:56, September 22, 2011
Line 119:		Line 119:


−	That should do the trick, for additional support, please post in the Builder support forum.	+	That should do the trick, for additional support, please post in the [http://ithemes.com/forum/builder/ Builder support forum].

← Older revision		Revision as of 13:53, September 22, 2011
Line 57:		Line 57:
	The html module should contain no sidebars, PHP does not have to be enabled, and the wrappers should not be removed.		The html module should contain no sidebars, PHP does not have to be enabled, and the wrappers should not be removed.

−	==CSS code to style the ~~section~~==	+	==CSS code to style the module==
		+	Finally, add the following CSS code at the end of your child themes stylesheet style.css to style both the left tabs and the Rotating Images:
		+
		+	<pre class="brush:css;">
		+	#ar_homepage {
		+	background-color: #fff;
		+	line-height: 15px;
		+	margin: 0 auto;
		+	padding: 0;
		+	}
		+
		+	#ar_homepageleft {
		+	background-color: #fff;
		+	float: left;
		+	line-height: 15px;
		+	padding-top: 15px;
		+	}
		+
		+	#ar_homepageleft ul {
		+	list-style: none outside none;
		+	margin: 0; padding: 0;
		+	}
		+
		+	#ar_homepageleft ul li {
		+	display: inline;
		+	}
		+
		+	#ar_homepageleft ul li a {
		+	background: url("images/hp-black.png") repeat scroll 0% 0% #FFFFFF;
		+	color: #fff;
		+	display: block;
		+	font-family: Verdana,Arial,Tahoma;
		+	font-size: 11px;
		+	font-weight: normal;
		+	height: 70px;
		+	padding: 15px 0 0 40px;
		+	text-decoration: none;
		+	width: 222px;
		+	}
		+
		+	#ar_homepageleft ul li a:hover {
		+	background: url("images/hp-orange.png") repeat scroll 0% 0% #FFFFFF;
		+	}
		+
		+	#ar_menu span {
		+	color: #c7d3df;
		+	display: block;
		+	font-family: "Trebuchet MS", "Times New Roman", Georgia;
		+	font-size: 22px;
		+	font-weight: normal;
		+	padding-bottom: 5px;
		+	}
		+
		+	#ar_homepageright {
		+	background-color: #fff;
		+	float: left;
		+	height: 254px;
		+	padding-top: 15px;
		+	}
		+	</pre>
		+
		+
		+	That should do the trick, for additional support, please post in the Builder support forum.

@@ Line 51: / Line 51: @@
 </pre>
-The module should contain no sidebars, PHP does not have to be enabled, and the wrappers should not be removed.
+Edit the highlighted lines 5, 9 and 13 to add the target links for the three tabs on the left. Additionally, add the heading (in the span tags) and other blurbs.
 ==CSS code to style the section==

@@ Line 11: / Line 11: @@
 http://ithemes.com/downloads/hp-black.png
-==a rotating images group==
+==A rotating images group==
 The next step is to setup a [[Rotating_Images|Rotating Images]] group. The [http://pluginbuddy.com/purchase/rotating-images/ Rotating Images plugin] comes free with your purchase of Builder.
@@ Line 20: / Line 20: @@
 Make a note of the shortcode for the Rotating Images group, e.g. <code>[it-rotate group="0"]</code>.
-==an HTML module==
+==An HTML module==
 ==CSS code to style the section==

@@ Line 1: / Line 1: @@
 [http://demos.ithemes.com/architect-builder/ Demo Site]
-Note: this article refers to the *Builder Child theme Architect*, which is based on the [[Architect|Classic Architect theme]].
+Note: this article refers to the '''Builder Child theme Architect''', which is based on the [[Architect|Classic Architect theme]] but not an exact duplicate.
 =How to create the homepage from Classic Architect=
 As can be seen on the [http://demos.ithemes.com/architect/ Classic Architect demo page], the home page contains a 3 tabs vertical menu, and Rotating images next to it. This article will outline how you can achieve the same using the Builder child theme.
-= Item 2 =
+This requires the following modifications/additions
+==Left menu background images==
-= Item 3 =
+==a rotating images group==
+==an HTML module==
-= Item 4 =
+==CSS code to style the section==