BuilderChild-Traverse - Revision history

Sridhar: /* How to set up Slideshow like in the demo site */

2012-06-07T11:59:56Z

How to set up Slideshow like in the demo site

Sridhar: Added = How to show excerpts instead of full posts =

2012-05-01T17:20:47Z

Added = How to show excerpts instead of full posts =

Sridhar: /* How to set up Slideshow like in the demo site */

2012-02-07T04:16:32Z

How to set up Slideshow like in the demo site

Sridhar at 03:25, November 9, 2011

2011-11-09T03:25:59Z

Sridhar: Added = How to set up Slideshow like in the demo site =

2011-11-09T03:25:19Z

Added = How to set up Slideshow like in the demo site =

New page

[http://demos.ithemes.com/traverse/ Traverse Demo Site]

= How to set up Slideshow like in the demo site =

[[File:Traverse-slideshow.jpg|800px|thumb|none]]

'''1.''' Install and activate [http://pluginbuddy.com/purchase/displaybuddy/ iThemes Slideshow] plugin.

'''2.''' Go to DisplayBuddy -> Slideshow in WP dashboard. Create a new group named say, "Front Page Slider".

Use the following settings:

[[File:Traverse-slideshow-settings.png|714px|thumb|none]]

Upload your images.

'''3.''' Copy shortcode to display this slideshow. Ex.: [pb_slideshow group="0"]

'''4.''' Edit the layout(s) in which you want the slideshow to appear (typically this will be the layout set aside for front page), add a HTML module and paste the Slideshow shortcode in the text area. Save the layout(s).

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

<pre class="brush:css;">
/** making the Nivo Slider from Slideshow look more like the theme */
.builder-module .nivoSlider {
margin-left: 0;
margin-bottom: 15px;
}
.builder-module .nivo-controlNav {
margin-right: -260px;
position: absolute;
right: 0;
top: 0;
width: 260px;
text-align: center;
z-index: 0;
}
.builder-module .nivo-controlNav img {
display: block;
margin-right: 0;
}
.builder-module-3 .builder-module-element {
box-shadow: #C5C1AF 10px 10px, #FFF9E2 -10px -10px;
}
</pre>

In the above, change "3" in ".builder-module-3" to the position of HTML module having the slideshow from top.

If Slideshow is not being used in all the layouts, replace ".builder-module-3" with the ID of the HTML module in which we placed the Slideshow. Ex.: "#builder-module-4eb9ec0eb3ede". See [http://ithemes.com/codex/page/Builder_CSS_Guide#To_target_a_specific_module this] for more info.

@@ Line 49: / Line 49: @@
 If Slideshow is not being used in all the layouts, replace ".builder-module-3" with the ID of the HTML module in which we placed the Slideshow.  Ex.: "#builder-module-4eb9ec0eb3ede". See [http://ithemes.com/codex/page/Builder_CSS_Guide#To_target_a_specific_module this] for more info.
-= Item 2 =
+= How to show excerpts instead of full posts =
 = Item 3 =
 = Item 4 =

← Older revision		Revision as of 03:25, November 9, 2011
Line 48:		Line 48:

	If Slideshow is not being used in all the layouts, replace ".builder-module-3" with the ID of the HTML module in which we placed the Slideshow. Ex.: "#builder-module-4eb9ec0eb3ede". See [http://ithemes.com/codex/page/Builder_CSS_Guide#To_target_a_specific_module this] for more info.		If Slideshow is not being used in all the layouts, replace ".builder-module-3" with the ID of the HTML module in which we placed the Slideshow. Ex.: "#builder-module-4eb9ec0eb3ede". See [http://ithemes.com/codex/page/Builder_CSS_Guide#To_target_a_specific_module this] for more info.
		+
		+	= Item 2 =
		+
		+	= Item 3 =
		+
		+	= Item 4 =

@@ Line 39: / Line 39: @@
      display: block;
      margin-right: 0;
+}
 .builder-module-3 .builder-module-element {

@@ Line 25: / Line 25: @@
 .builder-module .nivoSlider {
 	margin-left: 0;
-	margin-bottom: 15px;
+	margin-bottom: 0 !important;
+}
 .builder-module .nivo-controlNav {
@@ Line 32: / Line 32: @@
      right: 0;
      top: 0;
-     width: 260px;
+     width: 260px !important;
      text-align: center;
      z-index: 0;