Change Search Widget Appearance

  • amorgwrites

    (@amorgwrites)


    6 years, 11 months ago

    Hi there,
    I’m pretty much a newbie, so need help with modifying appearance of my site. First off, the search widget, which is a bit of a dog’s dinner at the moment. I’d like to get rid of the black ‘search’ button’, and the ‘Search for’ text that precedes the search box. I want to end up with a simple box, the same width as the sidebar, with the word ‘search’ in it.
    I’d really appreciate any help. How do you modify a widget? Is it with CSS code? Or PHP? Where do you make the modification? What code do I need to include?
    Thanks very much.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • gilbertank

    (@gilbertank)

    6 years, 11 months ago

    Hey, wordpress has it’s own article on widgets: https://ww.wp.xz.cn/support/article/wordpress-widgets/
    Should be just what you need.

    Thread Starter amorgwrites

    (@amorgwrites)

    6 years, 11 months ago

    Thanks, but the article doesn’t talk about how to customise a widget. I know how to install a widget, place it in a sidebar and all that. I just want to change the appearance of a widget.

    Felipe Velzani

    (@felipevelzani)

    6 years, 11 months ago

    Hi there,

    Please go to Appearance > Customize > Additional CSS, and please try this code:

    /* Change the search field sidebar item */

input.search-field {
    width: 90% !important;
    display: block !important;
    margin: auto !important;
}

input.search-submit {
    display: none !important;
}

    Just tell me if that is what you are looking for. 🙂

    Thread Starter amorgwrites

    (@amorgwrites)

    6 years, 11 months ago

    Many thanks! That almost did the trick. I still need to get rid of the ‘Search For’ text just above the box.

    Felipe Velzani

    (@felipevelzani)

    6 years, 11 months ago

    I don’t see this. Would you mind sharing a screenshot with this highlighted somehow?

    You can share it using https://imgur.com/upload

    Thread Starter amorgwrites

    (@amorgwrites)

    6 years, 10 months ago

    Hi Felipe,

    Here’s the screen shot:

    <script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

    I’d like to get rid of that like bit text ‘Search For’ that sits over the search box.

    Thanks, Andy.

    Thread Starter amorgwrites

    (@amorgwrites)

    6 years, 10 months ago

    Sorry, I’m not used to Imgur. Hope this works:

    https://imgur.com/a/u6OZELy

    Felipe Velzani

    (@felipevelzani)

    6 years, 10 months ago

    Hi there,

    Please try changing the code that I sent you before to this new one:

    /* Change the search field sidebar item */

input.search-field {
    width: 90% !important;
    display: block !important;
    margin: auto !important;
}

input.search-submit {
    display: none !important;
}

span.screen-reader-text {
    display: none !important;
}
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Change Search Widget Appearance’ is closed to new replies.

Tags