Confluence

Overview:

The {roundrect} macro allows you to quickly and easily create rounded rectangles

There are times when you want to put a box around some content but want that box to have rounded corners, this macro allows you to do that.

Parameters:

This macro is used as shown below:

{roundrect:title=myTitle}body content{roundrect}

Parameter	Default	Notes
bgcolor	#C0FFC0	The background colour of the rounded rectangle, this should be specified as a hex value
title		The contents of the title cell, if required
footer		The contents of the footer cell, if required
width	fit contents	By default, the panel width will stretch to fit it's contents, unless you specify a specific width
height	fit contents	By default, the panel height will stretch to fit it's contents, unless you specify a specific height
cornersize	25px	The radius, in pixels, of the panel corners. This sets the defaults for the hSize and vSize parameters below.
hSize	cornersize	This parameter, which defaults to the value defined by cornersize, defines the width of the panel corners.
vSize	cornersize	This parameter, which defaults to the value defined by cornersize, defines the height of the panel corners.
antialias	false	Setting the antialias parameter will result in much smoother corners and enable the cornercolor parameter
footerbgcolor	bgcolor	The background colour of the footer area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value
titlebgcolor	bgcolor	The background colour of the title area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value
corners	true,true,true,true	a comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, Bottom Right
rows	true,true,true	a comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom
class		a list of classes to be applied to the roundrect table

Examples

Basic Use

The following example shows how to create a basic round rectangle...

{center}{roundrect}Some Content{roundrect}{center}

Which produces the following results:


Some Content

Setting the background color

You can set the background color to anything you like

{center}{roundrect:bgcolor=00a044}Some Content{roundrect}{center}

Here's the result:


Some Content

Adding Titles

You can add text or images to the title area (above the main content area, between the two rounded corners)

{roundrect:bgcolor=a3e3a3|title=Some Title}Some Content{roundrect}

Here's the result:

	Some Title
Some Content

Alternativley you can embed wiki markup into the title, allowing you to define a graphical title image

{roundrect:bgcolor=00a044|title=!title.png!}Some Content{roundrect}

Which results in:


Some Content

Adding Footers

You can add text or images to the footer area (below the main content area, between the two rounded corners)

{roundrect:bgcolor=a3e3a3|footer=Some Footer}Some Content{roundrect}

Here's the result:


Some Content
	Some Footer

As with the title you can also embed wiki markup, allowing you to define a graphical footer image

{roundrect:bgcolor=00a044|footer=!footer.png!}Some Content{roundrect}

Which results in:


Some Content

Setting Width

You can define the width of the round rectangle.

{roundrect:bgcolor=a3e3a3|width=333}Some Content{roundrect}

Here's the result:


Some Content

Setting Height

You can define the minimum height of the round rectangle.

{roundrect:bgcolor=00a044|height=333}Some Content{roundrect}

Here's the result:


Some Content

NB: if content is too large to fit, the roundrectangle will expand to fit

{center}{roundrect:bgcolor=a3e3a3|width=400|height=10}{loremipsum:1}{roundrect}{center}

Here's the result:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Setting cornersize

You may define the radius of the curved corners using the cornersize property

{section}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|cornersize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|cornersize=50}Content{roundrect}{column}
{section}

Results in:


Content


Content

Setting hSize

You may also override the cornersize setting using the hSize parameter which allows you to set the width of the corner images

{section}
{column}{roundrect:bgcolor=00a044|width=333|height=333|hSize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=00a044|width=333|height=333|hSize=50}Content{roundrect}{column}
{section}

Which Produces:


Content


Content

Setting vSize

There is also a companion parameter to hSize that allows you to set the vertical height, this is called vSize

{section}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|vSize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|vSize=50}Content{roundrect}{column}
{section}

Which Produces:


Content


Content

Setting antialias

Setting the antialias property to true uses a different kind of image to ensure that the edges of the corner have been antialiased (jagged edges removed).

{section}
{column}
{roundrect:bgcolor=00a044|title=Aliased|width=333|height=333}Content{roundrect}
{column}
{column}
{roundrect:bgcolor=00a044|title=Antialiased|antialias=true|width=333|height=333}Content{roundrect}
{column}
{section}

Which produces:

	Aliased
Content

	Antialiased
	Antialiased

Content

For the technically minded the aliased gif images are replaced by a single swf file that knows how to rotate and color itself.

Setting cornercolor

Setting the antialias property to true also enables the cornercolor property which allows you to create round rectangles on top of non-white backgrounds

{section}
{column}
{roundrect:bgcolor=00a044|cornercolor=#F9F9F7|bgColor=#003399|width=333|height=333|antialias=true}Content    {roundrect}
{column}
{column}
{roundrect:bgcolor=00a044|cornercolor=#F96688|bgColor=#003399|width=333|height=333|antialias=true}Content    {roundrect}
{column}

Which produces a round rectangle whose corners match the background of the tab and another rectangle whose corners do not match:

Content

Content

Setting the Title and Footer colours

You may wish to use different colours for the title and footer areas, this can be done using the titlebgcolor and footerbgcolor parameters

{center}{roundrect:titlebgcolor=#AAAAAA|footerbgcolor=#AAAAAA|cornercolor=#F9F9F7|antialias=true}Some Content{roundrect}{center}

Which produces the following results:

Some Content

Hints and Tips

You can control the color of the text within round rectangles, as well as the alignment of content within the header, body and footer areas using the following css.

/* roundrect title & footer positions */

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

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

td.roundrect_title td, td.roundrect_title p, td.roundrect_title a, td.roundrect_title ul, td.roundrect_title li, 
td.roundrect_body td, td.roundrect_body p, td.roundrect_body a, td.roundrect_body ul, td.roundrect_body li, 
td.roundrect_title td, td.roundrect_footer p, td.roundrect_footer a, td.roundrect_footer ul, td.roundrect_footer li {
 color:#FFFFFF !important;
}

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

Confluence

Adaptavist Documentation Move

roundrect macro

Overview:

Parameters:

Examples

Basic Use

Setting the background color

Adding Titles

Adding Footers

Setting Width

Setting Height

Setting cornersize

Setting hSize

Setting vSize

Setting antialias

Setting cornercolor

Setting the Title and Footer colours

Hints and Tips

See Also

Comments (19)

Anonymous says:

Guy Fraser says:

Anonymous says:

Guy Fraser says:

Rafael Cerioli says:

Juha Lindfors says:

Swen Koenig says:

VenkataRao Giduturi says:

Samael Bate says:

VenkataRao Giduturi says:

Samael Bate says:

Adolfo Casari says:

Samael Bate says:

Ulrich Kuhnhardt says:

Adolfo Casari says:

Adolfo Casari says:

Bruno Blaise says:

Samael Bate says:

Lis Riba says:

Adaptavist

Free Plugins

Quick Links

Stay in Touch