Round Rectangle Macro

Macro for creating rounded rectangles

Version History

Version	Notes	Author
0.1	Initial release	Alain Moran

NB: Now part of Adaptavist's Content Formatting Macros

Overview

This user macro allows you to create rounded rectangles for containing content

Installation

You need to be a Confluence administrator with access to the Confluence server
Download the attached images and attach them to a page
Modify the path in the code below to point to the page you attached the images to
Go to Administration->User macros and add the code below as a user macro called roundrect
Modify your site css to contain the code below

Macro

## usage roundrect:title|footer|background color|width|height|corner size|corner color

#set($globalHelper=$action.getGlobalHelper())
#set($renderer=$globalHelper.getWikiStyleRenderer())
#set($context=$content.toPageContext())

#set($title=$renderer.convertWikiToXHtml($context, $param0))
#set($footer=$renderer.convertWikiToXHtml($context, $param1))
#set($body=$renderer.convertWikiToXHtml($context, $body))

#set ($tableBackground="#a0a0a0")
#set ($path="/download/attachments/6545/")
#set ($prefix="${path}white")
#set ($tableWidth="")
#set ($cornerSize="25px")
#set ($tableHeight="")

#if ($param2)
  #set ($tableBackground=${param2})
#end

#if ($param3)
  #set ($tableWidth="width='${param3}px'")
#end

#if ($param4)
  #set ($tableHeight="height='${param4}px'")
#end

#if ($param5)
  #set ($cornerSize="${param5}px")
#end

#if ($param6)
  #set ($prefix="/download/attachments/6545/${param6}")
#end

<div class="inline">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="${tableBackground}" ${tableWidth} ${tableHeight}>
  <tr valign="top">
   <td align="left" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-TopL.gif" width=${cornerSize} height=${cornerSize}></td>
   <td height="${cornerSize}" class="roundrect_title">${title}</td>
   <td align="right" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-TopR.gif" width=${cornerSize} height=${cornerSize}></td>
  </tr>
  <tr valign="top">
   <td width="${cornerSize}">&nbsp;</td>
   <td class="roundrect_body">${body}</td>
   <td width="${cornerSize}">&nbsp;</td>
  </tr>
  <tr valign="bottom">
   <td align="left" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-BtmL.gif" width=${cornerSize} height=${cornerSize}></td>
   <td height="${cornerSize}" class="roundrect_footer">${footer}</td>
   <td align="right" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-BtmR.gif" width=${cornerSize} height=${cornerSize}></td>
  </tr>
</table>
</div>

CSS

td.roundrect_title {
 text-align:left !important;
 vertical-align:top !important;
 padding-top:6px !important;
}

td.roundrect_body {
 text-align:left !important;
 vertical-align:top !important;
}

td.roundrect_footer {
 text-align:right !important;
 vertical-align:bottom !important;
 padding-bottom:6px !important;
}

Usage

{roundrect:title|footer|width|height|corner size|corner color}body text{roundrect}

Because parameters are not named, you should ensure that all preceeding parameters are specified.

Parameter	Notes	Default
title	The title of the round rectangle (may contain wiki markup)	none
footer	The foter of the round rectangle (may contain wiki markup)	none
width	The outer width of the round rectangle	none (aka width of content)
height	The outer height of the round rectangle	none (aka height of content)
corner size	The radius of the corners (may get pixellated >100px)	25px
corner color	The prefix of the corner gif files	white
body text	The text/markup to be contained within the rounded rectangle

License

Examples

{roundrect:My Title|}My Content{roundrect}
{roundrect:My Other Title| |200|100|10}My Content{roundrect