Skip to:
Content
Pages
Categories
Search
Top
Bottom

bbPress Search Bar – Changing Color

  • @greatoldiesdj

    Participant

    9 years, 3 months ago

    Hi,

    I am just setting up my first website with BuddyPress and bbPress. I have worked through most of my issues but I can’t find the answer to this one. The page background on my site seems to the the same color (nearly) as the Search bar above the Forums. The color is close enough that you might not know there was a Search Bar there at all. Is there a way to either change the color of the Search Bar or maybe add the words “Search Our Message Boards” to the Search Bar?

    Thanks.

    Oh yes … I am running the most current version of WordPress, BuddyPress, and bbPress and I am using the Kleo theme.

Viewing 6 replies - 1 through 6 (of 6 total)

  • @robkk

    Moderator

    9 years, 2 months ago

    Link to your site and tell me exactly what you want to change.

    @greatoldiesdj

    Participant

    9 years, 2 months ago

    Hi and thanks for the reply.

    Here is the link to the page with the forums:

    http://dodeoogieyears.com/messages/

    As you will see, the search bar above the forums is very hard to see. I just want the easiest fix to either change the color of the search bar outline or fill so that people can see it better.

    Thanks again.

    @robkk

    Moderator

    9 years, 2 months ago

    Here try some of this custom CSS, put it in your child theme or in a custom css plugin.

    This is for the submit button

    #bbpress-forums #bbp-search-form input[type=submit], 
#bbpress-forums #bbp-search-form input[type=submit] {
    text-indent: 0;
    background: none;
    background-color: #3F51B5;
    color: #fff;
    width: auto;
    height: auto;
    border-radius: 0;
    margin-top: 0;
}

    This is for the search input.

    #bbpress-forums #bbp-search-form input[type=text], 
#bbpress-forums #bbp-search-form input[type=text] {
    border: 1px solid #3F51B5;
}

    @greatoldiesdj

    Participant

    9 years, 2 months ago

    Hi again. This code worked perfectly. Thanks you very much for your help!

    @robkk

    Moderator

    9 years, 2 months ago

    Use background: none; in the submit buttons CSS. The little icon image is showing.

    I edited the other reply I posted code, so you can just copy over the code over again.

    @greatoldiesdj

    Participant

    9 years, 2 months ago

    Hi and thanks for that update. I saw that little icon but I didn’t realize what it was. Your code change took care of it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Topic Info

Topic Tags

Skip to toolbar