• View
• Edit
• History
• Attach
• Print
• Backlinks

OverrideCSS

Question

New CSS styles can easily be added using the $HTMLStylesFmt variable. But how to override previously defined styles without modifying the skin?

Answer

Add new CSS styles using the !important directive:

$HTMLStylesFmt[] = ".vspace { margin-top: 2em !important; }";

Comments

Normally in CSS whichever rule is specified last takes precedence. So you don't need to use the !important directive, because styles defined in $HTMLStylesFmt are usually applied later than the skin's stylesheets.

And instead of using $HTMLStylesFmt, which puts the styles in each page's html head, you could define your custom styles in pub/css/local.css (create the file if it does not exist yet).

Using the !important directive means that this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE, which ignores !important. ~HansB

Contributors

• floozy, 2006-01-29, Initial version

Tested this all on 2006-02-09 on a farm (pmwiki-2.1.beta20) with skin=monobook. This is what I found:

• The main css is included last overruling all my changes. (solution: outcomment the items which I want to change. A bad side effect is that you have to change the original style sheet for it!
• $HTMLStylesFmt works fine as long as any item does not start with a hash (#).
• Got things going with pub/css/local.css and changing the original style sheet.
  Andre Steenveld.

So I only have to include $HTMLStylesFmt[] command in my Wiki page? If not, where do I have to put it? In my case it always shows up as text after pressing save.. Tnx! DJ