Search Box & Posts Widgets

naderamer

I have 2 issues and need your help please, 1st I want to put the search box in the side bar [it only appears when I click the search icon in the header, I need it to be displayed always].

2nd I want to display posts from defined category like most recent or most popular widget.

Air

Hi,

Search:
Edit airlock/common/css/style-light.css and (if you use) style-dark.css
we find such block of code

#header .search-form{
	float: right;
	padding: 63px 0 0;
}
#header .search-form .search-left{
	float: left;
	width: 16px;
	height: 32px;
	background: url(../gfx/light/search-left.png) 0 0 no-repeat;
	position: relative;
}
#header .search-form .search-left label{
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background: url(../gfx/light/search-label.png) 50% 50% no-repeat;
}
#header .search-form .search-right{
	float: left;
	height: 32px;
	background: url(../gfx/light/search-right.png) 100% 0 no-repeat;
	padding: 0 16px 0 0;
}
#header .search-form .search-right div{
	height: 32px;
	overflow: hidden;
	width: 150px;
}
#header .search-form input[type="text"]{
	width: 120px;
	padding: 0 5px;
	font-size: 15px;
	color: #fff;
	background-color: transparent;
	border: none;
	height: 32px;
}
#header .search-form input[type="submit"]{
	display: none;
}
#header .search-form .close{
	float: right;
	height: 32px;
	width: 9px;
	background: url(../gfx/light/search-close.png) 0 50% no-repeat;
	cursor: pointer;
}

, and we remove #header form every rule so it becomes:

.search-form{
	float: right;
	padding: 63px 0 0;
}
.search-form .search-left{
	float: left;
	width: 16px;
	height: 32px;
	background: url(../gfx/light/search-left.png) 0 0 no-repeat;
	position: relative;
}
.search-form .search-left label{
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background: url(../gfx/light/search-label.png) 50% 50% no-repeat;
}
.search-form .search-right{
	float: left;
	height: 32px;
	background: url(../gfx/light/search-right.png) 100% 0 no-repeat;
	padding: 0 16px 0 0;
}
.search-form .search-right div{
	height: 32px;
	overflow: hidden;
	width: 150px;
}
.search-form input[type="text"]{
	width: 120px;
	padding: 0 5px;
	font-size: 15px;
	color: #fff;
	background-color: transparent;
	border: none;
	height: 32px;
}
.search-form input[type="submit"]{
	display: none;
}
.search-form .close{
	float: right;
	height: 32px;
	width: 9px;
	background: url(../gfx/light/search-close.png) 0 50% no-repeat;
	cursor: pointer;
}

after it we add such code

.widget_search .search-form{
    padding: 0;
}
.widget_search .search-form .search-right{
    padding-right: 12px;
    padding-left: 16px;
}

Next we have to fix Edit airlock/common/js/scripts.js

$('form.search-form .search-right div').hide();

change to:

$('#header').find('form.search-form .search-right div').hide();

Air

About making such widget- don't have time to make it now. I would advice to use Related posts widget. It looks for posts that have same category as view post.

With regards.

naderamer

thx