Round Rectangle

The Round Rectangle macro allows you to quickly and easily create rounded rectangles to contain content within a box with rounded corners. The rectangle size, corners, and colors are configurable.

Instructions

1. Navigate to the page you want to edit.

2. Click Edit.

3. Click the location where you want to add the rectangle. This can be repositioned later if required.

4. Click Insert More Content > Other Macros.

5. Select the Round Rectangle macro from the Macro Browser.

6. Complete the desired fields.

   Parameter	Description	Type	Default	Required
   Title	Displays content in the space above the main content area between the upper corners	string	none
   Footer	Displays content in the space below the main content area between the lower corners	string	none
   Background Color	The background color of the content area	string	#C0FFC0
   Width	The width of the entire round rectangle specified as pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit contents	string	347px
   Height	The minimum height of the entire round rectangle specified as pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit contents	string	347px
   Corner size	The radius, in pixels, of the round rectangle corners. This sets the defaults for the Horizontal Size and Vertical Size parameters below	string	25px
   Horizontal size	This parameter, which defaults to the value defined by Corner Size, defines the width of the panel corner	string	25px
   Vertical size	This parameter, which defaults to the value defined by Corner Size, defines the height of the panel corners	string	25px
   Footer Background Color	The background color of the footer area (defaults to the same color as the overall background color); this should be specified as a hex value	string	background color
   Title Background Color	The background color of the title area (defaults to the same color as the overall background color)	string	background color
   Corners	A comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, and Bottom Right	string	true,true,true,true
   Rows	A comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom	string	true,true,true
   CSS Class	Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.	string	none

7. Click Insert. The macro placeholder displays.

   
8. Add your desired content to the macro body then save the page to display the rendered rectangle.

Examples

Basic use with default settings

The following example shows a default round rectangle that has been placed in a Center macro.

Defining the background color

The background color may be set to any color using hexadecimal color values in the Background Color parameter, e.g.   #00a044 .

Adding titles

Text or images may be added to the title area (above the main content area, between the two rounded corners) using the Title parameter.

Adding Footers

Text or images may be added to the footer area (below the main content area, between the two rounded corners) using the footer parameter.

Setting Width

The width of the round rectangle may be defined using pixels or a percentage.

Width parameter set to  333px :

Setting height

The minimum height of the round rectangle may be defined using pixels or a percentage.

Height parameter set to  333px :

If content is too large to fit, the round rectangle will expand to fit.

Width parameter set to  400px   and Height parameter set to  10px  :

Setting corner size

The radius of the curved corners is defined using the Corner size property.

Corner Size parameter set to   10px   and   50px  respectively:

Setting horizontal size

You can override the Corner Size parameter using the Horizontal Size parameter which allows for setting the width of corner images.

Horizontal Size parameter set to   10px   and   50px  respectively:

Setting vertical size

This is the companion parameter to Horizontal Size.

Vertical Size parameter set to   10px   and   50px  respectively:

Setting the title and footer colors

If you want to define a different color for the title and footer areas, you can use the Title Background Color and Footer Background Color parameters.

Both Title and Footer Background Color set to  #AAAAAA .

Sample CSS

You can control the color of the text within round rectangles, and the alignment of content within the header, body, and footer areas using the following CSS in a CSS Stylesheet macro added to the page. Use the CSS Class parameter to assign the desired styles to the round rectangle content.

/* 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;
}