WordPress.org

Ready to get started?Download WordPress

Forums

How can I give the default search widget a style? (29 posts)

  1. js09
    Member
    Posted 7 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!

  2. deralaand
    Member
    Posted 7 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

  3. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    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
    }
  4. js09
    Member
    Posted 7 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.

  5. Doodlebee
    Member
    Posted 7 years ago #

    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.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    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?

  7. js09
    Member
    Posted 7 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.

  8. js09
    Member
    Posted 7 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.

  9. Doodlebee
    Member
    Posted 7 years ago #

    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.

  10. deralaand
    Member
    Posted 7 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.

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Tables work just fine for tabular data. Not for page layout.

  12. mitchkumstein
    Member
    Posted 7 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!

  13. Root
    Member
    Posted 7 years ago #

    In the CSS:

    #s {margin-left: xxpx}

  14. mitchkumstein
    Member
    Posted 7 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!

  15. Root
    Member
    Posted 7 years ago #

    Yes. Edit the CSS that is the stylesheet. The searchbox has an id of *s* hence #s

  16. mitchkumstein
    Member
    Posted 7 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.

  17. mitchkumstein
    Member
    Posted 7 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!

  18. Root
    Member
    Posted 7 years ago #

    No problem

  19. vtsnow
    Member
    Posted 7 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.

  20. Root
    Member
    Posted 7 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.

  21. wassanova
    Member
    Posted 6 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?

  22. nadglobtrotter
    Member
    Posted 6 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

  23. nate451
    Member
    Posted 6 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

  24. Gozava
    Member
    Posted 6 years ago #

    Layout with tables is bad. Bad, bad, bad.

    If it validates... use it!

  25. designoahu
    Member
    Posted 6 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!

  26. Petroff
    Member
    Posted 6 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

  27. chrisdoth
    Member
    Posted 6 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.

  28. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    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.

  29. Dajad
    Member
    Posted 6 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags