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.
Anti-Spam Guide
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

Adding search box in in the header using a custom template

Post by pinoynds »

I'm currently using xandblue template right now, and I'm wondering, how do you add a search box within a header?

What I'm talking about is shown here: http://pinoypsx.com/

How exactly do you do that? Thanks. :)
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

anyone?
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

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

Post by prototech »

Is the image in the header the default one that comes with xand?
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

yes, but i'm also planning to change it if time permits, but will be of the same dimensions.
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

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

Post by prototech »

In stylesheet.css, find:

Code: Select all

#logodesc {
	padding: 10px 0 0 0;
	border-bottom: 1px solid #FFB14C;
}
Replace with:

Code: Select all

#wrapheader {
	padding-top: 10px;
}

#logodesc {
	background: url("../imageset/top.gif") no-repeat 0 0;
	height: 90px;
	position: relative;
	display: block;
	padding: 10px 0 0 0;
	border-bottom: 1px solid #FFB14C;
}

.searchbox {
	float: right;
	margin-right: 10px;
}

.searchbox fieldset {
	border: 0;
}

.searchbox .btnlite {
	border-color: #C17000;
}
In overall_header.html, find:

Code: Select all

	<div id="logodesc">
		<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
	</div>
Change to:

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>
Refresh your template - ACP => Styles => Templates.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

edit: thanks, it worked! Just another question, how do I move the text 'advanced search' to the right side of the search box?

Also, is there a way to keep the logo 'clickable'? i mean returning back to the main index when click on it and still having a search box beside it.
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

up
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

please anyone?
pinoynds
Registered User
Posts: 45
Joined: Thu Jan 07, 2010 5:15 pm

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

Post by pinoynds »

bump
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 »

bump
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 »

bump
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
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 »

please, anyone?
n00b2010
Registered User
Posts: 21
Joined: Sat Feb 06, 2010 6:14 pm

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

Post by n00b2010 »

Okay, im not sure, but you can try this and see what happens..

Notice prototech removed the anchor. You can add..

Code: Select all

<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
back underneath..

Code: Select all

   <div id="logodesc"> 

This is what you just added, try removing the <br /> and replace it with &nbsp; which should be a space. You may also want to try to remove display: block; in your stylesheet.css.

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>
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 »

tried putting the anchor back, but it now shows 2 headers. its like the "<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>" line overlaps the non-clickable header behind.. and the search box is now out of place.
Locked

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