From IThemes Codex
Revision as of 12:47, February 25, 2011 by Sridhar (Talk | contribs)
Jump to: navigation, search

How to set up Foundation to look like the demo site

Demo Site

1. Create Pages that you would like to appear in your site. Ensure that a page titled "Home" and another titled "Blog" exists. They should be empty.

2. Go to Appearance -> Menus. Create a custom menu which should contain the items that you would like to appear on the navigation bar. To avoid a small extra work going forward, you might want to name it as "Main Menu".

3. Ensure that Builder is present in wp-content/themes. Upload and activate BuilderChild-Foundation theme.

4. Download this file

Go to My Theme -> Settings.

  1. Click on Import / Export tab at the top.
  2. Scroll down to Import Data section. Browse to and select which you have downloaded.
  3. In the next screen, select the option to import Layouts and Views in the zip file indicating whether you want to add all the layouts or do this selectively or replace the existing ones. For the purpose of this tutorial, it is assumed that there are no changes done to the default Builder layouts and views. Therefore, pick Replace and go to next step.
  4. If a custom menu titled "Main Menu" does not exist, select the source of navigation module for all the layouts. Go to next step.
  5. Click Run Import.

5. Go to My Theme -> Layouts. Click Configure Views. If a entry associating Blog view with Blog layout does not exist, add one.

6. Go back to Layout manager and note the fact that widget areas of all layouts except that of Default layout are hidden. Therefore, when you go to Appearance -> Widgets, no widget areas will appear in the right side since we have set it so only widget areas of Default layout are shown there and there are no sidebars (widget areas) in the Default layout.

To populate the widget areas of your desired layout(s), first have them appear at Appearance -> Widgets by clicking Show widget areas for the layout(s). Then visit Appearance -> Widgets and add your desired widgets.

How to remove bullets above tabs in Tabber Widget widgets

Add the following at the end of your theme's style.css:

ul.tabber-widget-tabs {
    list-style: none;
Personal tools
iThemes Codex
Codex Navigation