BuilderChild-Expansion

(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 have a slideshow at left and static text at right using a HTML module)
Line 88: Line 88:
  
 
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):

Revision as of 05:08, October 17, 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 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;
}

Item 4

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox