Solved

Search Bar Coding

Posted on 2011-09-05
22
345 Views
Last Modified: 2012-05-12
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
Comment
Question by:ujitnos
  • 12
  • 10
22 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
You mean like you have it in Firefox? Your site in Firefox
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 500 total points
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
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
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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
 
LVL 10

Author Comment

by:ujitnos
Comment Utility
Ok. Great. Thanks for all the support. I will go with basic (current) settings as of now.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now