Search over Header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
farhan91
Registered User
Posts: 24
Joined: Sat Feb 21, 2009 4:44 pm

Search over Header

Post by farhan91 » Tue Mar 17, 2009 3:59 pm

Hey can someone help me put a search on top of my logo image. I am using http://demo.phpbb3styles.net/AnimeZone as my theme and would like to do what it shown in http://demo.phpbb3styles.net/AeroBlack theme. They are both subsilver2 but I want to be able to add that search on my AnimeZone theme.

Please and Thank You! :D

User avatar
pentapenguin
Former Team Member
Posts: 11030
Joined: Thu Jul 01, 2004 4:15 am
Location: GA, USA

Re: Search over Header

Post by pentapenguin » Tue Mar 17, 2009 4:29 pm

This is the basic code for the search box:

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 -->
However, to place it with rounded corners and very fancy look requires a good bit of CSS work. I would recommend learning some CSS so you can tweak it.
Support Resources: Support Request Template
If you need professional assistance with your board, please contact me for my reasonable rates.

farhan91
Registered User
Posts: 24
Joined: Sat Feb 21, 2009 4:44 pm

Re: Search over Header

Post by farhan91 » Tue Mar 17, 2009 4:52 pm

how would i just put the search code over the header with no fancy features just aligned to the top right corner of the header?

farhan91
Registered User
Posts: 24
Joined: Sat Feb 21, 2009 4:44 pm

Re: Search over Header

Post by farhan91 » Tue Mar 17, 2009 7:21 pm

http://i42.tinypic.com/30iugkh.jpg

This is what I want on my theme! Also locked in place. :D

User avatar
ric323
Former Team Member
Posts: 22909
Joined: Tue Feb 06, 2007 12:33 am
Location: Melbourne, Australia
Name: Ric
Contact:

Re: Search over Header

Post by ric323 » Tue Mar 17, 2009 9:35 pm

-- moved from General Support to "Styles Support & Discussion"
The Knowledge Base contains solutions to many common problems!
How to fix "Doesn't have a default value" and "Incorrect string value: xxx for column 'post_text' " errors.
How to do a clean re-install of the latest phpBB3 version.
Problems with permissions? Read phpBB3 Permissions

farhan91
Registered User
Posts: 24
Joined: Sat Feb 21, 2009 4:44 pm

Re: Search over Header

Post by farhan91 » Wed Mar 18, 2009 4:52 pm

Code: Select all

Topic Bumped - Please Help

farhan91
Registered User
Posts: 24
Joined: Sat Feb 21, 2009 4:44 pm

Re: Search over Header

Post by farhan91 » Thu Mar 19, 2009 6:40 pm

Code: Select all

Topic Bumped Again! 
Someone please help, i need this really bad. :(

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

Re: Search over Header

Post by prototech » Sat Mar 21, 2009 12:19 am

In overall_header.html, find:

Code: Select all

		<table width="100%" cellspacing="0">
		<tr>
			<td align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
		</tr>
		</table>
Replace with:

Code: Select all

	<div class="header">
	<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
        <form action="{U_SEARCH}" method="post" id="search" class="search-box"">
            <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 value="{L_SEARCH}" type="submit" /> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
    	</form>
      <!-- ENDIF -->	
	</div>
In stylesheet.css, find:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #FFFFFF;
	background-color: #000000;
	background-position: center;
	background-image: url('./images/body_bg.jpg');
	
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
	padding: 0 5px;
}
After, add:

Code: Select all

.header {
	background: url("../imageset/logo.jpg") 0 center no-repeat;
	width: 870px;
	margin: 0 auto;
	height: 127px;
}

.search-box {
	float: right;
	margin: 10px;
}

.search-box fieldset {
	border: 0;
} 
Refresh your template - ACP => Styles => Style Components => Templates.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

Locked

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