New Landing › How can we help? › Cardinal › bbPress CSS overrides; possible without !important declaration?

Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • Back to forum
    Posted in: Cardinal
  • August 25, 2014 at 3:44 pm #103818
    FlawlessWeb
    Member
    Post count: 542

    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.
    August 26, 2014 at 12:07 am #103964
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    August 26, 2014 at 7:02 am #104039
    FlawlessWeb
    Member
    Post count: 542

    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…

    August 26, 2014 at 10:20 pm #104334
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

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

    -Rui

    August 26, 2014 at 10:45 pm #104344
    FlawlessWeb
    Member
    Post count: 542

    He said:

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

    August 26, 2014 at 10:49 pm #104346
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

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

    -Rui

    August 27, 2014 at 12:39 am #104380
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Will have to forward it to Ed.

    -Rui

    August 27, 2014 at 3:45 am #104391
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    August 27, 2014 at 10:28 am #104451
    FlawlessWeb
    Member
    Post count: 542

    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;
}
    August 27, 2014 at 10:32 am #104454
    FlawlessWeb
    Member
    Post count: 542

    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.
    August 28, 2014 at 2:40 am #104760
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    August 28, 2014 at 11:41 am #104858
    FlawlessWeb
    Member
    Post count: 542

    Thanks.

    August 28, 2014 at 11:49 am #104860
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    No problem. Thanks Ed
    -Rui

    September 1, 2014 at 5:13 pm #105927
    imweird
    Member
    Post count: 132

    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

    September 1, 2014 at 5:27 pm #105931
    imweird
    Member
    Post count: 132

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

  • Back to forum
    Posted in: Cardinal
Viewing 15 posts - 1 through 15 (of 16 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register