Customize WordPress CSS on top of an existing Theme

Question

I have installed a theme in my WordPress website.

On top of the theme, I have added bbPress (forum)... unfortunately the CSS render very badly the forum features...

for example, the picture below show how the search button overlap with the search box

If I look at the css I can see this:

element.style {
}
vlog-bbpress.css?ver=1.8.1:9
#bbpress-forums #bbp-search-form {
    position: relative;
    float: none;
}

bbpress.css?ver….5.14-6684:429
#bbpress-forums #bbp-search-form {
    clear: left;
}

what should I change in the css??? (I have installed Simple Custom CSS plugin (https://en-ca.wordpress.org/plugins/simple-custom-css/)so I should not need to do any custom css, but I shoul just be able to add the custom CSS)

in case anyone of you want to have a look at the website, you can find it here (not live yet, just playing around)

http://italiancrypto.it/forums/

many thanks all

Regards

score 0 · Answer 1 · answered Dec 21 '17 at 07:43

0

Add the below CSS to solve alignment of button

#bbpress-forums #bbp-search-form .button {
    margin: 0;
    padding: 9px 20px;
}

answered Dec 21 '17 at 07:43

Ritesh Vatwani

17
2

score 0 · Accepted Answer · answered Dec 21 '17 at 08:02

#bbpress-forums #bbp-search-form .button {
    margin-top:0;
}
#bbpress-forums #bbp-search-form #bbp_search {
    height: 42px;
}

You may need to include !important tags, depending on where your CSS overrides are injected. But only use if necessary.

eg:

#bbpress-forums #bbp-search-form .button {
    margin-top:0 !important;
}
#bbpress-forums #bbp-search-form #bbp_search {
    height: 42px !important;
}

score 0 · Answer 3 · answered Dec 21 '17 at 15:55

Do some reading on using the Chrome inspect screen--I've added an image to help. To get this screen, right click on the search button.

You'll see the highlighted html code on the left (the input field). On the right, you'll see the css and their values for that field.

See the check mark next to each field>? I clicked on the margin setting to remove it. Then, I clicked on the plus sign in the upper right of the inspect screen.

That lets you key in a temporary value for a new parameter. I keyed in: margin-top: 0;

You'll see that in the image I attached. Now the button is aligned. The css to place in your style sheet is just above the inserted margin-top field.

You'll see that the button is now aligned with the search field. So Mando's answer should work.

score -2 · Answer 4 · answered Dec 21 '17 at 02:51

-2

position: relative. That should work

answered Dec 21 '17 at 02:51

nah

1

1

What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Dec 21 '17 at 02:53
Thanks... first of all, I think I have two css (one from the theme VLOG theme) and one from the bbPress pluging... how these are prioritized? the CSS seems to use the VLOG over the bbPress... where and how should I change the code? I am using the simple custom css plugin.... many thanks – FiNaR Dec 21 '17 at 03:05

Customize WordPress CSS on top of an existing Theme

4 Answers4