Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Style widget search box


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jul 13, 2009, 03:44 PM
ggitchell
 
15 posts · Jul 2009
Is it possible to style the widget search box? I want to match the box to the background and just have a border.

Last edited by ggitchell; Jul 16, 2009 at 10:09 PM. Reason: spelling
  #2  
Old Jul 14, 2009, 02:13 PM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
in 3.4.x see ATO->Style & Edit HEADER AREA->Search box
in 3.x.3 see ATO->HEADER ->Search box
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Jul 16, 2009, 10:15 PM
ggitchell
 
15 posts · Jul 2009
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.
  #4  
Old Jul 17, 2009, 09:04 AM
ggitchell
 
15 posts · Jul 2009
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.
  #5  
Old Nov 18, 2009, 08:31 PM
jakc
 
7 posts · Nov 2009
can you give some more details on how you solved this please?
  #6  
Old Nov 19, 2009, 10:35 AM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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?)
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Nov 26, 2009 at 04:45 AM.
  #7  
Old Nov 26, 2009, 03:19 AM
jakc
 
7 posts · Nov 2009
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.
  #8  
Old Nov 26, 2009, 05:28 AM
juggledad's Avatar
juggledad
 
21,687 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #9  
Old Dec 4, 2009, 12:19 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
That CSS lesson was VERY helpful juggledad!

Bookmarks

Tags
search box, style, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Want to move the search box under the logo neska0209 Header configuration & styling 3 Jul 14, 2009 07:34 PM
changing the look of the search box pltrace Sidebars & Widgets 4 Mar 30, 2009 06:16 PM
search box and archive search box zizi Page & Category Menu Bars 2 Mar 28, 2009 11:31 AM
Search Box is Disappearing Whatsthatcat? Atahualpa 3 Wordpress theme 0 Mar 19, 2009 09:59 PM
Search box has no button soonguy Header configuration & styling 2 Feb 10, 2009 04:04 PM


All times are GMT -6. The time now is 10:09 PM.


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