Joomla module CSS override

Question

I have built a Joomla module which however is just an echo of a specific calculator. There is a table in the echo for formatting purposes. Using the whole script outside Joomla, everything looks ok. But I realized that Joomla forces its CSS upon my tables. My CSS should be valid and loaded. It's very simple:

<table class="joomla_tables"  cellpadding="5" cellspacing="0">
...

.joomla_tables{
border:0;
padding:5px;
}

I already checked it with Firebug. But however firebug also says that my table inherits its style

tr, td {
border: 1px solid #DDDDDD;
}

from a file called nature.css which comes with the *beez_20* template i think. Its quite annoying that only this little change destroys the whole looking of my table. And I'm not able to find a solution how to change the style of my table without changing the template's CSS. (Due to the fact that it would just have changes for me but not for these users who install this module too). So I'm wondering why doesn't Joomla use my CSS and instead of this, overrides it with its own?

Mr. Alien · Accepted Answer · 2013-09-12 07:19:34Z

2

Both the selectors are completely different, what you are doing with this joomla_tables is you target the table where joomla targets tr and td so you need

.joomla_tables tr, 
.joomla_tables td {
   border: 0;
   padding: 5px;
}

Now the above selector will select all tr and td which are nested inside element having a class joomla_tables.

Joomla targets tr and td, you are targeting table, so using your selector, it does get rid of the table border but you will still see it, as td has the border, so just use the selector I provided and it will target the elements perfectly.

For making it more stricter, you can use

table.joomla_tables tr, 
table.joomla_tables td {
   /* Styles goes here */
}

Note: tr don't have borders and paddings, it's the td which has borders (It can have borders if you've border-collapse: collapse;)

edited Sep 12, 2013 at 7:19

answered Sep 12, 2013 at 7:14

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eddi Over a year ago

oh god, it was too obvious and i just wondered why it did not work, so embarrassing

Collectives™ on Stack Overflow

Joomla module CSS override

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related