[Skip to the Main Content]

How to Overwrite Default CSS Files in Content Management Systems

Have you ever worked on a site which was housed in a Content Management System (or, CMS) that was—Seemingly—resistant to any style sheet revisions you made? They may have core.css files. They may have individual CSS files strewn through the hierarchal structure. One could locate each style ID and Class name in the HTML, then locate each CSS file and isolate the offending style which required revision and revise it —if one were so inclined. Or, one could use W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, 6 Assigning property values, Cascading, and Inheritance, 6.4.3 Calculating a selector’s specificity. [Note: Afterwhich, read CSS: Specificity Wars by Andy Clarke (October 7, 2005) for translation.]

CSS Specificity’s much simpler.

I had this difficulty where CSS Specificity was required to correct it.

The Set-up went like this. The site was to have two sections: public-facing and private membership. The first CMS was MODx; it was the public-facing section. The second CMS was Moodle; it was the course-by-membership section housed in MODx. The public site was templated and populated with content. The course site was HTML templated (with CSS files included) and forwarded to a third-party agency for Moodle PHP integration into the new HTML templates instead of the Moodle default templates. However, two weeks later, on return of said templates, things were broken: templates, code, styles, PHP.

Sixty hours later.

I corrected the styles and the code and most of the templates (and, those I could not fix were due to my lack of PHP programming skills: I have none). The HTML corrections were tedious because Moodle has an unfathomable number of default templates. The third-party had included new styles into the style sheet, into the HTML as in-line styles; and—I found—Moodle had styles included in table elements. Style sheet corrections were simple. CSS Specificity.

First step. Add a single <body> ID name to all of the templates for the course section.
Example:

body#index

Second step. Write new styles with that <body> ID name.
Example:

body#index font { color: #000; font-family: Times, "Times New Roman", serif; }
body#index p { color: #000 !important; font-family: Times, "Times New Roman", serif !important; }

The first style overwrites any table styles that have not used paragraphs in cells. The second style overwrites Everything else. [See Test - CSS Specificity. This test case was tested in Safari, IE6, Firefox/Mac, Firefox/PC and Opera: no blue text. And, I presume it passes in IE7 unless IE7 removed previous acceptance established in IE6.] The !important rule is necessary for overwriting in-line styles. Therefore, every property name/property value must have the !important rule assigned to it. And, Remember! that !important must be inside of the CSS property value ending semi-colon, e.g., { color: #778899 !important ; }! [See W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, 6 Assigning property values, Cascading, and Inheritance, 6.4.2 !important rules.]

The above is a simplification of what one may find in default CMS style sheets. Fortunately, I have yet to find a CMS which uses an ID name or Class name on a template’s <body>. Or, use an element name in the CSS selector, e.g., p#index. Still. Even if they had, <body> ID has greater specificity.

I have—Recently—started work on a SharePoint Services site. CSS Options with Master Pages by Heather Solomon [October 27, 2006] addresses one method for SharePoint templates. It seems far too byzantine. Interesting, though: none of the SharePoint Master Pages has an assigned <body> ID. So, CSS Specificity should work in SharePoint, too.

A <body> ID and CSS Specificity may solve your third-party woes, too.


Sean Fraser posted this on August 4, 2007 03:11 PM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/css/how-to-overwrite-default-css-files-with-specificity.html
  • furl: http://www.elementary-group-standards.com/css/how-to-overwrite-default-css-files-with-specificity.html
  • reddit: http://www.elementary-group-standards.com/css/how-to-overwrite-default-css-files-with-specificity.html

Comments

Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.


Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus