IPB

Welcome Guest ( Log In )

 
Reply to this topicStart new topic
> Custom Search Box
lowpriceskates
post Aug 15 2008, 02:50 PM
Post #1





Group: Verified NS Member
Posts: 53
Joined: 7-August 08
Member No.: 1,805



I am trying to get my custom designed search box to work in a way similar to what I've seen on this site: http://berktree.com/
I really like their top search box, but I cannot get it to work on my site.
http://02b8b9e.netsolstores.com

How can I make this work?
Thanks!
Go to the top of the page
 
+Quote Post
ddavisNS
post Aug 15 2008, 02:53 PM
Post #2





Group: Administrators
Posts: 846
Joined: 10-August 07
From: St. Louis
Member No.: 6



QUOTE (lowpriceskates @ Aug 15 2008, 02:50 PM) *
I am trying to get my custom designed search box to work in a way similar to what I've seen on this site: http://berktree.com/
I really like their top search box, but I cannot get it to work on my site.
http://02b8b9e.netsolstores.com

How can I make this work?
Thanks!


What exactly are you trying to emulate as far as the way it is working on that other site? Yours seems to be behaving similarly except for opening in a new window (which I assume you are trying to do because you are calling window.open)
Go to the top of the page
 
+Quote Post
lowpriceskates
post Aug 15 2008, 03:06 PM
Post #3





Group: Verified NS Member
Posts: 53
Joined: 7-August 08
Member No.: 1,805



QUOTE (ddavisNS @ Aug 15 2008, 02:53 PM) *
What exactly are you trying to emulate as far as the way it is working on that other site? Yours seems to be behaving similarly except for opening in a new window (which I assume you are trying to do because you are calling window.open)


I am trying to just make it work as a search box.
I was just showing that other site to show that it can be done.
The way ours is now opening in a new window is just a workaround and no good.
I don't want it to open in a new window, that was just the only way I could get it to work.
What code do I add to make it a functional search box?
Go to the top of the page
 
+Quote Post
AndyT - MC
post Aug 15 2008, 11:53 PM
Post #4





Group: Administrators
Posts: 580
Joined: 22-October 07
From: St. Louis, MO
Member No.: 170



Use the nsScript function to draw it out. You can replace the "custom search" image in the image manger for your active theme.

CODE
<ns:Search type="custom" text="" />
Go to the top of the page
 
+Quote Post
lowpriceskates
post Aug 18 2008, 10:23 AM
Post #5





Group: Verified NS Member
Posts: 53
Joined: 7-August 08
Member No.: 1,805



That just brings up the standard search box.
I need it to have the rounded edges.
The one on http://berktree.com is functional and has this.
How can we make this work? Please help.
Go to the top of the page
 
+Quote Post
lowpriceskates
post Aug 18 2008, 11:32 AM
Post #6





Group: Verified NS Member
Posts: 53
Joined: 7-August 08
Member No.: 1,805



Nevermind, I figured it out myself.

Here's what I did.
I added the following to my custom.css file:
CODE
input#ctl00_ctl02_search {
  background:transparent;
  font-family:Arial, Tahoma;
  font-size:18px;
  font-weight:bold;
  color:#FF0000;
  border:0px;
  width:215px;
  margin-top:5px
}


Then I added the following code where I wanted my search box:
CODE
<table cellspacing="0" cellpadding="3" border="0">
<tbody valign="middle">
<tr>
<td width="300" style="background-position: right; background-image: url(//02b8b9e.netsolstores.com/Images/buttons/search_bg.jpg); background-repeat: no-repeat;">
<div align="right" class="header-search">
<div id="ctl00_ctl02_searchBox" class="custom-search" onkeypress="java script:return WebForm_FireDefaultButton(event, 'ctl00_ctl02_go')">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="custom-search-text"><span></span></td>
<td class="custom-search-field"><input name="ctl00$ctl02$search" type="text" maxlength="100" id="ctl00_ctl02_search" class="textbox" /></td>
<td class="custom-search-button"><input type="image" name="ctl00$ctl02$go" id="ctl00_ctl02_go" src="images/spacer.gif"  width="70" height="28" alt="Search!" style="border-width:0px;" /></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>


The secret is that I added this code to the very bottom of my Header editor:
CODE
<div style="display:none"><ns:Search type="custom" text=""></div>


If you use this, make sure to change the background image to your own.
Hope this helps some people. (IMG:http://forums.networksolutions.com/style_emoticons/default/laugh.gif)
Go to the top of the page
 
+Quote Post
Tektoniq
post Aug 21 2008, 11:45 AM
Post #7





Group: Verified NS Member
Posts: 3
Joined: 18-August 08
Member No.: 1,998



Thanks for posting your code... this is very helpful!

CB
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
Tags
No Tag inserted yet

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

RSS Lo-Fi Version    Network Solutions © 2008 Time is now: 5th December 2008 - 02:20 AM
Domain Names | Web Hosting | Web Design | Shopping Cart Software | Online Marketing | SSL Certificates