Page 1 of 1
Carl02 Template Searchbox in Header
Posted: Wed May 28, 2008 5:57 pm
by TKS
Not being even close to a themer/skinner/template designer at all...I figured I'd ask everyone else for help.
I'd like to place a searchbox for my users that uses google to search my site. I've already got search working with results displayed ON the blog here:
http://linux-blog.org/index.php?/pages/advsearch.html
That's a static page using the static page plugin.
Now my idea is to get rid of that link and static page and place the searchbox up on the header on the right hand side above the 'about' box that does the same thing as my search page.
I just don't know how to do it.
You can find Carl02 here:
http://www.carlgalloway.com/pages/seren ... lates.html
Posted: Wed May 28, 2008 8:44 pm
by Don Chambers
This is going to come real close.... only tested interactively, not on the actual template.
You need to open the template's index.tpl file.... and find this:
Code: Select all
<div id="identity" class="idblue">
<h1><a class="homelink1" href="http://linux-blog.org/">Advanced Search</a></h1>
<h2><a class="homelink2" href="http://linux-blog.org/">Yet Another Linux Blog</a></h2>
</div>
And replace it with something like this:
Code: Select all
<div id="identity" class="idblue">
<div id="identity-left" style="float: left; clear: left; width: 595px;">
<h1><a class="homelink1" href="http://linux-blog.org/">Advanced Search</a></h1>
<h2><a class="homelink2" href="http://linux-blog.org/">Yet Another Linux Blog</a></h2>
</div>
<div id="identity-right" style="float:right; clear: right; width: 367px;">
<form method="get" action="http://linux-blog.org/index.php">
<input type="hidden" value="Results" name="serendipity[subpage]" />
<table border="0" style="background: url(templates/carl02/img/bluebg.png) repeat-x scroll left top">
<tbody>
<tr>
<td valign="top" nowrap="nowrap" height="32" align="left">
<a href="http://www.google.com/"><img border="0" align="middle" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif" /></a>
</td>
<td nowrap="nowrap">
<label style="display: none;" for="sbi">Enter your search terms</label>
<input type="text" id="sbi" maxlength="255" size="31" name="q" />
<label style="display: none;" for="sbb">Submit search form</label>
<input type="submit" id="sbb" value="Search" name="sa" />
</td>
</tr>
<tr>
<td></td>
<td nowrap="nowrap">
<table>
<tbody>
<tr>
<td>
<input type="radio" id="ss0" name="sitesearch" />
<label title="Search the Web" for="ss0"><font size="-1" color="#000000">Web</font></label>
</td>
<td>
<input type="radio" id="ss1" checked="true" value="linux-blog.org" name="sitesearch" />
<label title="Search linux-blog.org" for="ss1"><font size="-1" color="#000000">linux-blog.org</font></label>
</td>
</tr>
</tbody>
</table>
<input type="hidden" value="pub-3982453702542240" name="client" />
<input type="hidden" value="1" name="forid" />
<input type="hidden" value="7810157538" name="channel" />
<input type="hidden" value="ISO-8859-1" name="ie" />
<input type="hidden" value="ISO-8859-1" name="oe" />
<input type="hidden" value="active" name="safe" />
<input type="hidden" value="GALT:#008000;GL:1;DIV:#33628C;VLC:663399;AH:center;BGC:FFFFFF;LBGC:33628C;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:11" name="cof" />
<input type="hidden" value="en" name="hl" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Now, all those inline style="whatever" can be relocated to your style.css file. Everything might need a bit of tweaking too - and you might not like Google's logo on that blue background.
Posted: Wed May 28, 2008 10:07 pm
by TKS
So here is what I did...
I noticed that google has changed their custom search results program...so I went through and redesigned a search form.
I then used yours as base to change my index.tpl. However, I am using a standard non-highlighting text editor :/ So it's probably ugly. I'm open to what I need and don't need or any closed/unclosed tags:
Code: Select all
<div id="identity" class="idblue">
<div id="identity-left" style="float: left; clear: left; width: 595px;">
<h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></h1>
<h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>
<div id="identity-right" style="float:right; clear: right; width: 365px;">
<table border="0" style="background: url(templates/carl02/img/bluebg.png) repeat-x scroll left top">
<tbody>
<tr>
<td nowrap="nowrap">
<div style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" class="cse-branding-bottom">
<div class="cse-branding-form">
<form id="cse-search-box" action="http://linux-blog.org/index.php?/pages/results.html">
<div>
<input type="hidden" value="partner-pub-3982453702542240:xfqn64avi9o" name="cx" />
<input type="hidden" value="FORID:11" name="cof" />
<input type="hidden" value="Results" name="serendipity[subpage]" />
<input type="text" size="25" name="q" />
<input type="submit" value="Search" name="sa" />
</div>
</form>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="mainpane">
Thanks for the help
Posted: Wed May 28, 2008 10:08 pm
by TKS
Oh, one thing...How do I get some space on top of the form..that is, how can I center it vertically?
Posted: Wed May 28, 2008 11:11 pm
by Don Chambers
Try adding some margin-top value to the form (or its parent table).
Also, you are opening 2 divs with the same id... ie, you have one too many:
Code: Select all
<div id="identity" class="idblue">
The new code in general looks to contain a lot of excess divs, but maybe the original did as well.. I really didn't pay much attention. I also preferred the checkbox for searching the site or web, but perhaps that is personal preference. Looks like you can adjust the relative widths of the 2 identify (left & right) divs if you do not need the form to be so wide... that will leave more room for the left text.
Posted: Thu May 29, 2008 5:09 pm
by TKS
adding that margin to the div that holds the search form doesn't seem to work.
This is why I hate CSS :/ Nothing ever makes sense with it
Posted: Thu May 29, 2008 5:23 pm
by Don Chambers
Try adding top margin to the table that contains the google code.... it already has "style="background blah blah"....
You still have that extra <div id="identity" class="idblue"> in there too.
Posted: Thu May 29, 2008 9:17 pm
by TKS
No dice on the style...it is not honoring it. I can only find one instance of <div id="identity" class="idblue"> in my style.css
Posted: Thu May 29, 2008 9:29 pm
by Don Chambers
The extra div is not in style.css..... it is in your index.tpl:
Code: Select all
<div id="wrapperbluegreen">
<div id="identity" class="idblue">
<div id="identity" class="idblue">
<div id="identity-left" style="float: left; clear: left; width: 595px;">
And as long as you are editing index.tpl, look for the table:
<div id="identity-right" style="float:right; clear: right; width: 365px;">
<table border="0" style="background: url(templates/carl02/img/bluebg.png) repeat-x scroll left top">
And add some top margin to it:
Code: Select all
<div id="identity-right" style="float:right; clear: right; width: 365px;">
<table border="0" style="margin-top: 20px; background: url(templates/carl02/img/bluebg.png) repeat-x scroll left top">
Posted: Sun Jun 15, 2008 5:00 pm
by carl_galloway
Thanks Don, Sorry I didn't pick up this thread till now.
Posted: Sun Jun 15, 2008 5:10 pm
by Don Chambers
No problem Carl - just glad to see you still dropping on the forums! Hope all is well.
