Search Bar Coding

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>

Select allOpen 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>

Select allOpen in new window

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?

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
}

Select allOpen 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
}

Select allOpen in new window

The Default Thumbnail code should be found in your search.php file in your theme folder.  Just remove the applicable code.

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(); ?>

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(); ?>

Select allOpen in new window

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>

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>

Select allOpen in new window

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.

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?

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.

You mean like you have it in Firefox?

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.

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>

Select allOpen in new window

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.

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.

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.

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

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 ?

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>

Select allOpen 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>

Select allOpen 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.

Ok. Great. Thanks for all the support. I will go with basic (current) settings as of now.

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.