[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 361
  • Last Modified:

Search Bar Coding

HI,

With reference to the site http://secureinfo.info, i need to create a search bar in the header of the site. I tried the Google Search bar option, but I would like to use the theme's search option. The search bar option in the theme is for a sidebar (currently disabled). I want it in the header.

I can provide you the related .php files. Attached is the current header file and the layout file where i feel the search function is located. If you need any other files do let me know. header.php
layout.css
0
ujitnos
Asked:
ujitnos
  • 12
  • 10
1 Solution
 
OmniUnlimitedCommented:
To use the theme's search feature just change this:
 
<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form action="http://secureinfo.info/search-results" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-8gff23193:71gfgf03104" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

</TD></TR>
</TABLE>

Open in new window


to this:
 
<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>
</TD></TR>
</TABLE>

Open in new window

0
 
ujitnosAuthor Commented:
Ok, great.

Now can i increase the size of the search bar and may be add some style to the bar itself?

All results seem to contain a "Default Thumbnail" link, how can i remove this?
0
 
OmniUnlimitedCommented:
Yes, are you not aware as to how to apply styles to the elements?

You can adjust the size of the textbox by adjusting its width:
 
form#searchform input#s
{
     width: 300px; // adjust to your taste
}

Open in new window


The searchbutton could be customized by adding a style for that as well:
 
form#searchform input#searchsubmit
{
     color: #F00; // or whatever style you want to put on it
}

Open in new window


The Default Thumbnail code should be found in your search.php file in your theme folder.  Just remove the applicable code.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ujitnosAuthor Commented:
sorry i am not into coding and have no clue about it.

So i just paste the above code into the initial code for search ?

the search.ph's content do not seem to contain the Default Thumbnail info.

<?php
/*
Template Name: Search Result
*/
?>
<?php get_header(); ?>

<div id="content" class="content-group content-search">
      <div class="pad">
            <div class="post-group">
                  <h1 class="title">Search Results for: <?php echo get_search_query(); ?></h1>      
                  <?php get_template_part('loop','search'); ?>
            </div>
      </div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
0
 
OmniUnlimitedCommented:
No, your seach.php has been modifed to use a template.  The default thumbnail is in the template.

To save yourself a bunch of headaches (since you don't know code), empty out your search.php file and put the following code in its place:

<?php
/**
 * @package WordPress
 */

get_header(); ?>

	<div id="content_container" class="narrowcolumn">
		<div id="content">
           	<div class="page_top"></div>
        	<div class="standard_page">

	<?php if (have_posts()) : ?>

		<h2 class="pagetitle">Search Results</h2>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>


		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class() ?>>
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				<small><?php the_time('l, F jS, Y') ?></small>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">No posts found. Try a different search?</h2>
		<?php get_search_form(); ?>

	<?php endif; ?>

		</div>
		<div class="page_btm"></div>
	</div></div>

<?php get_footer(); ?>

Open in new window

0
 
ujitnosAuthor Commented:
HI Omni, thanks for the code, but i managed to remove the Default Thumbnail from the search template.

Please confirm where i need to put in the width and style code in...

<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>
</TD></TR>
</TABLE>
0
 
OmniUnlimitedCommented:
Ok, if you don't know about styles and CSS files, the best way of handing this would be to use inline styles.  In the following code, I give you an example of how to change the width of the textbox and the color of the submit button:

<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" style="width: 300px;" />
        <input type="submit" id="searchsubmit" value="Search" style="color: #F00;" />
    </div>
</form>
</TD></TR>
</TABLE>

Open in new window

0
 
ujitnosAuthor Commented:
So Omni, how do you think the search bar has come along. Does it look good ?

I find that in IE the "search" button becomes bigger than the input section.
0
 
OmniUnlimitedCommented:
No, you need some more help with CSS.  Where do you want the bar to be located, and how big do you want it to be?
0
 
ujitnosAuthor Commented:
i just want the bar to be good and in line with the site heading. I would also like the bar's height to be a bit more than the current one.
0
 
OmniUnlimitedCommented:
You mean like you have it in Firefox? Your site in Firefox
0
 
ujitnosAuthor Commented:
yes kind of. Even in firefox, i would like the height to be a bit more. Please suggest any other recommendations that you might have. In IE the button size is an issue.
0
 
OmniUnlimitedCommented:
Yeah, IE has problems with inline elements.  Try setting the form elements inside a table:
 
<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<table><tbody><tr>
    <td><label class="screen-reader-text" for="s">Search for:</label></td>
        <td><input type="text" value="" name="s" id="s" style="width: 300px;" /></td>
        <td><input type="submit" id="searchsubmit" value="Search" style="color: #F00;" /></td>
</tr></tbody></table>    
</form>
</TD></TR>
</TABLE>

Open in new window

0
 
ujitnosAuthor Commented:
ok.. replace the code with the above one. seems to be the same, no change.

If you go to this link; http://secureinfo.info/firewalls/checkpoint-commnads (or other posts) the search bar seems to come down. The only difference here is that these links are "posts" and not a "page" in wordpress.
0
 
OmniUnlimitedCommented:
No, no significant changes were supposed to happen with the code I just gave you.  I just wanted you to have a structure in which you could make changes.

The problem you are having on is because you have not set the search bar in the right place.  The search bar should go inside the div with classes pad append-clear which is inside your container and header div's.

Move the search bar to its proper place, then we can play with the CSS.
0
 
OmniUnlimitedCommented:
Sorry, I meant to say:

The problem you are having on http://secureinfo.info/firewalls/checkpoint-commnads is because you have not set the search bar in the right place.  The search bar should go inside the div with classes pad append-clear which is inside your container and header div's.

0
 
ujitnosAuthor Commented:
I am sorry,  but can you give me the changes (div with classes pad...) that i need to do, as i said am not into coding :(
0
 
OmniUnlimitedCommented:
OK, I'll try to make it simple.  You have coding on your page that looks something like this:
 
<body class="single single-post postid-109 single-format-standard">
<TABLE style="position:absolute; top:55px;right:150px">
<TR><TD>
<form role="search" method="get" id="searchform" action="http://secureinfo.info/">
<table><tbody><tr>
    <td><label class="screen-reader-text" for="s">Search for:</label></td>

        <td><input type="text" value="" name="s" id="s" style="width: 300px;" /></td>
        <td><input type="submit" id="searchsubmit" value="Search" style="color: #F00;" /></td>
</tr></tbody></table>    
</form>
</TD></TR>
</TABLE>


<div id="container">

	<p class="no-display"><a href="#skip-to-content">Skip to content</a></p>	
	
	<div id="header">
		<div class="pad append-clear">		
			<div class="box box-masthead">

								<p class="title"><a href="http://secureinfo.info">SecureInfo &#8211; The CIA Principles</a></p>
				<p class="description">Parts and Pieces in Information Security</p>
			         </div>	
                                    </div>
		</div>
	</div>

	<div id="menubar">

Open in new window


It needs to look more like this:
 
<body class="single single-post postid-109 single-format-standard">
<div id="container">

	<p class="no-display"><a href="#skip-to-content">Skip to content</a></p>	
	
	<div id="header">
		<div class="pad append-clear">		
                     <table style="position:absolute; top:55px;right:150px">
                     <tr><td>
                     <form role="search" method="get" id="searchform" action="http://secureinfo.info/">
                       <table><tbody><tr>
                          <td><label class="screen-reader-text" for="s">Search for:</label></td>

                          <td><input type="text" value="" name="s" id="s" style="width: 300px;" /></td>
                          <td><input type="submit" id="searchsubmit" value="Search" style="color: #F00;" /></td>
                         </tr></tbody></table>    
                         </form>
                         </td></tr>
                         </table>
			<div class="box box-masthead">

								<p class="title"><a href="http://secureinfo.info">SecureInfo &#8211; The CIA Principles</a></p>
				<p class="description">Parts and Pieces in Information Security</p>
			         </div>	
                                    </div>
		</div>
	</div>

	<div id="menubar">

Open in new window

0
 
ujitnosAuthor Commented:
Ok Omni, I replaced the code with the one that you mentioned above and issue with the bar coming down in a web post seems to be solved.

So, what else do you recommend with style CSS ?
0
 
OmniUnlimitedCommented:
OK, well it looks like you are ready to start playing with the CSS.  On the imputs for your search bar, you see where I placed styles?  You can see them where it says style="some style" in the code below?
<td><input type="text" value="" name="s" id="s" style="width: 300px;" /></td>
                          <td><input type="submit" id="searchsubmit" value="Search" style="color: #F00;" /></td>

Open in new window


Why don't you start by adding height: 25px; to both of them and see how that looks:
 
<td><input type="text" value="" name="s" id="s" style="width: 300px; height: 25px;" /></td>
                          <td><input type="submit" id="searchsubmit" value="Search" style="color: #F00; height: 25px;" /></td>

Open in new window


A list of CSS properties can be found here:

http://www.w3schools.com/cssref/default.asp

I would recommend that you just play with them and see what properties will get you the effects you desire.
0
 
ujitnosAuthor Commented:
Ok. Great. Thanks for all the support. I will go with basic (current) settings as of now.
0
 
OmniUnlimitedCommented:
Ok. Thank you.  You can let me know if you have any further issues by posting a related question in the future (simply click on the link that says, "ask a related question" above the comment box at the bottom.)

Please do not forget to close out this question.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 12
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now