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;
}

Answer 1

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;
}

Answer 2

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.

Answer 3

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.