BuilderChild-Depot

From IThemes Codex
Revision as of 10:16, January 5, 2012 by Sridhar (Talk | contribs)
Jump to: navigation, search

iThemes Builder child theme Depot demo site

Contents

Video overview of modules used in the layout for homepage

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

05-01-2012 21-44-38.png

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

Entry 3

Entry 4

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox