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)
-   -   [SOLVED] Add indent to search widget field (http://forum.bytesforall.com/showthread.php?t=11136)

bswb97 Nov 12, 2010 08:57 PM

[SOLVED] Add indent to search widget field
 
I'm trying to add a 15px indent to the input field on the search widget. Here's the original code for the field:

<td class="searchfield">
<input type="text" class="text inputblur" value="<?php the_search_query(); ?>" name="s"/>
</td>

I tried adding:
style="margin: 0px 15px 0px 0px"
right after name="s" but that didn't do anything. Help?

juggledad Nov 13, 2010 09:50 AM

try adding this to the CSS Inserts (ato->Add HTME/CSS Inserts option page)
HTML Code:

. searchfield {
margin: 0px 15px 0px 0px;
}


bswb97 Nov 14, 2010 12:40 AM

No go on the code. I tried variations where I put div before the period (div.searchfield) and also tried padding.

Can you directly edit the CSS of the widget instead? That's what I was first trying.

juggledad Nov 14, 2010 04:31 AM

oops, I had an error, no space between the period and 'searchfield' - it should be
HTML Code:

.searchfield {
margin: 0px 15px 0px 0px;
}

if you want to qualify it more you could use
HTML Code:

td.searchfield {
margin: 0px 15px 0px 0px;
}

but using 'div.searchfiels' is saying 'apply these rules to any div that has a class of 'searchfield' and who knows what the div uses, all I know from the code you provided, is that the TD has a class of 'searchfield'.

this is a case where seeing the actual site wold help and knowing the version of Atahualapa and WP.

bswb97 Nov 15, 2010 04:05 PM

Hmm, both of those still aren't working. Here is the site:

http://katiethebloglady.com/

And the code:
HTML Code:

        <div id="search-3" class="widget widget_search"><div class="widget-title"><h3>Search</h3></div><form method="get" class="searchform" action="http://katiethebloglady.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://katiethebloglady.com/wp-content/themes/atahualpa353/images/magnifier2-gray.gif" style="display: block; border:none; padding: 0 0 0 5px; margin: 5px 5px 5px 0px" />
</td>
</tr></table>


juggledad Nov 16, 2010 05:50 AM

use this instead
HTML Code:

table.searchform td.searchfield {padding: 0px 0px 0px 15px;}
first number is top,
second is right
third is bottom and
fourth is left

bswb97 Nov 16, 2010 11:35 AM

Fantastic! Thanks! There's a tip coming your way.


All times are GMT -6. The time now is 08:07 AM.

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