From iThemes Codex
Jump to: navigation, search

How to set up Foundation to look like the demo site

Demo Site


This method uses the newly available Import / Export feature in Builder. We have re-built the demo site and exported the layouts and views. In the instructions below we provide a link to download and use this exported zip file.

Note: It is not possible to export and import widgets (yet). Therefore, after following the instructions below you have to populate the widget areas with widgets manually.


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 Settings -> Reading. Set Home to appear on front page and "Blog" as Posts page.

Edit "Home" Page and apply "Home" layout under "Custom Layout" meta box.

Go to My Theme -> Layouts & Views -> 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.

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

.builder-container-outer-wrapper {
	margin-top: 0;
	margin-bottom: 0;

.contactbuddy-form ul {
    margin: 0 !important;

.contactbuddy-form ul li {
    margin-left: 0 !important;

/* #text-8 {
    background: url("") no-repeat center bottom #E6F2F2;
	height: 496px;

#text-2 {
    background: url("") no-repeat center bottom #E6F2F2;
	height: 496px;
} */

.builder-module-sidebar .widget img {
    padding: 7px 10px 7px 0;

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;

How to show tags

1. Edit index.php.


<span class="categories"><?php printf( __( 'Categories %s', 'it-l10n-BuilderChild-Foundation' ), get_the_category_list( ', ' ) ); ?></span><br />


<span class="tags"><?php the_tags( '' . __( 'Tags ', 'it-l10n-BuilderChild-Foundation' ), ', ', ' ' ); ?></span>

2. Upload this image to child theme's images directory.

3. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.entry-footer .tags {
	 background: url("images/tags-bg.gif") no-repeat left center;
	 padding-left: 25px;
	 font-size: 0.8em;

4. Repeat the above in other template files depending on where you would like the tags to appear. For Posts page it is index.php, for search results page it is search.php and so on. If a template file is not present in the child theme, copy it from parent Builder directory into the child theme

Item 4