CSS to modify search bar formatting

[infusioncenter]

Hello! I am preparing to launch a forum for our members and stakeholders. One of the minor things holding back the launch are some final styling tweaks. The biggest of these is that I cannot find the right CSS to modify to change the appearance of the search bar on the forum pages. I was able to modify the bar with bbpress CSS, but the border was not the same shape as the KLEO search bar so it looked really awkward… We are concerned that the search bar doesn’t stand out enough from the background of our website….

[Radu]

Hi,

Use this CSS selector and change colors and values for your needs

COPY CODE

.main-color #search-members-form, .main-color #search-groups-form, .main-color #bbpress-forums form#bbp-search-form {
    box-shadow: 0 0 0 4px #75d69c;
    border: 1px solid red;
    border-radius: 3px;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[infusioncenter]

Okay, that’s exactly what I needed! Thank you! Any advice on how to also adjust the color of the search button (the magnifying glass)?

[Radu]

Hi,

There it’s an image and you should edit the image in photoshop

https://infusioncenter.org/wp-content/themes/kleo/assets/img/sprite.png

Add the modified IMG in child theme in same location

https://infusioncenter.org/wp-content/themes/kleo-child/assets/img/sprite.png

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts