Revision as of 06:17, October 26, 2011

Demo Site

How to style navigation menu in non Header module

When a Custom Menu widget is used in Header module, it gets styled automatically as can be seen in the demo site.

To get the same styling working in a non Header module, like say, a widget bar module, add this CSS code at end of your child theme's style.css.

Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.

How to set default text in search field

Create a file named searchform.php in the child theme directory having this code:

<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Acute-Blue' ); ?>
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
<form role="search" method="get" id="searchform" action="<?php echo get_option( 'home' ); ?>/">
	<div>
		<input type="text" value="<?php echo $search_box_value; ?>" name="s" id="s" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Acute-Blue' ); ?>" />
	</div>
</form>

In the above, change

1. Search site to the text that you would like to appear by default in the search box.
2. it-l10n-BuilderChild-Acute-Blue to indicate the particular color variation of Acute. This is only for translation purpose.

How to add a logo in the header module

1. Edit the layout(s), edit the Header module and add a left sidebar that is at least as wide as the logo.

Ex.:

For a logo that's 113px wide, here's a screenshot of the module being edited

2. At Appearance -> Widgets, add a text widget into the sidebar of this header module having the code needed to display logo.

Ex.:

<a href="http://localhost/builder3"><img src="http://localhost/builder3/wp-content/themes/BuilderChild-Acute-Blue/images/logo.png" width="113" height="113" alt="home" /></a>

Note: In the above, change the URLs appropriately.

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

.right .site-title, .right .site-tagline {
    text-align: left;
}

.builder-module-1 .builder-module-sidebar {
    padding-top: 0;
    padding-bottom: 0;
}

.builder-module-1 .widget {
    padding: 0;
}

Item 4