bbPress CSS overrides; possible without !important declaration?

[FlawlessWeb]

Hi,

I am trying to style bbPress but have run into an issue. Basically, it is not possible to override any CSS rules in bbPress unless you use the !important declaration in either the custom CSS box in the Cardinal admin section or in the child themes CSS file.

I also noticed that the bbpress.css file has been copied into Cardinals css folder – I tried copying the rules directly into the bottom of that file but it has no effect.

In the attached screenshot, you can see that I am trying to change the color and background color of the bbPress submit buttons. The changes I want are:

#bbp_topic_submit {
    background-color: #1e73be;
    color: white;
}

However, unless I put the !important declaration after those rules, they get overwritten by:

#bbpress-forums fieldset.bbp-form button[type="submit"], #bbp_user_edit_submit, .widget_display_search #bbp_search_submit {
background: #f7f7f7;
color: #2e2e36;
}

There are a few reasons why I don’t want to use the !important declaration. Is there are a solution to this?

Thanks

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi Anthony,

Those colours use the theme’s customiser colours, so would need a !important to override as they are output into the header.

They can be overridden in the custom css box without !important, given you have the same or stronger cascade.

– Ed

[FlawlessWeb]

Hey Ed,

Thanks for the feedback. Little bit confused though.

I tried putting the rules into the custom css box without important and it does not work…

[Rui Guerreiro – SUPPORT]

I guess has Ed said, it would be necessary to use the !important to override the css rule.

-Rui

[FlawlessWeb]

He said:

‘They can be overridden in the custom css box without !important, given you have the same or stronger cascade’

[Rui Guerreiro – SUPPORT]

Apologize, my eyes read it “can’t be overriden”
Will check it

-Rui

[Rui Guerreiro – SUPPORT]

Will have to forward it to Ed.

-Rui

[Swift Ideas – Ed]

Your code has a lesser priority than the colour code set by the theme. See the code at the top which is being used. If you copy that and add it to the custom css box, it should allow overriding without !important

– Ed

[FlawlessWeb]

Works now, thanks.

This did the trick:

#bbpress-forums fieldset.bbp-form button[type="submit"], #bbp_user_edit_submit, .widget_display_search #bbp_search_submit {
background: #1e73be;
color: white;
}

[FlawlessWeb]

Don’t want to start a new thread…

#1. What is the exact css selectors combo I need to use to change the hover color for masonry blog posts?. In the screenshot you can see that it is currently set to blue. How do I change that in the custom css box, without having to use the wordpress customizer?

#2. Same question as above, except in this case I am wondering what the selectors are to change the background color of the swift share button? Currently set to blue in the screenshot. Again, I don’t want to use the wordpress customizer…

The problem with this is, it would seem the wordpress customizer is outputting the following:

.article-share label {
background-color: #1e73be!important;
color: #ffffff!important;
}

Much like the bbPress issue above, I want to get around having to use the !important declaration to override this. Is that possible?

Thanks.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

1)

.posts-type-bold .recent-post.has-thumb:hover .details-wrap, .posts-type-bold .recent-post.no-thumb:hover .details-wrap, .bold-items .blog-item:hover, .masonry-items .blog-item:hover .details-wrap, .blog-grid-items .blog-item:hover > div, .instagram-item .inst-overlay {
background: #222;
}
.posts-type-bold .recent-post:hover .details-wrap *, .bold-items .blog-item:hover *, .masonry-items .blog-item:hover .details-wrap, .masonry-items .blog-item:hover .details-wrap a, .masonry-items .blog-item:hover h2, .masonry-items .blog-item:hover h6, .masonry-items .blog-item:hover .details-wrap .quote-excerpt *, .blog-grid-items .blog-item:hover *, .instagram-item .inst-overlay data {
color: #fff;
}

2) If a !important is used, then you’ll need to use one to override – there is no way around this.

– Ed

[FlawlessWeb]

Thanks.

[Rui Guerreiro – SUPPORT]

No problem. Thanks Ed
-Rui

[imweird]

I think this can be considered a connected issue.

I would like to set a custom type imported via @font-face as “body, heade, h1…” font.
But its clear, when I add it to the child-theme stylesheet unless I dont use an “!important” to override the themeoption font declarations it doesnt work.

Either way, if I use “!important”, what happened is that every time, the theme loads the default font – then the custom font creating an ugly effect.

How can i achieve to avoid this?

adding the font in the header.php and editing the original stylesheet? that would mess up with the update possibilities.

maybe I can use your “font options” section, where you allow us to choose between google + system fonts and add my custom font there.

It would be great for the future updates to find such a functionality

Thanks a lot

[imweird]

Ok ok. I am sorry, I didnt know about the Font Control. Apologize.