Overwriting CSS

  • Resolved adazaslam

    (@adazaslam)


    4 years, 6 months ago

    Hi, I’d like to preface this with saying that i’m quite new to wordpress and web dev so apologies for the simple question.

    I’m trying to overwrite the CSS for the tabbed schedule, just testing out with the now playing border to begin with.

    in the schedule.css file, there’s this section:

    #master-schedule-tab-panels .master-schedule-tabs-panel .master-schedule-tabs-show.nowplaying {
	border: 1px solid #F00000;
}

    So i’ve created the rs-custom.css and it’s located in the child theme directory as guided by the FAQ.

    I have this line in that file:

    #master-schedule-tab-panels .master-schedule-tabs-panel .master-schedule-tabs-show.nowplaying {
	border: 3px solid #478F85;
}

    and nothing else. This doesn’t work, the source code still shows the original red colour.

    What am i doing wrong here?
    Using version 2.3.3.3

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Tony Zeoli

    (@tonyzeoli)

    Sorry for the delayed reply. I’ll ask Tony Hayes (@majick)to get with you shortly with instructions on how to override the CSS rules you’re attempting to manipulate.

    Thread Starter adazaslam

    (@adazaslam)

    Ok, brilliant, thank you!

    Plugin Contributor Tony Hayes

    (@majick)

    @adazaslam So with CSS to override a rule you need to add more specificity to the selector, otherwise with the same specificity it doesn’t know which rule you want.

    There are various ways to do this. You can of course add !important to the rule, but this will override any levels added later, so it’s generally something to avoid as not the best practice. One simple trick is to just prepend body to the selector and it will then be more specific than the original:

    body #master-schedule-tab-panels .master-schedule-tabs-panel .master-schedule-tabs-show.nowplaying {
	border: 3px solid #478F85;
}
    Thread Starter adazaslam

    (@adazaslam)

    leading with “body ” worked thank you, however it works in my child theme style.css, rs-custom.css seems to not be called.

    I’ve checked the style sheet call hierachy and the last two are rs-schedule.css followed by rs-shortcode.css. no rs-schedule. Now this isn’t an issue as i can add what i want to my style sheet, but curious as to why rs-custom isn’t being called.

    Is there anything specific needed in rs-custom, or should it be automatic?

    Plugin Contributor Tony Hayes

    (@majick)

    @adazaslam I just rechecked and currently the plugin expects the rs-custom.css file to be in a subdirectory of /css or /styles of your Child Theme. I will update it for the future so it can use the Child Theme directory itself, and also need to update the docs as they are inaccurate in this regard. Thanks for the pickup!

    midwestbroadcasting

    (@midwestbroadcasting)

    Would it be possible to get instruction on overwriting css style sheets?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Overwriting CSS’ is closed to new replies.