Custom input search box

[Steve]

Replaces the standard phpbb3 search box in the overall header for prosilver and adds the custom search box for subsilver2.When clicked to fill out your search query the round border changes to red/orange depending on style you install it on.

---

prosilver instructions

open styles/prosilver/template/overall_header.html
find:

Code: Select all

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

replace with:

Code: Select all

        <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
	    <div style="float:right;">
	        <form action="{U_SEARCH}" method="post" id="search">
                <fieldset class="search">
	            <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="box" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
	            <button class="btn" value="{L_SEARCH}" type="submit" >&nbsp;</button>
				<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
            </form>
        </div>
        <!-- ENDIF -->

Open styles/prosilver/theme/colours.css
find:

Code: Select all

input.disabled {
	color: #666666;
}

add after:

Code: Select all

/*-- custom search box --*/

fieldset.search {
	border: none;
	float:right;
	width: 243px;
	margin: 10px;
	background: transparent;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #fff;
	font-size: 1.2em;
	width: 190px;
	height: 30px;
	padding: 8px 5px 0 5px ;
	background:  url("{T_THEME_PATH}/images/search_bg.png") no-repeat;
	margin-right: 5px;
}
.search input.box:focus {
	background:  url("{T_THEME_PATH}/images/search_bg.png") no-repeat left -38px;
	outline: none;
}
.search button.btn {
	width: 38px;
	height: 38px;
	cursor: pointer;
	background:  url("{T_THEME_PATH}/images/search_bg.png") no-repeat top right;
}
.search button.btn:hover {
	background:  url("{T_THEME_PATH}/images/search_bg.png") no-repeat bottom right;
}

Upload the search_bg.png image to your styles/prosilver/theme/images folder.
prosilver image

search_bg.png

* note you can create you own custom search bg image
Refresh template and theme.
before:

oldp.PNG

after:

newp.PNG

---

Subsilver2 instructions.
Open styles/subsilver2/template/overall_header.html
find:

Code: Select all

<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>

after add:

Code: Select all

			<td><!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
	    <div style="float:right;">
	        <form action="{U_SEARCH}" method="post" id="search">
                <fieldset class="search">
	            <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="box" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
	            <button class="btn" value="{L_SEARCH}" type="submit" >&nbsp;</button>
                </fieldset>
            </form>
        </div>
        <!-- ENDIF -->
		</td>

open styles/subsilver2/theme/stylesheet.css
find:

Code: Select all

.username-coloured {
	font-weight: bold;
}

after add:

Code: Select all

/*-- custom search box --*/

fieldset.search {
	border: none;
	float:right;
	width: 243px;
	margin: 0 auto;
	background: transparent;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #fff;
	font-size: 1.2em;
	width: 190px;
	height: 30px;
	padding: 8px 5px 0;
	background:  url("./images/search_bg.png") no-repeat;
	margin-right: 5px;
}
.search input.box:focus {
	background:  url("./images/search_bg.png") no-repeat left -38px;
	outline: none;
}
.search button.btn {
	width: 38px;
	height: 38px;
	cursor: pointer;
	background:  url("./images/search_bg.png") no-repeat top right;
}
.search button.btn:hover {
	background:  url("./images/search_bg.png") no-repeat bottom right;
}

Upload the search_bg.png image to your styles/subsilver2/theme/images folder.
subsilver2 image

search_bg.png

* note you can create you own custom search bg image
Refresh template and theme.
pic:

subc.PNG

[cisco007]

nice one Steve!
thanks a bunch!

[GHOSTWRiTAZ]

looks awesome Steve, tnx for sharing m8