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
: css gallery image module styles
rating: +3
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:
selector1selector2selectorx[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]]:
[[modulecss]] /*hidethe "Imagexofy" display*/ #lightbox-image-details-currentNumber[style]{display:none !important; } /*hidetheentirebottomdatabox (includingtheclosebutton) */ #lightbox-container-image-data-box[style]{display:none !important; } /*leavethe "prev" overlaygraphicastransparent*/ #lightbox-nav-btnPrev[style]{background-image: url(/common--theme/base/images/lightbox/lightbox-blank.gif) !important ; } /*leavethe "next" overlaygraphicastransparent*/ #lightbox-nav-btnNext[style]{background-image: url(/common--theme/base/images/lightbox/lightbox-blank.gif) !important ; }[[/module]]
You can edit this to your preferences. I also bundled this code for use as a set of four CSIs.
If you find other uses for this technique with other Wikidot elements, please share them!
In Action
Author
Ed Johnson Ed Johnson . Please visit his/her userPage.