BuilderChild-Default

(Difference between revisions)
Jump to: navigation, search
(Added "How to place nav bar to the right of logo")
m (How to Add Search and Social Media Icons in Navigation)
(6 intermediate revisions by one user not shown)
Line 101: Line 101:
  
 
<pre class="brush:php;">
 
<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>
 
</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.
 
Set it to have 1 left sidebar having a width of say 200px. Set 'Enable PHP' to Yes.
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>
 +
 
 +
= 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>
 +
 
 +
= 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>
 +
 
 +
= 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.''' Create a file named <code>searchform.php</code> in child theme's directory having [http://pastebin.com/N5Sxgy32 this] code.
 +
 
 +
'''5.''' 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>
 +
 
 +
In the above, change the number in <code>.builder-module-2 .builder-module-element</code> to the position of HTML module from top in the layout.
 +
 
 +
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!

Revision as of 06:20, February 14, 2013

Contents

How to enable Post Formats

WordPress 3.1 includes a new feature called Post Formats that lets the site admin enable additional post formats besides the default one termed as "Standard" when creating/editing a post.

Format-metabox.png

To use this feature, add the following to your theme's functions.php:

// ADD POST FORMATS
add_theme_support( 'post-formats', array( 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) );

If you have not used functions.php in BuilderChild-Default so far, download this file, name it as functions.php and upload it to your child theme directory, i.e., to wp-content/themes/BuilderChild-Default.

Also see http://codex.wordpress.org/Post_Formats#Using_Formats

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

Default-header.png

These instructions are provided as an example to have a header image in a HTML module which when clicked takes the visitor to home page. At right side of the module is some text coming from a widget as can be seen in the above screenshot.

1. Edit your layout and add a HTML module.

Paste the following in module's text area:

<a href="<?php bloginfo('url');?>">Quality Care Homes</a>

Replace "Quality Care Homes" in the above with your site's keyword-rich title or any other text of your choice.

Set 1 Right sidebar and a width of your choice. In this example, we are using 300px with the layout width being 960px.

Enable PHP and save the module and layout.

2. Add the following at the end of your theme's style.css:

.builder-module-1 {
	background: url("http://qualitycarehomes-ca.helpplanet.net/wp-content/uploads/quality-care-homes-banner-logo.jpg") no-repeat;
	height: 150px;
}

.builder-module-1 .builder-module-element a {
	display: block;
	width: 660px;
	height: 150px;
	text-indent: -9999px;
}

.builder-module-1 .builder-module-sidebar {
	background: transparent;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: bold;
	text-align: center;
}

.builder-module-1 .builder-module-sidebar  .widget {
	padding-top: 1em;
}

.address {
	font-size: 150%;
}

.phone {
	font-size: 120%;
}

The above assumes that header is always the first module in all layouts through out the site.

The following should be changed in this CSS code:

  • URL of background image for .builder-module-1
  • Height of .builder-module-1 .builder-module-element a to match that of the header image
  • [Optional] Width of .builder-module-1 .builder-module-element a to the width of your desired clickable area

3. At Appearance -> Widgets, drag a text widget and paste the following:

<div class="address">Konihowski Care Home</div>
<div class="phone">Phone: (306) 931-0075</div>
<br/><hr/>
<div class="address">Maguire Nursing Home</div>
<div class="phone">Phone: (306) 382-5656</div>

Use text that is relevant to your site instead of the above.

Logo-left-navbar-right.png

1. Go to Appearance -> Menus and create a custom menu with items that should appear in the nav bar.

2. Add a HTML module to the layout. Paste the following in module's text area:

<?php wp_nav_menu( array( 'menu' => 'Top Menu', 'menu_class' => 'builder-module-navigation') ); ?>

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.

Logo-left-navbar-right-module-settings.png

3. Save the module and layout.

4. Install PHP-Widgetify plugin.

5. Upload the logo, say logo.png to your (child) theme's images directory.

6. Go to Appearance -> Widgets. Drag a PHP Widgetify widget to the module's sidebar and paste the following:

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

Change width and height values in the above to match that of your site's logo.

7. Add CSS style rules in theme's style.css. Below is a sample code that you could use. Make sure to tweak so everything looks fine in your site:

.builder-module {
	border-top: none;
	border-bottom: none;
}

.builder-module-sidebar {
    background: transparent;
}

.builder-module-1 {
    background: transparent;
    margin-bottom: 0;
}

.builder-module-1 .builder-module-element {
    float: right;
    margin-top: 2.5em;
}

.builder-module-navigation li {
    margin-left: 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: transparent;
    color: #FFFFFF;
    font-size: 16px;
}

.builder-module-navigation li a:hover, .builder-module-navigation li.current_page_item a,
.builder-module-navigation li.current-cat a {
    background: #373737;
    color: #FFFFFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

How to customize navigation menu to look like that in Yukon

Yukon demo site for reference

Before

Yukon--menu-before.png

After

Yukon--menu-after.png

Here's how:

1. Download 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

.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;
}

How to remove space between modules

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

.builder-module-background-wrapper {
    margin-bottom: 0;
}

How to remove the line at the bottom of Content module

2013-01-30 09-47-32.png

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

.entry-footer {
    border-top: none;
}

How to Add Search and Social Media Icons in Navigation

Screen Shot 2013-02-14 at 1.21.12 PM.png

1. Download this zip file, extract the contents inside and upload them (search.png and social-media folder) to child theme's images 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:

<?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>

In the above replace Primary with ID or Name or slug of the custom menu that should appear in the navigation.

Set Enable PHP dropdown to Yes.

4. Create a file named searchform.php in child theme's directory having this code.

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

/************************************************************************
 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;
}

In the above, change the number in .builder-module-2 .builder-module-element to the position of HTML module from top in the layout.

If the social icons are appearing below search due to lack of enough width, reduce the width value for input.search-text-box in the above CSS code.

That's it!

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox