BuilderChild-Expansion

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added == How to have a slideshow at left and static text at right using a HTML module ==)
(How to set up top 3 modules like that in the demo site)
 
(4 intermediate revisions by one user not shown)
Line 16: Line 16:
  
 
One of our users wrote step by step instructions on how to set up Expansion like the demo site using these export files. Click [http://ithemes.com/forum/topic/25777-how-to-setup-home-page-similar-to-child-theme-demo/page__view__findpost__p__121887 here] to read her post.
 
One of our users wrote step by step instructions on how to set up Expansion like the demo site using these export files. Click [http://ithemes.com/forum/topic/25777-how-to-setup-home-page-similar-to-child-theme-demo/page__view__findpost__p__121887 here] to read her post.
 +
 +
=== How to set up top 3 modules like that in the demo site ===
 +
 +
If you would like to set up a copy of upper 3 modules in your Builder site in which Expansion is the active theme, similar to [http://demos.ithemes.com/expansion/ Expansion demo site], do the following:
 +
 +
'''1.''' Create a layout called <code>Home</code>.
 +
 +
'''2.''' Add the top most module. A HTML module having the following code:
 +
 +
<pre class="brush:php;">
 +
<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" width="311" height="55" alt="Home" /></a></div>
 +
 +
<div class="social-icons">
 +
<a href="http://www.youtube.com/user/iThemescom"><img src="http://demos.ithemes.com/expansion/files/2011/11/youtube.png" style="padding-right: 10px;"></a>
 +
 +
<a href="http://www.facebook.com/ithemes"><img src="http://demos.ithemes.com/expansion/files/2011/11/facebook.png" style="padding-right: 10px;"></a>
 +
 +
<a href="https://twitter.com/#!/ithemes"><img src="http://demos.ithemes.com/expansion/files/2011/11/twitter.png"></a>
 +
</div>
 +
</pre>
 +
 +
Set <code>Enable PHP</code> to <code>Yes</code>.
 +
 +
Place your logo in child theme's images directory. In the above code, it is assumed that it is ''logo.png''. Change the width and height values.
 +
 +
Change the URLs that social images link to. Also it is recommended that you upload the social icon images to your own site and refer to them.
 +
 +
[[File:Screen Shot 2012-11-21 at 4.27.38 PM.png|591px|thumb|none]]
 +
 +
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.builder-module-1 {
 +
height: 129px;
 +
}
 +
 +
#logo {
 +
float: left;
 +
}
 +
 +
.social-icons {
 +
float: right;
 +
}
 +
</pre>
 +
 +
'''3.''' Add second module: A Navigation module.
 +
 +
If you haven't already created a custom menu having your desired menu items that should appear in the navigation, do so at Appearance -> Menus.
 +
 +
Select <code>Navigation Type</code> to the name of your custom menu.
 +
 +
[[File:Screen Shot 2012-11-21 at 4.32.40 PM.png|664px|thumb|none]]
 +
 +
'''4.''' Add third module. A HTML module having this code:
 +
 +
<pre class="brush:php;">
 +
<div style="padding: 1.5em; background: #EFEFEF;">
 +
 +
<img src="http://demos.ithemes.com/expansion/files/2011/11/grow-your-business.jpg" style="border: 1px solid #949494; float: left; margin: 0 1.5em 1.5em 0;">
 +
 +
<h1 style="color: #333333; margin-top: 0; line-height: 1;">We Help Expand Your Business</h1>
 +
 +
<p style="color: #333333;">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.</p>
 +
 +
<p style="color: #333333; margin-bottom: 0;">Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 +
 +
</div>
 +
</pre>
 +
 +
Change the image URL and text in the above to what you want in your site.
 +
 +
[[File:Screen Shot 2012-11-21 at 4.35.44 PM.png|592px|thumb|none]]
 +
 +
Once done, the layout should look like this:
 +
 +
[[File:Screen Shot 2012-11-21 at 4.36.56 PM.png|436px|thumb|none]]
 +
 +
'''5.''' Go to My Theme -> Layouts & Views -> Views (tab at the top). Add a <code>Home</code> view and set it to use <code>Home</code> layout.
 +
 +
[[File:2012-11-21 16-39-01.png|348px|thumb|none]]
 +
 +
That's it!
  
 
== How to remove "by <author>" below post titles ==
 
== How to remove "by <author>" below post titles ==
Line 88: Line 170:
  
 
In the above replace <code>[pb_slideshow group="2"]</code> with the shortcode for your slideshow group. Also replace the content of "my-featured-right" div with the HTML code that you want to appear to the right of sliding images.
 
In the above replace <code>[pb_slideshow group="2"]</code> with the shortcode for your slideshow group. Also replace the content of "my-featured-right" div with the HTML code that you want to appear to the right of sliding images.
 +
 +
Set Style to "Slider at left and HTML on right".
  
 
'''5.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 
'''5.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
Line 132: Line 216:
 
</pre>
 
</pre>
  
== Item 4 ==
+
== How to set background of navigation module's wrapper ==
 +
 
 +
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-navigation-background-wrapper {
 +
    background: #1C3472;
 +
}
 +
</pre>
 +
 
 +
In the above change the hexadecimal color code to your liking.

Latest revision as of 06:14, November 21, 2012

Expansion live demo

Expansion Red live demo

Expansion Blue live demo

Contents

Expansion demo sites Layouts and Views export files

Expansion Demo Site Layouts & Views export file

Expansion Red Demo Site Layouts & Views export file

Expansion Blue Demo Site Layouts & Views export file

To import this zip file, go to My Theme -> Settings -> Import / Export.

One of our users wrote step by step instructions on how to set up Expansion like the demo site using these export files. Click here to read her post.

How to set up top 3 modules like that in the demo site

If you would like to set up a copy of upper 3 modules in your Builder site in which Expansion is the active theme, similar to Expansion demo site, do the following:

1. Create a layout called Home.

2. Add the top most module. A HTML module having the following code:

<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" width="311" height="55" alt="Home" /></a></div>

<div class="social-icons">
<a href="http://www.youtube.com/user/iThemescom"><img src="http://demos.ithemes.com/expansion/files/2011/11/youtube.png" style="padding-right: 10px;"></a>

<a href="http://www.facebook.com/ithemes"><img src="http://demos.ithemes.com/expansion/files/2011/11/facebook.png" style="padding-right: 10px;"></a>

<a href="https://twitter.com/#!/ithemes"><img src="http://demos.ithemes.com/expansion/files/2011/11/twitter.png"></a>
</div>

Set Enable PHP to Yes.

Place your logo in child theme's images directory. In the above code, it is assumed that it is logo.png. Change the width and height values.

Change the URLs that social images link to. Also it is recommended that you upload the social icon images to your own site and refer to them.

Screen Shot 2012-11-21 at 4.27.38 PM.png

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

.builder-module-1 {
	height: 129px;
}

#logo {
	float: left;
}

.social-icons {
	float: right;
}

3. Add second module: A Navigation module.

If you haven't already created a custom menu having your desired menu items that should appear in the navigation, do so at Appearance -> Menus.

Select Navigation Type to the name of your custom menu.

Screen Shot 2012-11-21 at 4.32.40 PM.png

4. Add third module. A HTML module having this code:

<div style="padding: 1.5em; background: #EFEFEF;">

<img src="http://demos.ithemes.com/expansion/files/2011/11/grow-your-business.jpg" style="border: 1px solid #949494; float: left; margin: 0 1.5em 1.5em 0;">

<h1 style="color: #333333; margin-top: 0; line-height: 1;">We Help Expand Your Business</h1>

<p style="color: #333333;">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.</p>

<p style="color: #333333; margin-bottom: 0;">Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

Change the image URL and text in the above to what you want in your site.

Screen Shot 2012-11-21 at 4.35.44 PM.png

Once done, the layout should look like this:

Screen Shot 2012-11-21 at 4.36.56 PM.png

5. Go to My Theme -> Layouts & Views -> Views (tab at the top). Add a Home view and set it to use Home layout.

2012-11-21 16-39-01.png

That's it!

How to remove "by <author>" below post titles

Before
After

1. Edit child theme's index.php and archive.php.

Change

<?php printf( __( 'by %s', 'it-l10n-BuilderChild-Expansion-Red' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
								<?php do_action( 'builder_comments_popup_link', '<span class="comments">· ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(0)', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(1)', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(%)', 'it-l10n-BuilderChild-Expansion-Red' ) ); ?>

to

<?php //printf( __( 'by %s', 'it-l10n-BuilderChild-Expansion-Red' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
								<?php do_action( 'builder_comments_popup_link', '<span class="comments"> ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(0)', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(1)', 'it-l10n-BuilderChild-Expansion-Red' ), __( '(%)', 'it-l10n-BuilderChild-Expansion-Red' ) ); ?>

2. Add the following at the end of child theme's style.css (to take care of this in single posts):

.single-post .hentry .author {
    display: none;
}

How to have a slideshow at left and static text at right using a HTML module

My Test Site 2012-10-17 14-27-43.png

Note: In the following example, the layout width is 960px. If your site's layout width is different, you may have to adjust the values accordingly.

1. Install Slideshow plugin. Create a group. Set slide image dimensions to 530 x 300. In "Slider Mode Settings", set Horizontal Alignment to Left. Adjust any other settings per your liking. Add the images that should appear in slider.

2. Go to Slideshow group list and note the shortcode for this group.

3. Edit child theme's functions.php.

Below

builder_register_module_style( 'html', 'Alternate', 'html-alternate' );

add

builder_register_module_style( 'html', 'Slider at left and HTML on right', 'html-featured-slider' );

4. Edit your layout and add a HTML module having this code:

<div class="my-featured-left">
[pb_slideshow group="2"]
</div>

<div class="my-featured-right">
<h1>We Help Expand Your Business</h1>

<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.</p>

<p>Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

In the above replace [pb_slideshow group="2"] with the shortcode for your slideshow group. Also replace the content of "my-featured-right" div with the HTML code that you want to appear to the right of sliding images.

Set Style to "Slider at left and HTML on right".

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

.html-featured-slider-outer-wrapper {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}

.html-featured-slider-outer-wrapper .builder-module-html {
    background: #EFEFEF;
    padding-top: 0;
    padding-bottom: 0;
}

.html-featured-slider-outer-wrapper .builder-module-html .builder-module-element {
	padding: 1.5em;
}

.my-featured-left {
	float: left;
}

.my-featured-right {
	float: left;
	margin-left: 2em;
	width: 365px;
}

.html-featured-slider-outer-wrapper .builder-module-html h1 {
    color: #333;
    margin-top: 0;
    line-height: 1;
}

.html-featured-slider-outer-wrapper .builder-module-html p {
 	color: #333;
}

.html-featured-slider-outer-wrapper .builder-module-html p:last-child {
 	margin-bottom: 0;
}

How to set background of navigation module's wrapper

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

.builder-module-navigation-background-wrapper {
    background: #1C3472;
}

In the above change the hexadecimal color code to your liking.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox