Search Box

(10 posts) (5 voices)

1. 

   saudlin
   Member

   I wanted to know how I can get a search box like the one in the sidebar at the top in the header. I've moved the navigation tabs down and would like to have the search box above the nav. tabs?

   Thanks!

   Shawn

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello saudlin,

   The search bar uses an image so unless your header is white it will look kind of weird (like a box). You can try editing the image to make it transparent.

   I have tried doing this for other users wanting to put the search box in their footer but they were not satisfied with the results and I think they opted for a pure CSS solution with no images.

   Would you want to do pure CSS (no images) search box in the header?

   Posted 1 year ago #
3. 

   viccr
   Member

   Hello Elliot, I've just done what you suggested and now I have customized image. You can see it here in the side bar: http://www.netgroup.com.mx/securitiprevio/productos/kerio/kerio-connect/facil-administracion/

   Could you help me in adding it to the header? Below the menu and aligned to the right if it's possible. Thanks

   PS: I love your theme!

   Posted 1 year ago #
4. 

   Elliott
   Support

   Hey viccr,

   Open up /wp-content/themes/infocus/header.php and at the bottom you should see this..

   </div><!-- main_navigation -->
   	</div><!-- inner -->
   </div><!-- header -->

   Change it to look like this..

   </div><!-- main_navigation -->		
   
   <div id="search-4" class="widget scg_widget KerioConnect widget_search"><div class="search-box" style = 'position: absolute; top: 55px; right: 0px;'>
   <form method="get" action="http://www.netgroup.com.mx/securitiprevio/">
   <input type="text" size="15" class="search-field" name="s" id="s" value="Buscar..." onfocus="if(this.value == 'Buscar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar...';}">
   <input type="submit" value="" class="search-go">
   </form>
   </div>
   </div>
   
   	</div><!-- inner -->
   </div><!-- header -->

   Let us know if this works for you viccr.

   Posted 1 year ago #
5. 

   viccr
   Member

   Thanks for your response Elliot, here is the result: http://www.netgroup.com.mx/securitiprevio/productos/kerio/kerio-connect/facil-administracion/

   It is in the correct position, but looks different, I think it probably needs some changes to the styles also... I'll try adding the same styles but with the #header tag

   Posted 1 year ago #
6. 

   saudlin
   Member

   Elliott,

   Thanks the CSS works great I just need to know how to code it for my specific site (like the example above from Viccr. My site is iSEEGlobal.net

   Thanks,

   Shawn

   Posted 1 year ago #
7. 

   Elliott
   Support

   Hello saudlin,

   Add these lines in /wp-content/themes/infocus/style.css

   #header .search-box{
   	background:transparent url(images/searchbar.png) no-repeat scroll left top;
   	height:30px;
   	margin-top:5px;
   	overflow:hidden;
   	width:288px;}
   #header input.search-field{
   	background:transparent none repeat scroll 0 0;
   	border:0 none;
   	float:left;
   	height:25px;
   	margin:0;
   	padding:1px 0 0 14px;
   	line-height:26px;
   	width:232px;
   	color:#666;}
   #header input.search-field:focus{ background:transparent url(images/searchbar.png) no-repeat scroll left -30px;}
   #header input.search-go {
   	background:transparent url(images/searchbar.png) no-repeat scroll right 0;
   	border:0 none;
   	cursor:pointer;
   	float:left;
   	height:30px;
   	margin:0;
   	padding:0;
   	width:42px;}
   #header input.search-go:hover{background-position:right -30px;}

   This will use the image for the search bar. If you need to change the style of your search bar (in the header) then use these lines.

   Let us know if this helps.

   Posted 1 year ago #
8. 

   SanAmsterdam
   Member

   Very nice and elegant solution. Learning alot here. Thanks Elliott.

   San.

   Posted 1 year ago #
9. 

   swanie
   Member

   This thread looks like it's about a year old ... I'm running InFocus 2.3 ... would like to add a search box, much like Awake and have it search pages and posts.

   When I opened header.php, I didn't see the same code.

   How can I do this?

   Thanks in advance

   Posted 7 months ago #
10. 

    Elliott
    Support

    Hello swanie,

    See here for adding stuff to the header, http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header.

    And here for some search form code, http://codex.wordpress.org/Function_Reference/get_search_form.

    Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.