WordPress.org

Ready to get started?Download WordPress

Forums

Styling search form. Twenty ten theme. (8 posts)

  1. iselaespana
    Member
    Posted 1 year ago #

    website: http:www.sweetpapertrail.com

    I want to style my search form... in my css I was able to find the color of the font only. I want to lower the bar about 4px and possibly use a couple of my own buttons... one for active and the other for inactive.....

    I have been searching the forum but no one gives strait answers... they just say style the widget or Css. I would like to know how to target the things I want to change.

    Thank you.

  2. bryceadams
    Member
    Posted 1 year ago #

    Try add in your style.css file:

    .widget_search {
    margin-top: 3px;
    }

    And to style the input button, add styles to the following class as such:

    .widget_search #searchsubmit {
    /* your styles here like: */
    background: #fff;
    color: #222;
    }
  3. iselaespana
    Member
    Posted 1 year ago #

    Thank you the top margin worked... Now I am going to try and the submit button!

    Maybe you can help me with one more css problem...

    I wanted to add a image behind the widget titles like a ribbon or something but it ends up covering the whole widget section instead of each title. Ideas?

    I was trying it doing #primary #Secondary am I just missing the no-repeat?

    Thanks!

  4. iselaespana
    Member
    Posted 1 year ago #

    Oh and is there a way to add some text in the search field: like "search this website" so it will appear before they enter anything?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    I wanted to add a image behind the widget titles like a ribbon or something but it ends up covering the whole widget section instead of each title. Ideas?

    Apply the backgrounds to this CSS selector

    .widget-title
  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oh and is there a way to add some text in the search field: like "search this website" so it will appear before they enter anything?

    Yes, use the value attribute on the input field.
    E.g
    <input type="text" value="search this website" />

    You may also want some JavaScript to clear the text on-click of the field. If so, use this attribute within the same input;

    onclick="this.value='';"

    Example at http://www.erummunir.com/240/clear-text-on-input-field-on-click

  7. iselaespana
    Member
    Posted 1 year ago #

    I have fog brain. where do I find the input field.... I have been looking all over and can't find it!

  8. radhika
    Member
    Posted 1 year ago #

    <input type="text" name="search" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'search this website':this.value;" value="search this website" />

    Edit this input field in sidebar.php template of your theme.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.