BuilderChild-Default - Revision history

Sridhar: /* How to remove space between modules */

2013-03-15T01:49:03Z

How to remove space between modules

Sridhar: /* How to Add Search and Social Media Icons in Navigation */

2013-02-14T12:20:44Z

How to Add Search and Social Media Icons in Navigation

Sridhar: /* How to Add Search and Social Media Icons in Navigation */

2013-02-14T08:55:27Z

How to Add Search and Social Media Icons in Navigation

Sridhar: Added = How to add search and social media icons in navigation =

2013-02-14T08:00:43Z

Added = How to add search and social media icons in navigation =

Sridhar: Added = How to remove the line at the bottom of Content module =

2013-01-30T04:22:28Z

Added = How to remove the line at the bottom of Content module =

Sridhar: Added = How to remove space between modules =

2013-01-25T03:54:58Z

Added = How to remove space between modules =

Sridhar: Added "How to customize navigation menu to look like that in Yukon"

2011-04-22T18:14:50Z

Added "How to customize navigation menu to look like that in Yukon"

Sridhar: /* How to place nav bar to the right of logo */

2011-04-01T03:49:04Z

How to place nav bar to the right of logo

Sridhar: Added "How to place nav bar to the right of logo"

2011-03-24T05:34:50Z

Added "How to place nav bar to the right of logo"

Sridhar: Added "How to place text at the right side of clickable header image"

2011-03-13T02:31:21Z

Added "How to place text at the right side of clickable header image"

@@ Line 267: / Line 267: @@
 Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
-<pre class="brush:css;">
+<pre class="brush:css; gutter: false;">
 .builder-module-background-wrapper {
      margin-bottom: 0;

@@ Line 438: / Line 438: @@
+}
 </pre>
 If the social icons are appearing below search due to lack of enough width, reduce the width value for <code>input.search-text-box</code> in the above CSS code.
 That's it!

@@ Line 325: / Line 325: @@
 Set <code>Enable PHP</code> dropdown to <code>Yes</code>.
-'''4.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
+'''4.''' Create a file named <code>searchform.php</code> in child theme's directory having [http://pastebin.com/N5Sxgy32 this] code.
 <pre class="brush: css; gutter: false;">

← Older revision		Revision as of 08:00, February 14, 2013
Line 289:		Line 289:
	}		}
	</pre>		</pre>
		+
		+	= How to Add Search and Social Media Icons in Navigation =
		+
		+	[[File:Screen Shot 2013-02-14 at 1.21.12 PM.png\|796px\|thumb\|none]]
		+
		+	'''1.''' Download [http://cl.ly/2S2C2c1r463M this] zip file, extract the contents inside and upload them (<code>search.png</code> and <code>social-media</code> folder) to child theme's <code>images</code> directory.
		+
		+	'''2.''' At Appearance -> Menus, if you haven't already, create a menu and populate it with your desired menu items. Note the name given to the menu.
		+
		+	'''3.''' We are going to use a PHP enabled HTML module for this. Edit your layout and create a HTML module having the following sample content:
		+
		+	<pre class="brush: php; gutter: false;">
		+	<?php wp_nav_menu( array( 'menu' => 'Primary', 'menu_class' => 'builder-module-navigation') ); ?>
		+
		+	<div class="social-search">
		+	<div class="search_in_nav"><?php get_search_form(); ?></div>
		+
		+	<div class="my-social-icons">
		+	<ul>
		+	<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/social-media/facebook.png"></a></li>
		+
		+	<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/social-media/twitter.png"></a></li>
		+
		+	<li class="social-icon"><a target="_blank" rel="nofollow" href="http://plus.google.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Google Plus" alt="Google Plus" src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/social-media/googleplus.png"></a></li>
		+
		+	<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/social-media/rss.png"></a></li>
		+
		+	</ul>
		+	</div>
		+	</div>
		+	</pre>
		+
		+	In the above replace <code>Primary</code> with ID or Name or slug of the custom menu that should appear in the navigation.
		+
		+	Set <code>Enable PHP</code> dropdown to <code>Yes</code>.
		+
		+	'''4.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush: css; gutter: false;">
		+	/************************************************************************
		+	For search box and social icons to the right of nav in a HTML module
		+	*************************************************************************/
		+
		+	.builder-module-2 .builder-module-element {
		+	padding: 0;
		+	}
		+
		+	ul.builder-module-navigation {
		+	margin-left: 0;
		+	}
		+
		+	.social-search {
		+	float: right;
		+	margin-right: 1em;
		+	}
		+
		+	.search_in_nav {
		+	float: left;
		+	margin-top: 5px;
		+	margin-right: 1em;
		+	}
		+
		+	.search-form input {
		+	float: left;
		+	}
		+
		+	input.search-text-box {
		+	margin-top: 0;
		+	margin-bottom: 0;
		+	background: #EEEEEE;
		+	margin-right: 2px;
		+	-webkit-border-top-left-radius: 3px;
		+	-moz-border-top-left-radius: 3px;
		+	border-top-left-radius: 3px;
		+	-webkit-border-bottom-left-radius: 3px;
		+	-moz-border-bottom-left-radius: 3px;
		+	border-bottom-left-radius: 3px;
		+	/width: 99.5%;/
		+	width: 200px;
		+	background: #FFFFFF;
		+	border: 1px solid #D1D1D1;
		+	color: #888888;
		+	-webkit-border-radius: 3px;
		+	-moz-border-radius: 3px;
		+	border-radius: 3px;
		+	}
		+
		+	input.search-text-box:focus {
		+	background: #FFFFFF;
		+	color: #333333;
		+	-webkit-box-shadow: inset #D1D1D1 0 0 2px;
		+	-moz-box-shadow: inset #D1D1D1 0 0 2px;
		+	box-shadow: inset #D1D1D1 0 0 2px;
		+	border: 1px solid #D1D1D1;
		+	}
		+
		+	.search-submit-button {
		+	width: 22px;
		+	height: 22px;
		+	margin-top: 5px !important;
		+	margin-left: -25px !important;
		+	background: url('images/search.png') no-repeat;
		+	text-indent: -9999px;
		+	border: none;
		+	}
		+
		+	.search-submit-button:active {
		+	-webkit-box-shadow: inset #888 0 0 5px;
		+	-moz-box-shadow: inset #888 0 0 5px;
		+	-o-box-shadow: inset #888 0 0 5px;
		+	box-shadow: inset #888 0 0 5px;
		+	}
		+
		+	.search-submit-button:hover {
		+	cursor: pointer;
		+	}
		+
		+	li.social-icon a, li.social-icon a:hover {
		+	padding-left: 8px;
		+	}
		+
		+	li.social-icon a:hover {
		+	opacity: 0.8;
		+	-moz-opacity: 0.8;
		+	background: none;
		+	}
		+
		+	li.social-icon:hover,
		+	li.social-icon:hover a {
		+	background: none;
		+	}
		+
		+	.my-social-icons {
		+	float: left;
		+	margin-top: 2px;
		+	}
		+
		+	.my-social-icons ul {
		+	list-style: none;
		+	margin-left: 0;
		+	}
		+
		+	.my-social-icons li {
		+	float: left;
		+	height: 32px;
		+	}
		+	</pre>
		+
		+	If the social icons are appearing below search due to lack of enough width, reduce the width value for <code>input.search-text-box</code> in the above CSS code.
		+
		+	That's it!

← Older revision		Revision as of 04:22, January 30, 2013
Line 277:		Line 277:
	File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png\|After		File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png\|After
	</gallery>		</gallery>
		+
		+	= How to remove the line at the bottom of Content module =
		+
		+	[[File:2013-01-30 09-47-32.png\|800px\|thumb\|none]]
		+
		+	Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css;">
		+	.entry-footer {
		+	border-top: none;
		+	}
		+	</pre>

← Older revision		Revision as of 03:54, January 25, 2013
Line 262:		Line 262:
	}		}
	</pre>		</pre>
		+
		+	= How to remove space between modules =
		+
		+	Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css;">
		+	.builder-module-background-wrapper {
		+	margin-bottom: 0;
		+	}
		+	</pre>
		+
		+	<gallery widths=320px heights=199px>
		+	File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png\|Before
		+	File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png\|After
		+	</gallery>

← Older revision		Revision as of 18:14, April 22, 2011
Line 168:		Line 168:
	</pre>		</pre>

−	=~~Item 4~~=	+	=How to customize navigation menu to look like that in Yukon=
		+
		+	[http://yukon.ithemes.com/ Yukon demo site for reference]
		+
		+	'''Before'''
		+
		+	[[Image:Yukon--menu-before.png\|800px\|none]]
		+
		+	'''After'''
		+
		+	[[Image:Yukon--menu-after.png\|800px\|none]]
		+
		+	'''Here's how''':
		+
		+	'''1.''' Download [http://d.pr/n92J this] file, extract the images and upload them to child theme images directory.
		+
		+	'''2.''' Add the following at the end of child theme's style.css
		+
		+	<pre class="brush:css;">
		+	.builder-module {
		+	border-top: none;
		+	border-bottom: none;
		+	margin-bottom: 0;
		+	}
		+
		+	.builder-module-navigation {
		+	height: 50px;
		+	background: #FFFFFF url('images/navbg.png') repeat-x top left;
		+	line-height: 50px;
		+	}
		+
		+	.builder-module-navigation ul.menu li {
		+	margin-right: 0.5em;
		+	}
		+
		+	.builder-module-navigation li a,
		+	.builder-module-navigation li.current_page_item li a,
		+	.builder-module-navigation li.current-cat li a {
		+	background: none;
		+	color: #666666;
		+	padding: 0 10px;
		+	}
		+
		+	.builder-module-navigation ul.menu li.current_page_item, .builder-module-navigation ul.menu li.current_cat {
		+	padding-right: 10px;
		+	}
		+
		+	.builder-module-navigation li a:hover {
		+	color: #000000;
		+	background: none;
		+	}
		+
		+	.builder-module-navigation li.current_page_item,
		+	.builder-module-navigation li.current-cat {
		+	background: url("images/navbg-on-right.png") right top no-repeat;
		+	padding-right: 10px;
		+	}
		+
		+	.builder-module-navigation li.current_page_item a,
		+	.builder-module-navigation li.current-cat a {
		+	background: url("images/navbg-on-left.png") no-repeat;
		+	padding: 0 0 0 10px;
		+	}
		+
		+	.builder-module-navigation li li {
		+	height: 30px;
		+	line-height: 30px;
		+	border: 1px solid #666666;
		+	border-top: 0;
		+	}
		+
		+	.builder-module-navigation li li a {
		+	background:transparent;
		+	color:#fff;
		+	background:#000;
		+	filter:alpha(opacity=80);
		+	-moz-opacity:0.8;
		+	-khtml-opacity: 0.8;
		+	opacity: 0.8;
		+	}
		+
		+	.builder-module-navigation li li a:hover {
		+	background:#000;
		+	filter:alpha(opacity=100);
		+	-moz-opacity:1.0;
		+	-khtml-opacity: 1.0;
		+	opacity: 1.0;
		+	color: #fff;
		+	}
		+
		+	.builder-module-navigation li ul ul {
		+	margin: -2.6em 0 0 14em;
		+	}
		+	</pre>

@@ Line 101: / Line 101: @@
 <pre class="brush:php;">
-<?php wp_nav_menu( array( 'menu' => 'Top', 'menu_class' => 'builder-module-navigation') ); ?>
+<?php wp_nav_menu( array( 'menu' => 'Top Menu', 'menu_class' => 'builder-module-navigation') ); ?>
 </pre>
-Change "Top" in the above to the name of menu from step 1.
+Change "Top Menu" in the above to the name of menu from step 1.
 Set it to have 1 left sidebar having a width of say 200px. Set 'Enable PHP' to Yes.

@@ Line 92: / Line 92: @@
 Use text that is relevant to your site instead of the above.
-=Item 3=
+=How to place nav bar to the right of logo=
 =Item 4=

@@ Line 16: / Line 16: @@
 Also see http://codex.wordpress.org/Post_Formats#Using_Formats
-=Item 2=
+=How to place text at the right side of clickable header image=
 =Item 3=
 =Item 4=