HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options
CSS Edit, have to use !important a lot
Elle
New
Greetings
I'm changing the Keystone theme some with CSS (Vanilla 3.3) I'm using the CSS Editor, but for a lot of elements especially when it comes to changing fonts and size I have to use !important.
I also tried making a copy of the Keystone theme and change the custom_default.css (I'm using default) and some other css files, but no changes had effect (I cleared the chache). Adding my own custom.css didn't had any effect either.
Not sure if i'm doing anything wrong? Or will I have to live with adding a lot of !important to the CSS?
Thanks in advance.
0
Comments
The css has a very high specificity. You can either duplicate that or use !important line you already do
Thanks. I'm unsure what you mean by duplicate it in this case sorry. This is what I did:
As an example, here's the TitleWrap class as it looks by default
So I wrote for example
.TitleWrap, .Item {
font-size: 20px;
}
Nothing will happen without !important, but it doesn't looks like I should need !important there? It's like something is already overriding what I see in the inspector tool. Also can't change the css file directly, nothing happens there either without !important so definitely feels like something is overriding it. I don't know if it gets minified, but can't find anything.
Sorry for being stubborn 😅
By "duplicating" I meant that if you find ".Item.Read .Title", you should be able to override it with simply also (duplicating) ".Item.Read .Title".
If that doesn't work, your css file is for some reasons processed before the official css is applied. Check your html source code and see in which order your css files appear. Your custom.css should certainly be the last file loaded. If not, please name the files that are loaded.
Thank you, that could be it. Where would I need to look to see this and specify the order? The closest thing to html source code I can see is 'default.master.tpl'. There's no css links there though like you had in those traditional .html files back in time. Same using the inspector tool, who I believe is using the 'default.master.tpl'. Perhaps I need to specify the the css links and order myself in this file?
Edit: i tried to add the css links to 'default.master.tpl'. I added the link to custom.css first and then custom_default.css (and other way around as well). I still have to use !important. Same with just adding a link to custom_default.css, that file also need !important too for changes to take effect.
I'm really lost on which css file are overriding the other two.
You have to check the source code of the html page you are looking at in your browser.
For this forum you would see it like that:
Based on your approach to customize the css, the order might not work as intended.
Oh thanks. It would help if I found my brain before doing anything further 😆
It seems another stylesheet is in use indeed
I'm not sure how to change this unless I should add them in a desired order in 'default.master.tpl?
I guess you have based your theme on keystone. In the addon.json file, keystone has the following lines:
"options": { "Styles": { "Default": "%s_default", "Classic": "%s_classic", "Dark": "%s_dark", "Cerulean": "%s_cerulean", "Coral": "%s_coral", "Dusk": "%s_dusk" } },That way, the keystones css file is loaded first and after that the variation of the keystone css.
Since you most probably do not want to have options at all, you should delete that options section in the addon.json file. But the info in that file is cached in /cache/theme/paranoid.php and so you have to delete that file after you have changed the addon.json file.
I did the things above, but the css is still being overrided and need !important to work.
I also looked into style.css, but doesn't seem to be the one doing it.
Not sure if this means anything:
That folder is empty though. I'm not sure it only happens with typography related css yet. I've not added much css, mainly background colour which didn't needed !important. It was when I started to try to change font family, size and colours of fonts that I suddenly needed !important on all of those. I can't find anyone else having this issue when searching. I'm pretty sure I set up themes the way described on here, but when it comes to typography both the themes own css file and any custom css file is overrided.
I also tried the boilerplate theme because I think it's meant to write your own css with it? It comes with a custom.css only. That one too is overrided.
I've solved it and it was rather embarassing 😅
In the Inspector it looked like for example .TitleWrap, .Item was controlling the fonts family and size for a certain element which they do, but need !important. But different elements are needed and need all at once to not require !important: .DataList .Item.Read .Title, .DataList .Item .Title. I only tried with one or two at a time and it wouldn't work without !important then. With all listed the custom css overrides the other stylesheets.