How can I give the default search widget a style?

put it into a table. that way you add images and margins and such.

I use tables to add elements in specific positions surrounding my posts.(it was the only answer I could find that allowed me to place two things on one line) I am at https://www.widgetslab.com

w3schools has a try it out and perfect it before you pop it into your template feature. Basically you make changes to the code and click the button to see what happens. Do this until you are satisfied…then paste the code into your template.

look for the more examples section 3/4 down the page at w3schools/html/tables

Layout with tables is bad. Bad, bad, bad.

And the search widget is already in divs and has id’s and such. If you want to style it, then just do so by adding stuff to your CSS file.

#searchform div {
// The div it's in
}
#searchform #s {
// the search text box
}

deralaand, that’s fine but I dont know where to add the table. where is the widget code for the search box?

otto42,
according to web developer tool bar, there is no CSS divs/classes attached to the search bar. I tried your code but it did not work.

Any other ideas? Thanks.

there is no CSS divs/classes attached to the search bar.

Sure there is. I see it right now:

<ul class=”sidebar_list”>
<li id=”search” class=”widget widget_search”> <form id=”searchform” method=”get” action=”https://niftytutorials.com”&gt;
<div>
<input type=”text” name=”s” id=”s” size=”15″ />
<input type=”submit” value=”Search” />
</div>
</form>

That’s just the form. You have all of that stuff ready – it might not be in your stylesheet, but it’s not that difficult to put it in there. Otto’s example is even correct:

form id=”searchform”

input type=”text” name=”s” id=”s”

Exactly what Otto said, and it’s right there in your code.

I tried your code but it did not work.

Then you didn’t try it correctly, because it clearly *does* work.

Example: Add this to the CSS file:

#searchform div {
text-align:center;
}

See how the search box and button is now centered in its column?

It sounds like you don’t know CSS too well. Is this the case? Perhaps a CSS tutorial would help?

ok, my fault guys. the code does work however it does NOT work for firefox (which I use). I tested it in IE and it is fine. Any ideas how I can get this to work in FF?

And please let me know where you are getting this code:
<ul class=”sidebar_list”>
<li id=”search” class=”widget widget_search”> <form id=”searchform” method=”get” action=”https://niftytutorials.com”&gt;
<div>
<input type=”text” name=”s” id=”s” size=”15″ />
<input type=”submit” value=”Search” />
</div>
</form>

Thanks guys.

update, the code does work in FF! It must have been before my browser wasn’t updating the code (how can i fix that cashe problem?)

thanks. but i’m still wondering where on earth that code is coming from.

The code is from your “Searchform.php file” in your theme.

And Firefox does cache. Just hit CTRL+F5 when it’s caching. It forces a refresh.

Layout with tables is bad. Bad, bad, bad.

Why do I feel like a dog that has peed on the carpet?

Tables work just fine. You may be confused with frames or you may just like to talk down to those who don’t share your narrow view.

Tables work just fine for tabular data. Not for page layout.

I have a similar question. I am a WordPress novice trying to center the search bar in my sidebar (it is currently left justified). https://mitchkumstein.com

The code in my searchform.php file is:

<form method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
<p>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” /> 
<input class=”button” type=”submit” value=”<?php _e(‘Search’); ?>” />
</p>
</form>

Can anyone suggest code that would align it properly, and where I should insert the code? Thanks!

In the CSS:

#s {margin-left: xxpx}

Thanks. Just to clarify, as I am _very much_ a novice here, you are saying that:

a) the change should be in the stylesheet, not the searchform.php

b) the relevant formating is for the sidebar (“#s” = “#sidebar”), not the search box

One additional note: in the CSS the #sidebar includes “margin: 0 14px 0 5px;” and the text in the sidebar does seem to be 5 px off the margin of the sidebar, as opposed to the search bar, which is flush with the margin.

So, can you confirm a) that the line you indicated is correct, and b) where it should be placed? Thanks!

Yes. Edit the CSS that is the stylesheet. The searchbox has an id of *s* hence #s

Hmm, doesn’t seem to be working. See below for the text for the sidebar and searchbox in the “layout” section of the CSS:

#sidebar {
float: right;
margin: 0 14px 0 5px;
padding: 10px 0 20px 0;
width: 212px;
border: 2px solid #8ac60e;
border-right: 5px solid #8ac60e;
border-bottom: 4px solid #8ac60e;
background: #f7ffe4 url(images/sidebarbg.gif) repeat;
display: inline;
overflow: hidden;
}
#s {margin-left: 5px}

Any other ideas? I did a ctrl + refresh to make sure my browser wasn’t loading a cached version of the site.