Whilst working on presenting a sample table style for our Issue Tracker component one particular colour combination was creating a few problems. The main problem was the colour of the links in the table header. These would be used to sort the list and due to the choice of colour scheme the link colours were taking the settings from an earlier (in the tree) DIV style.
This resulted in us temporarily shelving the table style until such time as we had to investigate further. With the release of 1.3 of Issue Tracker we have now turned our attention back to the style sheet. The investigation was interesting and it is likely that others might benefit from our experiences hence the decision to make it a Blog post.
The resolution was to make use of the !important declaration which been around since CSS1 but should still be used with caution.
Declaration
The !important declaration can be added at the end of any CSS property/value.
table.spearmint thead a:link { color: white !important; }
Application order
CSS assigns a weight to each rule which is based upon the specificity of its selector and the position in the source. The result determines which style is applied to an HTML element.
If 2 rules conflict on a single element then the following principles will be applied:
- Origin of rules - If a rule between an author and a user style sheet conflicts, the user's rules will win over the author's rules.
- Specificity - When 2 or more declarations that apply to the same element set the same property and have the same importance and origin, the declaration with the most specific selector will be applied.
- Source order - When 2 rules have the same weight, the last rule declared in the style sheet will be applied.
There might be times when it would be useful to change the order of sequence so it is possible to break the cascading chain by using the !important CSS declaration. When the !important declaration is used on a property/value, that value becomes the most important for that property and overrides any others.
The final style result is presented below
/* Spearmint tints */
table.spearmint { margin: 0 0 1em; background: #FFF; border-collapse: collapse; border-top: 1px solid #363; border-bottom: 2px solid #363; }
/* caption = table title/heading */
table.spearmint caption { text-align: left; font: bold small-caps 120%/1.3 "trebuchet ms",Helvetica,Arial,Sans-Serif; color: #363; margin: .3em 0; }
table.spearmint thead a:link { color: white !important; }
/* reduced font size to save space */
table.spearmint tr { font-size: 90%; }
/* prevent nested tables reducing font size further */
table.spearmint tr tr { font-size: 100%; }
/* tinted rows */
/* in CSS3 selectors: tbody tr:even or tbody tr:nth-child(2n) */
table.spearmint tr.row1 { background: #DFD; }
/* table cells */
table.spearmint th, td { font-weight: normal; padding: .3em .7em; text-align: left; vertical-align: top; }
/* borders to separate body sections */
table.spearmint tbody tr:first-child th, table.spearmint tbody tr:first-child td, table.spearmint tfoot tr:first-child th, table.spearmint tfoot tr:first-child td { border-top: 1px solid #363; }
/* tints for column headings */
table.spearmint thead { background: #9C9; white-space: nowrap; }
/* tints for totals */
table.spearmint tfoot { background: #ADA; }
/* bold text for totals */
table.spearmint tfoot th, table.spearmint tfoot td { font-weight: bold; }
Usage in Issue Tracker
To use with the Issue Tracker component add the above style to the file templates/your_template/media/com_issuetracker/css/issuetracker.css. Then on the menu item for the list display use the ‘Advanced’ tab and enter the name ‘spearmint’ to the table css style parameter. The result will look similar to the following:
