Avoiding use of !Important
Nekmo opened this issue · comments
I'm trying to integrate some bootstrap elements in the Admin and DjangoCMS theme is giving me problems.
Some examples:
form button {
border-radius: 3px!important;
width: auto!important;
}
button {
color: #555!important;
font-size: 12px!important;
}
And more. I think using !Important is a bad idea.
Thanks!
Hi @Nekmo
Thank you for your feedback. We are aware of this issue and we are working on a cleanup. Will let you know when we are done with the changes.
On a related note because the djangocms admin styles are added in the {% block extrahead %}
, you can't override them from the {% block extrastyle %}
as it comes before. Obviously it's something you can work around once you realise the problem, but may be helpful to move the djangocms-admin.css
link before the extrastyle
include to avoid confusion.
@vxsx something to consider for the next release?
I was literally about to make the exact same issue as this.
The changes since 1.9 support has made overriding the styles (e.g. to add select2 support) really difficult.
On a related note to the !important
styles, the width: calc(100% - 112px)!important
on date fields and the max-width: none !important
that effects select boxes make inputs look pretty hideous.
Is there a reason they've got these attributes? Could the date field width not be much less than 100% & the max-width: none
just be removed?
@marksweb creating the styles to reformat the admin is in general a beast. We just recently added integration tests that automatically create screenshots (you have to consider differences in django 1.8 and 1.9) plus changes can affect multiple addons differently.
We are keeping an eye on it, though our resources are a bit limited for the next weeks. I'd welcome help on improving / extending the tests.
@FinalAngel of course, sorry, my comment wasn't very sympathetic to the considerable job this is, was it!?
I'm not sure I'll get any input from our design team, but I might fork the repo & tweak a few bits with a stylesheet override. That way if I get anything worthwhile changed, you could take a look.
How are you running the screenshot based tests? It's been on the backburner for me for a little while, the last I used was PhantomJS & Selenium for CSS regression.
@marksweb no offends taken, just a general feedback :)
The screenshot integration tests run with Docker and the Makefile: https://github.com/divio/djangocms-admin-style#integration-tests
Simply run make test18
. The same is available for Django 1.9. The best practice there would be, to create more tests in https://github.com/divio/djangocms-admin-style/tree/master/screenshots/reference and then overwrite and see how it affects the system.
My suggestion about solving the issue with !important
is just to remove it everywhere and all selectors to be prefixed with .djangocms-admin-style
.
If the selector is the same as in django theme because of the extra class in front it will be stronger and will use the styles from djangocms-admin-style
.
By this way all 3th parties can provide styles that will work only if djangocms-admin-style
is used or not. The same way as the flat
theme for Django (from Django 1.9 and up).
@vstoykov that's part of the plan. Given that now there are css regression tests available, it will be easier to implement the changes. No ETA, but very soon :)
ETA ? ;-)
I will close this now until someone wants to tackle this issue, it's not simple and requires a substantial rewrite.