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?
  • 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 '18 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 '18 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 '18 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 '18 at 13:10
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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