Can't figure out CSS to change Toggle_Sidebar background color

Question

On this page, http://www.fkhv.org/ the toggle sidebar that says "Giving To Fahrney Keedy" -- I need to make it a shade of blue that stands out more.

I can't figure out what to change in the stylesheet to make it change though.

Would love some help.

I tried this, but it's not working:

/* TOGGLE SIDEBAR */

.toggle_sidebar .switcher{
    background: #0000FF;
}

.toggle_sidebar .switcher{
    right: auto;
    left: 0;
    background: #0000FF;
}
.toggle_sidebar .switcher_shadow{
    right: auto;
    left: 0;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);

Feeling generous: Lines 108, 185, and 186 of `http://www.fkhv.org/wp-content/themes/clinico/css/color-3.css`. If you wanted to override instead, use `.toggle_sidebar .switcher { background: #0000FF !important; } .toggle_sidebar .switcher:after { border-top-color: #0000FF !important};`. — Tyler Roper, Jul 18 '17 at 17:02

Bruno Gois · Answer 1 · 2017-07-25T18:09:30.117

1

Your problem is related to CSS styles specificity order.

One possible solution is to add an id to your element and apply the style to it, since id styles have higher precedence over class styles.

For instance, consider adding the id (my-id) as below:

<section class="toggle_sidebar" id="my-id">
    ...
</section>

Then create the style as desired:

#my-id { 
    background-color: red;
}

And that should enable you to have the desired color. This is a better way than using !important, which is considered a bad (or at least a last resort) practice.

edited Jul 25 '17 at 18:09

answered Jul 18 '17 at 17:22

Bruno Gois

80
2
11

Hey, welcome to Stack Overflow! While this information might certainly be useful to OP, it is not an answer. It's unfortunate that you don't have enough reputation to comment quite yet as this is much better suited as one, however answers are *never* a substitute. Instead, be on the lookout for questions that you can provide full, adequate solutions to, rather than just helpful advice! – Tyler Roper Jul 18 '17 at 17:36
Sorry about that, but i'm confused about that downvote. If he puts an id to his sidebar, while I agree that it's not an optimal solution, would've solved his problem, doesn't that count as an answer? – Bruno Gois Jul 18 '17 at 17:47
1

Consider adding a concise snippet to demonstrate! Without an example, your answer reads as more of a "suggestion" than a solution. – Tyler Roper Jul 18 '17 at 18:00
Got it! Thank you for the pacience :D – Bruno Gois Jul 18 '17 at 18:08
@Santi is it better now? – Bruno Gois Jul 25 '17 at 18:12
1

Yep, much better. – Tyler Roper Jul 25 '17 at 18:43

score 0 · Answer 2 · answered Jul 18 '17 at 17:03

0

CSS styles are applied by order of specificity. With a quick inspection of the CSS rule that applies the background to .toggle_sidebar it can be seen that the rule is huge. I didn't even attempt to pick it apart, but I can if you need me to. The easiest thing to do in my opinion it to probably override it with !important like so:

.toggle_sidebar, .switcher {
    background-color:#0000FF !important;
}

answered Jul 18 '17 at 17:03

George Edward Shaw IV

795
5
21

I still can't get this method to work for some reason. Nothing is changing – BlackFlag93 Jul 18 '17 at 17:54
It doesn't even seem like my edited css file is uploading. Could it have something to do with face that main.css and color-3.css have the following version and cache extension following them when I'm inspecting them on the site? http://www.fkhv.org/wp-content/themes/clinico/css/main.css?ver=4.8&nocache=1 Sorry, I am new at editing css down to this level – BlackFlag93 Jul 18 '17 at 18:04

Can't figure out CSS to change Toggle_Sidebar background color

2 Answers2