From IThemes Codex
Revision as of 08:56, September 22, 2011 by Ronald (Talk | contribs)
Jump to: navigation, search

Demo Site

Note: this article refers to the Builder Child theme Architect, which is based on the Classic Architect theme but not an exact duplicate.


How to create the homepage from Classic Architect

As can be seen on the 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.

This requires the following modifications/additions

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 black and orange image, and copy these to your /images/ folder in the BuilderChild-Architect folder.

A rotating images group

The next step is to setup a Rotating Images group. The Rotating Images plugin comes free with your purchase of Builder.

Upload the images you want to see in the area to the right, and make note of the following. The height of the RI group should be a fixed value of 254px. The width of the RI group depends on the width you have selected for your Builder layout.

Example, your Builder layout is 960px. We need to reserve space for padding, margins, and the left tabs (304px), so in this case, the RI group should be set to 656px wide.

Make a note of the shortcode for the Rotating Images group, e.g. [it-rotate group="0"].

An HTML module

For your homepage, and to mimic the Architect Classic home page layout, create a new Builder layout, and add a header module, navigation module, html module, widget module and footer module. (The HTML module will contain the code for the 3 tabs and the Rotating images, so other modules are optional).

Add the following code to the HTML module:

<div id="ar_homepage">
    <div id="ar_homepageleft">
        <ul id="ar_menu">
            <li><a href="">
            <span>Feature #1</span>Looking to get your real estate site online?  Let us help you get started!

            <li><a href="">
            <span>Feature #2</span>Search through our collection of premium real estate themes.

            <li><a href="http://www.ithemes/com/">
            <span>Feature #3</span>Do you have questions about our products or services?  Ask here.

    <div id="ar_homepageright">
        [it-rotate group="0"] 


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.

On line 20, add the Rotating Images group shortcode (here, group "0")

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 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:

#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;

That should do the trick, for additional support, please post in the Builder support forum.

Personal tools
iThemes Codex
Codex Navigation