PhpBB3 BBCodes

Posted: **22 Jul 2010, 15:42**

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

Posted: **22 Jul 2010, 18:01**

nice one Steve!
thanks a bunch!

Posted: **22 Jul 2010, 19:22**

looks awesome Steve, tnx for sharing m8

PhpBB3 BBCodes

Custom input search box

Custom input search box

Re: Custom input search box

Re: Custom input search box