BuilderChild-Foundation

(Difference between revisions)
Jump to: navigation, search
m (How to set up Foundation to look like the demo site)
(9 intermediate revisions by one user not shown)
Line 1: Line 1:
 
= How to set up Foundation to look like the demo site =
 
= How to set up Foundation to look like the demo site =
  
[http://demos.ithemesbuilder.com/foundation/ Demo Site]
+
[http://demos.ithemes.com/foundation/ Demo Site]
 +
 
 +
'''Introduction'''
 +
 
 +
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.
 +
 
 +
'''Steps'''
  
 
'''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.
 
'''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.
Line 9: Line 17:
 
'''3.''' Ensure that Builder is present in wp-content/themes. Upload and activate BuilderChild-Foundation theme.
 
'''3.''' Ensure that Builder is present in wp-content/themes. Upload and activate BuilderChild-Foundation theme.
  
'''4.''' Download [http://d.pr/Tyab this] file
+
'''4.''' Download [http://d.pr/Tyab this] file.
  
 
Go to My Theme -> Settings.  
 
Go to My Theme -> Settings.  
Line 19: Line 27:
 
# Click Run Import.
 
# 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.
+
'''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.
 
'''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.
 
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:
 +
 +
<pre class="brush: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("http://demos.ithemesbuilder.com/foundation/wp-content/uploads/2010/09/local-trans24.png") no-repeat center bottom #E6F2F2;
 +
height: 496px;
 +
}
 +
 +
#text-2 {
 +
    background: url("http://demos.ithemesbuilder.com/foundation/wp-content/uploads/2010/09/globe24.png") no-repeat center bottom #E6F2F2;
 +
height: 496px;
 +
} */
 +
 +
.builder-module-sidebar .widget img {
 +
    padding: 7px 10px 7px 0;
 +
}
 +
</pre>
  
 
= How to remove bullets above tabs in Tabber Widget widgets =
 
= How to remove bullets above tabs in Tabber Widget widgets =
Line 39: Line 82:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
= How to show tags =
 +
 +
Follow http://ithemes.com/forum/index.php?/topic/9926-show-tags-in-foundation-themes/
 +
 +
= Item 4 =

Revision as of 00:04, May 14, 2012

Contents

How to set up Foundation to look like the demo site

Demo Site

Introduction

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.

Steps

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 builder-export-foundation-church-demo.zip 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("http://demos.ithemesbuilder.com/foundation/wp-content/uploads/2010/09/local-trans24.png") no-repeat center bottom #E6F2F2;
	height: 496px;
}

#text-2 {
    background: url("http://demos.ithemesbuilder.com/foundation/wp-content/uploads/2010/09/globe24.png") 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

Follow http://ithemes.com/forum/index.php?/topic/9926-show-tags-in-foundation-themes/

Item 4

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox