Carl02 Template Searchbox in Header

[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

[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.

[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

[TKS]

Oh, one thing...How do I get some space on top of the form..that is, how can I center it vertically?

[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.

[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

[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.

[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

[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">

[carl_galloway]

Thanks Don, Sorry I didn't pick up this thread till now.

[Don Chambers]

No problem Carl - just glad to see you still dropping on the forums! Hope all is well.