Override Inline Styles With CSS

W e l c o m e ! » Help » List of community-edited How-To's » Page Content » Override Inline Styles With CSS

Posted by Ed Johnson on 16 Feb 2010 05:38, last edited by RobElliott on 16 Feb 2011 10:04

There are times when it would be nice to be able to override some of the inline styles that are hard-coded into parts of a Wikidot page. There is a technique that makes this possible. The trick is to use this syntax:

selector1 selector2 selectorx[style] {
    property: value !important;
}

My specific application for this was that I wanted to remove some of the elements that are displayed when using the Lightbox Viewer with the [[gallery]] module. Using Firebug to inspect the lightbox images, I found the selectors and properties that I wanted to override. Using this technique, I was able to hide the image numbering (Image x of y), the Close button and the Prev and Next buttons.

You can use this code in a css module on any page where you have a [[gallery]]:

[[module css]]
/* hide the "Image x of y" display */
#lightbox-image-details-currentNumber[style] {
    display:none !important;
}
/* hide the entire bottom data box (including the close button) */
#lightbox-container-image-data-box[style] {
    display:none !important;
}
/* leave the "prev" overlay graphic as transparent */
#lightbox-nav-btnPrev[style] {
    background-image: url(/common--theme/base/images/lightbox/lightbox-blank.gif) !important ;
}
/* leave the "next" overlay graphic as transparent */
#lightbox-nav-btnNext[style] {
    background-image: url(/common--theme/base/images/lightbox/lightbox-blank.gif) !important ;
}
[[/module]]