禁用/覆盖Joomla模板CSS

Question

I am building a module in Bootstrap for Joomla. It has its own stylesheet, but the activated template (where I test it in) also uses Bootstrap and classes which adds some CSS to my module (tables, buttons, etc.).

I want my module to look the same in all different templates of Joomla. Is there a way of disabling the CSS of the template for my module so it just looks same on every template? Or do I have to declare every single line in CSS (with !important, because I think that's a lot of work?)

Answer 1

The CSS is rendered within an HTML document, so you can't just "disable" it on a piece of the page (which is your module).

One possible approach is to render your module inside an <iframe> so it would be a separate document into the main HTML document. But I'm not sure if this would be good/recommended, so I would rather rewrite my CSS rules so they all are inherited from my module.

For example: if your module is the "Fancy Contact Module", you can use an wrapper div like <div class="fancy-contact-module"> and write all your CSS rules like:

.fancy-contact-module p {
    color: green;
}
.fancy-contact-module a {
    text-decoration: none;
}

and so on.

You can also use your wrapper div to apply Reset CSS or Normalize CSS (or any other similar tool), so you won't need to override all CSS rules manually. You can see more about Reset and Normalize here: What is the difference between Normalize.css and Reset CSS?