Avoiding use of !Important

[Nekmo]

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!

[Loriana Indelicato]

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.

[Richard Terry]

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.

[Angelo Dini]

@vxsx something to consider for the next release?

[Ian Clark]

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.

[Mark Walker]

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?

[Angelo Dini]

@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.

[Mark Walker]

@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.

[Angelo Dini]

@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.

[Venelin Stoykov]

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).

[Vadim Sikora]

@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 :)

[Ben Stähli]

ETA ? ;-)

[Angelo Dini]

I will close this now until someone wants to tackle this issue, it's not simple and requires a substantial rewrite.