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.
|
in 3.4.x see ATO->Style & Edit HEADER AREA->Search box
in 3.x.3 see ATO->HEADER ->Search box |
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.
|
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.
|
can you give some more details on how you solved this please?
|
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?)
|
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.
|
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"> HTML Code:
h3 { color: #00FFFF; } 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 { HTML Code:
div#search-2 h3 { 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 { |
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.