Posted 5 years ago #
Here is my site: http://niftytutorials.com/
Notice the search box in the middle sidebar. I'm trying to give it some custom styles, since is has none right now. Where can I find the code so I can add some divs/margins and other stuff? This is the search widget.
Thanks!
Posted 5 years ago #
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 http://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
}
Posted 5 years ago #
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="http://niftytutorials.com">
<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?
Posted 5 years ago #
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="http://niftytutorials.com">
<div>
<input type="text" name="s" id="s" size="15" />
<input type="submit" value="Search" />
</div>
</form>
Thanks guys.
Posted 5 years ago #
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.
Posted 5 years ago #
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.
Posted 4 years ago #
I have a similar question. I am a WordPress novice trying to center the search bar in my sidebar (it is currently left justified). http://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!
Posted 4 years ago #
In the CSS:
#s {margin-left: xxpx}
Posted 4 years ago #
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!
Posted 4 years ago #
Yes. Edit the CSS that is the stylesheet. The searchbox has an id of *s* hence #s
Posted 4 years ago #
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.
Posted 4 years ago #
Aha, solved the mystery. Root, you confused me with the original poster - I have no language giving the searchbox an ID of #s; instead of #s I needed to use #searchform. Thanks!
Posted 4 years ago #
No problem
Posted 4 years ago #
Hi,
I too would like to style my widgetized sidebar. I would like to add a separator line after each UL li element, so each menu item has a small separator line below it (it's for aesthetic reasons as I will have some long page names that wrap onto two lines.)
I can create a div element in my CSS sheet and apply the padding-bottom and bottom-border attributes, but where do I put the div in the code?
I've located the widgest.php file in the includes folder, but I have no idea where to insert my <div id="separatorline"> code to make this work.
Posted 4 years ago #
Please DO NOT start adding divs to what is already a mess in the default / classic.
Something like:
ul li ul li {border-top: 1px solid pink}
should do it.
Posted 4 years ago #
hello,
i am interested in removing my submit button entirely from my search widget and replacing it with a small image similar to this site. anyone have any idea how i would do that?
Posted 4 years ago #
Hi wassanova,
In your style.css, add :
#searchform input#sidebarsubmit {display: none;}
#searchform {background: url("[pathtoyourimage]") no-repeat;}
#searchform input#s {margin-left: 20px;}If you want to show the image inside the form :
#searchform input#sidebarsubmit {display: none;}
#searchform input#s {background: url("[pathtoyourimage]") no-repeat; padding-left: 20px;}However, in both cases there'll be no button anymore to validate the search. People will have to hit "enter" when the focus is still in the search form.
Hope it helps!
Nad
Posted 4 years ago #
I hope I'm not missing something terribly obvious, folks, but there does seem to be a significant difference between the default code in searchform.php and what's inserted via the Search widget.
Search widget:
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Search" />Searchform.php
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />That id on the submit button's pretty important, and that <br /> is obnoxious. The answer, for those who, like me, need a little help, is that the file to change is /wp-includes/widgets.php
Posted 4 years ago #
Layout with tables is bad. Bad, bad, bad.
If it validates... use it!
Posted 4 years ago #
Hello Nate451,
A better approach is to override the search widget in your themes functions.php file. That way you are not editing a core file which may get overwritten if you are not careful when upgrading. To do this just just create a new function in your functions.php file within your theme and register it as a sidebar widget like so:
<?php
function widget_override_search(){
?>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
<div>
<input type="text" name="s" id="s" size="15" />
<input type="submit" id="searchsubmit" value="<?php echo attribute_escape(__('Search')); ?>" />
</div>
</form>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_override_search');
?>Hope this helps!
Posted 4 years ago #
Hi Designoahu,
I'm just copying these lines to my functions.php and it works well, but from this point if I want to save anything in the theme editor (slightly modified default theme) it just drops error messages like this:
Warning: Cannot modify header information - headers already sent by (output started at /.../petroff.hu/wp-content/themes/default/functions.php:418) in /.../petroff.hu/wp-admin/theme-editor.php on line 55
Could you help to solve this issue? Thanks in advance, Peter
Posted 4 years ago #
Been strugling with tihs myself. Found it [the search box code] is now in widgets.php in the wp-includes folder. From line 411...
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
<div>
<input type="text" name="s" id="s" size="15" />
<input type="submit" value="<?php echo attribute_escape(__('Search this site')); ?>" />
</div>
</form>So you can either add a css class to it or add the code directly, i.e. for the search button after type="submit" add
style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BACKGROUND: #F6F6F2; FONT: 10px verdana; color:#666666; BORDER-LEFT: #999 1px solid; CURSOR: hand; BORDER-BOTTOM: #999 1px solid"
Works for me. hope this helps someone.
Relevant trac ticket:
http://trac.wordpress.org/ticket/5567
Patch is to make the search widget actually use the searchform.php if it is available.
Posted 4 years ago #
All of this is very entertaining. All I want is to remove that damn
within the widget php code. So I have gone-in and removed it from
/wp-includes/widgets.php
The template I use also has a searchform.php but clearly as per Otto42's track ticket, that don't work. So, I'll have to make this change in all my blogs until resolved.
Argh. Why would the default be to add a hard-break in there?
...Dale
This topic has been closed to new replies.
