ForumAdvertz

I have seen lots of websites where search boxes have their own shape.

I have tried all different tutorials online to get the same effect for my new search website, but none of them seem to work or i am not doing it properly,

if possible could someone help me do this?

i am using google custom search for it

this request has been filled. i am happy now.

Hi Rich,

I have the search box i wanted now.

http://doversearch.unusualdover.com/

but look at it in IE, Firefox is OK, but IE breaks it and it looks awful,

is there a way to get a decent round ended search box without that problem, i would also like it to be a bit bigger

Here is the code for the search box, i would also like a matching submit button

Code: Select all

<center><!-- Google CSE Search Box Begins  -->
<table cellspacing=0 cellpadding=0><tr>
<td><img src="searchfield_leftcap.png"></td><td>
<form action="http://www.unusualdover.com/doversearch/results.html" id="******************" method="GET" >
  <input type="hidden" name="cx" value="***************************" />
  <input type="hidden" name="cof" value="FORID:11" />
  <input type="text" name="q" style="padding: 3px 0 0 0; font:11px 'Lucida Grande', Geneva, Arial, sans-serif;width: 300px; height: 16px; background: url(searchfield_repeat.png) center top repeat-x; border: 0px; margin: 0;" accesskey="s">
   
</form>

   

      </td><td><img src="searchfield_rightcap.png"></td></tr></table><!-- Google CSE Search Box Ends --></center>

the ******* is where the ID of the search box was, erased for security reasons

I have sorted out the problem with the search box being higher than the end images in IE,

i would like the search box bigger still,

so i found another script online where only one image is used as the background, it seems to work cross browser, but i cant get the thing to work as it should with my google custom search.

Code: Select all

<form action="http://www.unusualdover.com/doversearch/results.html" id="searchbox_015885508608494862564:cqn7_fadke0" method="GET">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:none;">
<div style="background: url(roundbox.gif) no-repeat left top; padding: 0px; height: 40px;">
<input type="text" name="zoom_query"  style="border: none; font:30px 'Lucida Grande', Geneva, Arial, sans-serif;background-color: transparent; width: 300px; height: 40px; padding-left: 5px; padding-right: 5px;">
</div>
</td>
<td style="border-style:none;">
  <input type="hidden" name="cx" value="015885508608494862564:cqn7_fadke0" />
  <input type="hidden" name="cof" value="FORID:11" />
<input type="submit" value="" style="border-style: none; background: url('searchbutton1.gif') no-repeat; width: 81px; height: 40px;">
</td>
</tr>
</table>
</form>

this looks all nice with the search box and images, but doesnt search properly, it takes me to the results page, but with no results

Code: Select all

<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
          <tr>
            <td class="catHead" height="25"><span class="genmed"><b>GOOGLE SEARCH</b></span></td>
          </tr>
          <tr>
            <td class="row1" background="http://i104.photobucket.com/albums/m197/phoebus91587/site%20icons/DonkeyKong_Portal.jpg" align="center">
              <span class="gensmall">
                <br><br><br><br><br><br><br><br><br><br>
                <!-- SiteSearch Google -->
                  <form method="get" action="http://www.google.com/custom" target="google_window">
                  <table border="0">
                  <tr><td nowrap="nowrap" valign="top" align="left" height="32">
                  <input type="hidden" name="domains" value="nintendo.freeforums.org"></input>
                  <label for="ss0" style="display: none">Enter your search terms</label>
                  <input type="text" name="q" size="20" maxlength="255" value="" id="ss1"></input>
                  </td></tr>
                  <tr>
                  <td nowrap="nowrap">
                  <table>
                  <tr>
                  <input type="hidden" name="sitesearch" value="" checked id="ss0"></input>
                  </tr>
                  </table>
                  </input>
                  </td></tr></table>
                  </form>
                 <!-- SiteSearch Google -->
                 
              </span>
            </td>
          </tr>
         
      </table>

Try this. I have a background image of Donkey Kong displayed on this example, but you can change that to whatever you want. To do that, just change the <td class="row1" background=" to whatever picture you want. Also, change the value="nintendo.freeforums.org" to your site link but leave out the

Code: Select all

http://www

Anyway, let me know if this helps.

-Rich

Hi Rich,

i managed to get my first search box to work properly in IE and FF, so no problem now.

i can play with your code a bit i suppose, but would that search box fit in with the http://doversearch.unusualdover.com template?

i have a couple of search boxes now that i need to play with

ill let you know.

Rick

This could be very useful. DO you know if the prophpbb forums have a portal mod?

I once had a similar problem, I made a whole site in FF but then when I looked and it in IE7 not so great!

Good luck, wish I could help but im no good at languages besides html.

You can put an image that matches the theme of your box right next to it. That should create the effect you're looking for.

Thanks. Good tip