Adding search box in in the header using a custom template

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

Re: Adding search box in in the header using a custom templa

Post by pinoynds »

up
User avatar
Josh
Former Team Member
Posts: 1882
Joined: Sun Jan 25, 2009 3:08 pm
Location: Melbourne, AUS
Name: Josh Simpson
Contact:

Re: Adding search box in in the header using a custom templa

Post by Josh »

upload these two images to the /theme/images/ directory
Image Image

open stylesheet.css
search

Code: Select all

.searchbox .btnlite {
   border-color: #C17000;
}
replace with

Code: Select all

.searchbox .btnlite {
	background-image: url("../theme/images/bg_button.gif");
	border-color: #0075b0;
}

.searchbox .btnlite:hover {
	background-position: 0 15px;
	color: #0075b0;
}
 
input.search {
	background-image: url("../theme/images/icon_textbox_search.gif");
	background-repeat: no-repeat;
	background-position: 1px 1px;
	padding: 2px 2px 2px 18px;
	border-color: #0075b0;
	width: 95px;
}
open overall_header.html

Code: Select all

   <div id="logodesc">
   <!-- IF S_DISPLAY_SEARCH -->
      <form action="{U_SEARCH}" method="post" class="searchbox">
         <fieldset>
            <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" 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="btnlite" 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>
   <!-- ENDIF -->
   </div>
replace with

Code: Select all

   <div id="logodesc">
   <!-- IF S_DISPLAY_SEARCH -->
      <form action="{U_SEARCH}" method="post" class="searchbox">
         <fieldset>
            <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="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="btnlite 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>
   <!-- ENDIF -->
   </div>
Josh Simpson- Formerly known as "HardStyle"
Styles: Submission Policy | Database | Knowledge Base | Demo
Please do not PM me for personal support.
Image
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

Re: Adding search box in in the header using a custom templa

Post by pinoynds »

thank you very much kind sir!
Locked

Return to “[3.0.x] Styles Support & Discussion”