TransWikia.com

Other files overriding my template css with bootstrap?

Joomla Asked by MatthiasDunkel on November 19, 2021

I have a strange problem with one of my homepages. I changed the font-family and font-size in my Joomla Template (JM Guesthouse by Joomla Monster) and nothing happened.

After some minutes playing with the development tool, I discovered that something is loading the bootstrap.min.css file and this is overriding the CSS of my template.

After some investigating the backend, I discovered that the Breezing Form that I implement via a module and iframe is loading this file.

Also, the Googlemap that I implement with an iframe is loading this file as well.

After I disabled both, the CSS works correctly.

I would really like to use both on my homepage. How can I enable all of these processes and preserve my template’s css declarations?

One Answer

Bootstrap does not use !important in its CSS font declarations, therefore the CSS file where you have declared your fonts must be getting loaded before Bootstrap CSS. I have no knowledge of Joomla Monster templates; but with most template developers, there is usually a "custom" CSS file for this purpose. Joomla-Monster Documentation. Otherwise, you could always declare your fonts using !important, e.g.

font-family: YourFont, sans-serif !important;

Remember to declare suitable fallback fonts in case YourFont fails to be parsed by the browser.

Answered by Grant G on November 19, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP