Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Style widget search box (http://forum.bytesforall.com/showthread.php?t=2421)

ggitchell Jul 13, 2009 03:44 PM

Style widget search box
 
Is it possible to style the widget search box? I want to match the box to the background and just have a border.

juggledad Jul 14, 2009 02:13 PM

in 3.4.x see ATO->Style & Edit HEADER AREA->Search box
in 3.x.3 see ATO->HEADER ->Search box

ggitchell Jul 16, 2009 10:15 PM

I wanted the search box in the left sidebar so I used the widget. Edits to the original search box have no effect. Through posts I was able to see how to change the text within the box but not the background and border. Thanks for the help.

ggitchell Jul 17, 2009 09:04 AM

I love to design and code drives me crazy...this theme seems to actually be teaching me code...Kudos! And I found the search box styling after much experimentation. I was nervous to touch the css.php file but by changing the percentages one by one I was able to style the box. Resolved.

jakc Nov 18, 2009 08:31 PM

can you give some more details on how you solved this please?

juggledad Nov 19, 2009 10:35 AM

instead of changing the css.php, you should use a css insert. that way the change is stored in the database and will apply if you upgrade. By editing the code itself, you will have to make the change if you ever upgrade (you are keeping really detailed notes...right?)

jakc Nov 26, 2009 03:19 AM

Can you provide some clues on some snippets I could add as a CSS Insert, to affect the appearance of the default widget search box.

juggledad Nov 26, 2009 05:28 AM

ok, since it is Thanksgiving, I'll give you a little CSS lesson.
If you look at the generatec code for a page that has a search widget in the sidebar, you find html like this
HTML Code:

<div id="search-2" class="widget widget_search">
        <div class="widget-title">
                <h3>search</h3>
        </div>
        <form method="get" class="searchform" action="http://mydomain.com/">
                <table class="searchform" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                                <td class="searchfield">
                                        <input type="text" class="text inputblur" value="" name="s" />
                                </td>
                                <td class="searchbutton">
                                        <input name="submit" value="Search" type="image" src="http://mydomain.com/wp-content/themes/atahualpa344/images/magnifier2-gray.gif" style="display: block; border:none; padding: 0 0 0 5px; margin: 0;" />
                                </td>
                        </tr>
                </table>
        </form>
</div>

This is the HTML that makes up the search box. Knowing this you can now create CSS Selectors and rules to style it. Let's say you want to make the title (which is the word 'Search') a pretty blue. If you look at the HTML, you wil see that the word 'Search is an <h3>. You need to write a CSS Selector to reference this <h3>. While you could write
HTML Code:

h3 { color: #00FFFF; }
that would change EVERY <h3> blue, in this case you only want to make the <h3> that is part of the search widget blue, so you have to be more specific with the CSS selector. Loking at the HTML, you can see that the <h3> is enclosed by a <div..></div> but that div sports a 'class=widget-title'. While you could use this, it would also cause any other widget with a <h3> in a <div class="widget-title"> to turn blue too (say that three times fast)

So looking deeper at the HTML, you can see there is another <div..> surrounding the header and form that has a class="widget_search", so you can use this to effect only search widget <h3>'s. so you would code your CSS Selector as
HTML Code:

div.widget_search h3 {
color: #00FFFF;
}

Note that using this will effect ALL search widgets, if you only want to effect THIS search, you would have to use the ID in the CSS Selector, so you would have
HTML Code:

div#search-2 h3 {
color: #00FFFF;
}

(you use a '.' when referencing CLASS's and a '#' when referencing ID's)

Here are some more CSS selectors and rules to affect the rest of the search widget - but don't blame me for the color combination, I'm just demonstrating how to do it (grin)

HTML Code:

.searchfield input {
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.widget_search {
background: red;
border: 1px solid #781351;
}


Wimbledon Dec 4, 2009 12:19 AM

That CSS lesson was VERY helpful juggledad! :)


All times are GMT -6. The time now is 06:05 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.