BuilderChild-Depot

iThemes Builder child theme Depot demo site

How to get search in Image module to look like that in Header or HTML module

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

/** search widget in image module */
.builder-module-image .builder-module-sidebar .widget_search {
	padding: 0;
	margin-top: 30px;
	margin-right: 1.5em;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: #EEEEEE 1px 1px 3px;
	-moz-box-shadow: #EEEEEE 1px 1px 3px;
	box-shadow: #EEEEEE 1px 1px 3px;
}
.builder-module-image .widget_search .widget-title {
	display: none;
	visibility: hidden;
}
.builder-module-image .widget_search input {
	height: 25px;
	border: 0;
	margin: 0;
	right: 0;
	float: left;
}
.builder-module-image .widget_search input[type="text"] {
	background: #F1F1F1;
	background: -webkit-linear-gradient(#F1F1F1, #FEFEFE);
	background: -moz-linear-gradient(#F1F1F1, #FEFEFE);
	background: -ms-linear-gradient(#F1F1F1, #FEFEFE);
	background: -o-linear-gradient(#F1F1F1, #FEFEFE);
	background: linear-gradient(#F1F1F1, #FEFEFE);
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 20px 0 0 20px;
	-moz-border-radius: 20px 0 0 20px;
	border-radius: 20px 0 0 20px;
}
.builder-module-image .widget_search input[type="text"]:focus {
	background:#FFFFFF;
	color: #333333;
}
.builder-module-image .widget_search input[type="submit"] {
	display: block;
	width: 35px;
	height: 25px;
	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
	border: 1px solid #CCCCCC;
	border-left: 0;
	text-indent: -9999px;
	text-transform: capitalize;
	-webkit-border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0;
	border-radius: 0 20px 20px 0;
}
.builder-module-image .widget_search input[type="submit"]:hover {
	cursor: pointer;
	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
	-webkit-box-shadow: inset #DDDDDD 0 0 12px;
	-moz-box-shadow: inset #DDDDDD 0 0 12px;
	-o-box-shadow: inset #DDDDDD 0 0 12px;
	box-shadow: inset #DDDDDD 0 0 12px;
}
.builder-module-image .widget_search input[type="submit"]:active {
	-webkit-box-shadow: inset #AAAAAA 0 0 2px;
	-moz-box-shadow: inset #AAAAAA 0 0 2px;
	-o-box-shadow: inset #AAAAAA 0 0 2px;
	box-shadow: inset #AAAAAA 0 0 2px;
}
.builder-module-image .right .widget_search {
	float: right;
}