Main CSS override properties

Question

I am using the CMS called WebsiteBaker, now I wrote a module for it, a droplet, that uses it's own CSS. It seems to be that the CSS of the droplet cannot be overriden by the main CSS.

I assume that's because the droplet (and along with it, the css) is loaded after everything else. And I cannot just modify the CMS files as workaround, as it's a module.

Any ideas for a workaround or something similar?

--

Main CSS (override attempt, included in the header)

#programma_tab {
    width: 300px;
}

Droplet CSS Example (included in the body, there is no other way)

#programma_tab {
    padding: 5px;
    font-size: 12px;
    margin-top: -15px;
    width: 200px;
}

score 2 · Accepted Answer · answered May 04 '14 at 18:45

2

I have a couple of ideas.

1 - Try making the selectors more specific. Something like body should override the original

body #programma_tab {
    padding: 5px;
    font-size: 12px;
    margin-top: -15px;
    width: 200px;
}

2 - try adding !important after any CSS property.

#programma_tab {
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: -15px !important;
    width: 200px !important;
}

answered May 04 '14 at 18:45

dotty

40,405
66
150
195

1

+1 for the more specific. If you can make the selectors more specific, it will override the defaults. That way is definitely better than `!important` – ntzm May 04 '14 at 18:46
Why would adding body infront of the selector override it though? – NullBy7e May 04 '14 at 18:51
1

Because it's more specific. `#programma_tab` would ask for the element with ID `programma_tab`. However `body #programma_tab` would ask for the element with the id of `programma_tab` that is a child of `body`. – dotty May 04 '14 at 18:54

score 1 · Answer 2 · answered May 04 '14 at 20:18

1

If you are using the DropletsExtension for WebsiteBaker the CSS for your Droplet can be automatically loaded in the head section of the template and you don't need to put your CSS hardcoded into the body.

answered May 04 '14 at 20:18

Ralf Hertsch

1,277
1
10
15

Upvote, because hardcoding in body is "evil". Yet, why would css be put into droplet code in the first place? Any reason not to put it into template css file? -> all in one place, clean, no override issues etc. – Ralf Jun 23 '14 at 06:24
Droplets are no regular addons, just small chunks of code which will be executed within any WYSIWYG page, therefore they are not recognized by the CMS and they can not tell the system to load a CSS file. This is what the DropletsExtension enable for the Droplets through a backdoor. – Ralf Hertsch Jun 23 '14 at 16:23

score 0 · Answer 3 · answered May 04 '14 at 18:44

0

Just add a !important statement to the CSS commands like:

#programma_tab {
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: -15px !important;
    width: 200px !important;
}

I know its certainly not the most elegant way, but it works.

answered May 04 '14 at 18:44

Chryb

547
1
12
34

1

This should be seen as a temporary fix though. It could end up overriding things you don't want to be overridden and it looks awful. – ntzm May 04 '14 at 18:45
1

Was the downvote really neccessary? It's not as if his answer isn't working. – NullBy7e May 04 '14 at 18:50
@NullBy7e There's a difference between not working and not recommended. I would strongly recommend going with the more specific selector option. – ntzm May 04 '14 at 19:01

Main CSS override properties

3 Answers3