Plugin related and other generic customizations 2 - Revision history

Sridhar: /* Examples of Using jQuery in Builder */ Added === Easy Accordion jQuery plugin in iThemes Builder ===

2013-04-30T07:42:25Z

Examples of Using jQuery in Builder: Added === Easy Accordion jQuery plugin in iThemes Builder ===

Show changes

Sridhar: Added == How to set up a responsive Full Width slideshow in iThemes Builder ==

2013-04-24T06:35:24Z

Added == How to set up a responsive Full Width slideshow in iThemes Builder ==

Sridhar: /* Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active) */

2013-04-17T13:03:59Z

Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)

Sridhar: /* Animated Responsive Image Grid */

2013-04-10T10:05:29Z

Animated Responsive Image Grid

Sridhar: /* Examples of Using jQuery in Builder */ Added === Animated Responsive Image Grid ===

2013-04-10T09:50:04Z

Examples of Using jQuery in Builder: Added === Animated Responsive Image Grid ===

Show changes

Ronald: /* Add the css code for the Mobile navigation */

2013-04-05T20:33:30Z

Add the css code for the Mobile navigation

Ronald: /* How to Create Mobile Navigation like the new Air Theme */

2013-04-05T20:32:10Z

How to Create Mobile Navigation like the new Air Theme

Ronald at 20:30, April 5, 2013

2013-04-05T20:30:07Z

Sridhar: /* How to get the output of a Header module in a HTML module */

2013-04-04T09:18:14Z

How to get the output of a Header module in a HTML module

Sridhar: /* How to get the output of a Header module in a HTML module */

2013-04-04T09:03:32Z

How to get the output of a Header module in a HTML module

← Older revision		Revision as of 06:35, April 24, 2013
Line 2,355:		Line 2,355:
	===Activate the Mobile Navigation===		===Activate the Mobile Navigation===
	Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.		Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
		+
		+	== How to set up a responsive Full Width slideshow in iThemes Builder ==
		+
		+	In this tutorial, we are going to use [http://ithemes.com/purchase/slideshow/ iThemes Slideshow] plugin to set up a responsive full width slideshow in Builder.
		+
		+	[[File:WordPress-Dev-Site-2013-04-24-11-34-20.jpg\|800px\|thumb\|none]]
		+
		+	'''1.''' Install and activate [http://ithemes.com/purchase/slideshow/ Slideshow] plugin. Add a new group named say, <code>Homepage Slider</code>. Edit the group and set dimensions to 1500px by 430px.
		+	Note that these are just recommended dimensions and are not set in stone and you are free to experiment and change them as you see them fit for your needs.
		+
		+	Under <code>Render Mode</code>, select <code>Responsive</code>. Save settings.
		+
		+	Upload the images you wish to appear in the slide group.
		+
		+	[[File:Slideshow ‹ WordPress Dev Site — WordPress 2013-04-24 12-03-05.png\|362px\|thumb\|none]]
		+
		+	'''2.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any):
		+
		+	<pre class="brush: php; gutter: false;">
		+	add_theme_support( 'builder-full-width-modules' );
		+
		+	if ( ! function_exists( 'it_builder_loaded' ) ) {
		+	function it_builder_loaded() {
		+	builder_register_module_style( 'widget-bar', 'Full Width Slider', 'widget-bar-full-width-slider' );
		+	}
		+	add_action( 'it_libraries_loaded', 'it_builder_loaded' );
		+	}
		+	</pre>
		+
		+	Note: If the first line in above, i.e., for adding full width modules support is already present, do not add it again.
		+
		+	'''3.''' Edit your layout and add a Widget Bar module with 1 column wherever you want the Slideshow to appear.
		+
		+	Select <code>Full Width Slider</code> from Style dropdown.
		+
		+	You might want to name the module <code>Slider</code> for easy identification.
		+
		+	[[File:Screen Shot 2013-04-24 at 11.49.50 AM.png\|668px\|thumb\|none]]
		+
		+	'''4.''' Go to Appearance -> Widgets page for this layout and drag iThemes Slideshow widget into the Widget bar module's sidebar and ensure that your full width slider group is the selected one.
		+
		+	[[File:Screen Shot 2013-04-24 at 11.51.54 AM.png\|299px\|thumb\|none]]
		+
		+	'''5.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css; gutter: false;">
		+	/* For full width slideshow */
		+
		+	.widget-bar-full-width-slider-background-wrapper {
		+	padding: 0;
		+	margin-bottom: 0;
		+	}
		+
		+	.widget-bar-full-width-slider-outer-wrapper {
		+	max-width: 100% !important;
		+	}
		+	</pre>
		+
		+	'''6.''' Add the following in <code>style-mobile.css</code> (create this file if it is not existing):
		+
		+	<pre class="brush:css; gutter: false;">
		+	/* For full width slideshow */
		+
		+	#pb_slideshow_rslider-1 .nivo-prevNav {
		+	margin-left: 0 !important;
		+	}
		+
		+	#pb_slideshow_rslider-1 .nivo-nextNav {
		+	margin-right: 0 !important;
		+	}
		+	</pre>
		+
		+	'''7.''' Create a new file named <code>style-responsive.css</code> in the child theme and paste the following in it:
		+
		+	<pre class="brush:css; gutter: false;">
		+	/* For full width slideshow */
		+
		+	.widget-bar-full-width-slider-background-wrapper {
		+	padding: 0;
		+	}
		+	</pre>

@@ Line 2,340: / Line 2,340: @@
 ===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===
 <pre class="brush:css; gutter: false;">
 /*********************************************

@@ Line 1,586: / Line 1,586: @@
 a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:
 <h2>Demo 1: Random animations / 55% container width / 3s between switching</h2>
 <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
 	<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>

@@ Line 2,001: / Line 2,001: @@
 ===Add the css code for the Mobile navigation===
-Add the following code at the end of your child themes '''mobile''' stylesheet style-mobile.css:
+Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:
 <pre class="brush:css; gutter: false;">

@@ Line 1,970: / Line 1,970: @@
 ===Pre-requisites===
-* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive enabled themes.
+* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
 * Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code>

← Older revision		Revision as of 20:30, April 5, 2013
Line 1,963:		Line 1,963:

	'''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>.		'''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>.
		+
		+	== How to Create Mobile Navigation like the new Air Theme ==
		+
		+	There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
		+
		+	===Pre-requisites===
		+
		+	* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive enabled themes.
		+	* Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code>
		+
		+	===Include the javascript code that enables the Mobile dropdown===
		+
		+	* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
		+	* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):
		+
		+	<pre class="brush:php; gutter: false;">
		+	// Enqueuing and Using Custom Javascript/Jquery
		+	function it_air_load_custom_scripts() {
		+	wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
		+	wp_enqueue_script('it_air_jquery_additions');
		+	}
		+	add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
		+	</pre>
		+
		+	===Enable the Mobile Nav as an Alternative Navigation Module Style===
		+	Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
		+	<pre class="brush:php; gutter: false;">
		+	// Add Support for Alternate Module Styles
		+	if ( ! function_exists( 'it_builder_loaded' ) ) {
		+	function it_builder_loaded() {
		+	builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
		+	}
		+	}
		+	add_action( 'it_libraries_loaded', 'it_builder_loaded' );
		+	</pre>
		+
		+
		+	===Add the css code for the Mobile navigation===
		+	Add the following code at the end of your child themes '''mobile''' stylesheet style-mobile.css:
		+
		+	<pre class="brush:css; gutter: false;">
		+	/*********************************************
		+	Navigation Module (Mobile)
		+	*********************************************/
		+	.builder-module-navigation.mobile {
		+	padding-top: .5em !important;
		+	}
		+
		+	.builder-module-navigation.mobile ul {
		+	margin-top: .5em;
		+	}
		+
		+	.builder-module-navigation.mobile li {
		+	width: 100%;
		+	position: relative;
		+	}
		+
		+	/* second level stuff */
		+	.builder-module-navigation.mobile li ul {
		+	position: relative !important;
		+	left: 0 !important;
		+	border: 0;
		+	width: 100%;
		+	margin: 0;
		+	}
		+
		+	.builder-module-navigation.mobile li a,
		+	.builder-module-navigation.mobile .current_page_item li a,
		+	.builder-module-navigation.mobile .current-cat li a,
		+	.builder-module-navigation.mobile .current-menu-item li a {
		+	margin: 0;
		+	background: transparent;
		+	border-color: transparent;
		+	color: #3B3F42;
		+	border-bottom: 1px solid rgba(0,0,0,0.1);
		+	}
		+
		+	.builder-module-navigation.mobile li a:hover,
		+	.builder-module-navigation.mobile .current_page_item li a:hover,
		+	.builder-module-navigation.mobile .current-cat li a li a:hover,
		+	.builder-module-navigation.mobile .current-menu-item li a:hover {
		+	background: #3B3F42;
		+	color: #ECECEC;
		+	}
		+
		+	.builder-module-navigation.mobile li li {
		+	border: 0;
		+	width: 100%;
		+	}
		+
		+	.builder-module-navigation.mobile li ul ul {
		+	margin: 0;
		+	}
		+
		+	.builder-module-navigation.mobile li li a {
		+	padding: .25em 0 .25em 2em;
		+	line-height: inherit;
		+	border-radius: 2px;
		+	}
		+
		+	.builder-module-navigation.mobile li li li a {
		+	padding-left: 4em;
		+	}
		+
		+	.builder-module-navigation.mobile-nav .menu.hidden {
		+	display: none;
		+	}
		+	#it-mobile-menu {
		+	background: #3B3F42;
		+	color: #ECECEC;
		+	padding: .25em .75em;
		+	display: block;
		+	cursor: pointer;
		+	border-radius: 2px;
		+	-webkit-font-smoothing: antialiased;
		+	}
		+
		+	.builder-module-navigation.mobile.borderless {
		+	border: 0;
		+	}
		+	</pre>
		+
		+	===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===
		+	<pre class="brush:css; gutter: false;">
		+	/*********************************************
		+	Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
		+	*********************************************/
		+
		+	#it-mobile-menu {
		+	display: none;
		+	}
		+	</pre>
		+
		+	===Activate the Mobile Navigation===
		+	Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

@@ Line 1,603: / Line 1,603: @@
 <?php else : ?>
-	<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
+	<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>
 	<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>

@@ Line 1,600: / Line 1,600: @@
 	<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
-	<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>
+	<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>
 <?php else : ?>