Automatically add cross-browser, cross-platform drop-shadows to your panels...
| Version | Notes | Author |
|---|---|---|
| 0.1 | Initial release | Guy Fraser |
| 0.2 | Standardised Image Location | Bob Swift |
| 0.3 | Disable drop-shadows when printing | Guy Fraser |
Installation
 | This tends to look grim in anything other than Mozilla Firefox. Any help on making it work better in MSIE and Opera, etc., most appreciated. |
Go in to your Administration panel, choose "User Macros", then add a new user macro called "panel-shadow".
Make sure you untick "Macro has body".
Now, enter the following code for the macro template:
#if (!$action.isPrintableVersion())
<style type="text/css">
div.information-block {
float:left;
background: url("${req.getContextPath()}/images/shadow.gif") no-repeat bottom right !important;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
div.informationMacroPadding {
display: block;
position: relative;
margin: -10px 6px 6px -10px;
xpadding: 4px;
}
</style>
#end
Download shadow.gif and copy it to the .../confluence/images directory in your installation
Usage
To add drop-shadows to all panels on a page (warning, note, tip, info), simply include the macro at the top of that page:
{panel-shadow}
page content here
{note}an example panel with shadow{note}
And you will end up with something that looks like this:
GIF vs. PNG
I've attached two files to this page:
- shadow.gif - Works in all browsers but relies on you having a white background
- shadowAlpha.png - Much better quality, works on any colour backgorund. Works in everything except Internet Explorer.
The PNG file gives the best quality, but for widespread use you will have to seek out a JavaScript that fixes PNG images (basically scans all images and if it finds a PNG it enables transparency because Internet Explorer doesn't do it automatically!)
Decorating Other Panels
Confluence provides a wide range of panels to choose from but not all respond well to having drop-shadows forced upon them and some macros (such as the [Ratings] macro) also get adversely effected by having drop-shadows.
If you want to apply drop-shadows to a normal {panel} (which may or may not work depending on what settings the panel has), try using the following macro template:
#if (!$action.isPrintableVersion())
<style type="text/css">
div.panel {
border-style: none;
}
div.panel {
float:left;
background: url("/download/attachments/918/shadowAlpha.png") no-repeat bottom right !important;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
div.panelContent {
display: block;
position: relative;
margin: -10px 6px 6px -10px;
xpadding: 4px;
}
</style>
#end
Enjoy!
Comments (1)
Nov 21
Gail Dedrick says:
Has this been updated? I think the class names are no longer correct.Has this been updated? I think the class names are no longer correct.