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.

    ParameterDescriptionTypeDefaultRequired

    Title

    Displays content in the space above the main content area between the upper corners

    string

    none

    (error)

    Footer

    Displays content in the space below the main content area between the lower corners

    string

    none

    (error)

    Background Color

    The background color of the content area

    string

    #C0FFC0

    (error)

    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

    (error)

    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

    (error)

    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

    (error)

    Horizontal size

    This parameter, which defaults to the value defined by Corner Size, defines the width of the panel corner

    string

    25px

    (error)

    Vertical size

    This parameter, which defaults to the value defined by Corner Size, defines the height of the panel corners

    string

    25px

    (error)

    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

    (error)

    Title Background Color

    The background color of the title area (defaults to the same color as the overall background color)

    string

    background color

    (error)

    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

    (error)

    Rows

    A comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom

    string

    true,true,true

    (error)

    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

    (error)

  7. Click Insert. The macro placeholder displays.

    The placeholder for a Round Rectangle macro.
  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.

A Round Rectangle macro inside 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;
}
CSS