Every once in a while I find myself in a situation where the normal style settings throughout the style panel simply don’t take affect.
In this case, I’m building a blog single template for the blog posts. I’ve used the Bricks element for “Post Navigation”. The label and title of the of the previous and next post links are underlined with a text-decoration by default. This comes from a style on “body a” which is just an overall link style on the site.
In the style panel for the post navigation, I can go in the label and title and turn off text decoration, but it doesn’t apply.
So the base style “body a” has specificity (0,0,2).
The Bricks style is “#brxe-tskeln .label” with specificity (1,1,0).
When I use the web dev panel and literally put “!important” on the text-decoration:none, it still doesn’t remove the underline from body a.
My question is just a general one. If the Bricks panel style happens to not overwrite whatever other CSS is more specific or whatever, then what is the best method to get the style I want?
Especially with a compound element like the post navigation, which has a element as well as a and divs and spans etc.
Custom CSS box? Create new classes? Custom CSS to override it with !important?
I kind of wish Bricks had a little toggle or switch to force a particular style to be more specific or important, for situations like this, when I really want the panel settings to take precedence.
It can definitely be confusing to an end user who tries to change something and nothing happens, because they don’t understand some other random style from a plugin or something, is slightly more specific or whatever it might be.