Carl02 Template Searchbox in Header

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
TKS
Regular
Posts: 199
Joined: Thu Nov 11, 2004 1:34 am
Location: VA, USA
Contact:

Carl02 Template Searchbox in Header

Post by TKS » Wed May 28, 2008 5:57 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed May 28, 2008 8:44 pm

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
Regular
Posts: 199
Joined: Thu Nov 11, 2004 1:34 am
Location: VA, USA
Contact:

Post by TKS » Wed May 28, 2008 10:07 pm

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
Regular
Posts: 199
Joined: Thu Nov 11, 2004 1:34 am
Location: VA, USA
Contact:

Post by TKS » Wed May 28, 2008 10:08 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed May 28, 2008 11:11 pm

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
Regular
Posts: 199
Joined: Thu Nov 11, 2004 1:34 am
Location: VA, USA
Contact:

Post by TKS » Thu May 29, 2008 5:09 pm

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 :(

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu May 29, 2008 5:23 pm

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
Regular
Posts: 199
Joined: Thu Nov 11, 2004 1:34 am
Location: VA, USA
Contact:

Post by TKS » Thu May 29, 2008 9:17 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu May 29, 2008 9:29 pm

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
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Sun Jun 15, 2008 5:00 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sun Jun 15, 2008 5:10 pm

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

Post Reply