0

I installed a WP theme (Make, though that shouldn't matter for the question), and I set the Header Bar text to black colour through the theme options. I want to make one particular item in the Header Bar menu to have a different colour (to stand out), so I added a css class named "appt-nav" to that menu item to be able to manipulate it separately.

enter image description here

Then, I added some custom code in the them stylesheet through Dashboard > Appearance > Editor, but it has no effect on the text colour. If I try to apply some other styles for the class, they work, so I'm guessing the font colour is overriden by something in the theme.

For example, if I use

.appt-nav {
    color: red;
    text-decoration: line-through;
}

the line through the text does appear, it's coloured red, but the text itself is still black.

enter image description here

I tried inspecting the generated HTML, but I couldn't figure out why this is happening. Also, using appt-nav a (because the actual text is in an a element) didn't help.

  • How can I figure out what exactly is overriding the text colour?
  • How can I fix it while still following good practices?
Improve this question
4
  • Have you checked if their is additionnal style overwriting your actual style? In exemple, your class .appt-nav a could be overwrite by header .main-nav li a or something like this. Also, maybe you are editing the default style.css file and the theme load an other style after so your code is overwrite. Without seeing your source code, it is the only way I have to guide you.
    – Patrice Poliquin
    Jul 3, 2018 at 18:30
  • yeah you can use the hack method and add !important to your rule to make sure it takes precedence but I don't recommend this. Instead find what rule is overwriting yours or make your rule more complex such as header .main-nav li.appt-nav1 .
    – Orlando P.
    Jul 3, 2018 at 20:32
  • I guess that's part of my question: how can I check which rule is taking precedence over my custom rule?
    – Ratler
    Jul 4, 2018 at 10:55
  • All modern browsers have an "Inspect" option when you right-click on an element on your page (Safari's is hidden by default, you need to enable the Develop menu first). This will bring up the inspector, and they are all pretty much the same, so click on the Computed tab, find the entry for color and that will show you which style is providing the style. You then need to copy that entire style definition and add your class name in to override it. Eg, if the style is nav ul li a then yours needs to be nav ul li.appt-nav a
    – Peter HvD
    Jul 4, 2018 at 13:10

1 Answer 1

Reset to default
0

Based on the comment by @peter-hvd, I found the problem and a workaround.

By going to the Computed tab in the DOM and Style Inspector, I expanded the color entry and found that what was taking precedence was an the inline rule

.header-bar .menu li a{color:#000000;}

enter image description here

As a side-note, I don't understand why there is an inline styling rule hard-coded into each page of the website; it seems like bad coding, and I think it's the theme's fault. But it is what it is, and I'm not going to fix the theme.

To make it work as expected, I changed my custom rule to

.header-bar .menu li.appt-nav a {
    color: red;
}

The addition of the appt-nav class made my rule more specific and, therefore, made it take precedence over the inline rule.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.