HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
custom.css not accepted
dadoc
New
Hi,
I tried to change the color of the header bar and included a custom.css in the theme directory of keystone in the design folder. In Firefox inspector I see
and as you see, my custom.css is there but gets overwritten.
How do I solve this?
Thank you so much!
Tagged:
0
Comments
https://css-tricks.com/precedence-css-order-css-matters/
http://tutorials.jenkov.com/css/precedence.html
grep is your friend.
Understanding prescience and using the inspect tool in your browser will help you pick appropriate selectors with a higher precedence.
grep is your friend.
For a quick fix you could also add !important after your color hexcode, but that is a bit whacky and known to cause headache if you make a lot of changes in your themes later.
@x00‘s recommendations are easy to learn and the way to clean CSS.
So better make sure the Themes template file loads the custom.css after the _header.scss. If this is built in quirky and hard to unwrap for you could add a surrounding CSS ID in front of the .Header class like #Head or similar.
I must confess that I was irritated because I always thought that custom.css should be used for individual customizations and would be loaded last. Looking at the at the LegayAssetModel shows that the order is
Therefore your styles in custom.css get overwritten.
@dadoc I would suggest you don't add more specificity to that CSS files. Beyond that: adding/changing files in a folder that hasn't been created by you (because you wrote the entire theme/plugin) should be avoided.
Instead I would suggest you use the Pockets plugin to insert the CSS. That would be loaded after the two Vanilla CSS files and therefore could simply be addressed with
.Header@R_J: I would agree but from a SEO standpoint I wouldn‘t add another file request for a simple edit like this.
Pockets puts the css inline.
From a developer view I would recommend to start from boilerplate, use what is nice from keystone, customize what should look different and build that theme as "my own". But if really all that is needed is one line of css, Pockets would be an easy solution