Written by on

How to Change the Appearance of Search in iThemes Builder Air Child Theme

By default when Search widget in iThemes Builder child theme, Air looks like this:

Screen Shot 2013-05-03 at 6.08.47 PM

If you would like to use a icon in place of the Search text button with some default placeholder text that goes away when the field gets focus, follow the steps below.

Screen Shot 2013-05-03 at 6.10.57 PM

1) Upload this image to Air’s images directory.

2) Edit Air’s searchform.php. Replace existing content with

<?php $search_box_Air = __( 'Search site', 'it-l10n-BuilderChild-Air' ); ?>

<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>

<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_Air : $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" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_Air; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_Air; ?>';" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'it-l10n-Builder' ); ?>" />
	</div>
</form>

Set your desired placeholder text in the first line. It has been set to Search site.

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

/** styling the search widget in all modules */

.builder-module .widget_search input {
	height: 30px;
	border: 0;
	margin: 0;
	right: 0;
	float: left;
}
.builder-module .widget_search input[type="text"] {
	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%;
	background: #FFFFFF;
	border: 1px solid #D1D1D1;
	color: #888888;
	-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
			  border-radius: 3px;
}
#searchform input[type="text"] {
    width: 99.5%;
    font-size: 0.9em;
}
.builder-module .widget_search input[type="text"]: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;
}
.builder-module .widget_search input[type="submit"] {
	width: 22px;
	height: 22px;
	margin-top: 6px !important;
	margin-left: -25px !important;
	background: url('images/search.png') no-repeat;
	text-indent: -9999px;
}
#searchform input[type="submit"] {
    width: 22px;
    padding: 13px;
}
.builder-module .widget_search input[type="submit"]:hover {
	cursor: pointer;
}
.builder-module .right .widget_search,
.builder-module .left .widget_search {
	float: right;
}
.builder-module .builder-module-sidebar .widget_search {
	width: 95%;
	/*padding: 0;*/
	background: none;
	border: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.builder-module-1 .builder-module-sidebar .widget-background-wrapper {
    margin-bottom: 0.7em;
}

.builder-module-1 .right .builder-module-sidebar {
    margin-top: 0.8em;
}

That’s it.

Comments

Respond

×

Ends Today! Save 35% off BackupBuddy with coupon code BACKUPWP35