0

I am trying to edit the colours of certain elements in my child theme on wordpress (the specific theme is Kleo if relevant). I have been doing fine adding in custom css to the child, however it seems the parent theme has labelled a few options as '!important' (at least that is what shows up when I inspect the elements in chrome). I'm not sure why they've done this but it makes for somewhat clunky code when I subsequently have to include '!important' on everything else I edit to overcome the parent's '!important'.

I was wondering if anyone knows of ways to edit the parent theme's css or of any other way of getting around this problem.

Many thanks for any help

Improve this question
2

1 Answer 1

Reset to default
0

You can overwrite an !important option with another !important but with a deeper selector. Example: the next snippet 

.container {
    width: 800px !important;
}

should be overwritten by 

html .container {
    width: 800px !important;
}

Thanks!

Improve this answer
2
  • Thanks. This is what I was hoping to avoid but it seems to be the only solution. Just to further clarify your answer though, I don't think the further specificity is needed as the child theme seems to take priority over the parent theme when the selector is the same (assuming both have !important or neither have !important)
    – Cam
    Commented Dec 30, 2016 at 23:34
  • You might want to try both approaches. If one doesn't work, the other one should do the job! Happy new year!
    – Madalin
    Commented Dec 31, 2016 at 13:50

Your Answer

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

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