Content Formatting Macros for Confluence Server and DC

Round Rectangle

The Round Rectangle macro allows you to quickly and easily create rounded rectangles.

You can use this macro to contain content within a box with rounded corners. The rectangle size, corners, and colors are configurable.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the Round Rectangle macro from the provided list.

  5. 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

    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

    The class attribute of the element

    string

    none

    error
  6. The macro will then appear on the page.

    round 01

Examples

Basic Use

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

Round rectangle macro inside a Center macro.

Which produces the following results:

round 02

Setting the Background Colour

The background colour may be set to any colour using hexadecimal colour values.

Round rectangle macro inside a Center macro with Background Colour parameter set to hexadecimal value "#00a044".

Here’s the result:

round 03

Adding Titles

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

With Background Colour parameter set to hexadecimal value "#a3e3a3" and Title set to "Some Title".

Here’s the result:

round 04

Adding Footers

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

With Background Colour parameter set to hexadecimal value "#a3e3a3" and Footer parameter set to "Some Footer".

Here’s the result:

round 05

Setting Width

The width of the round rectangle may be defined.

With Background Colour parameter set to hexadecimal value "#a3e3a3" and Width parameter set to "333"

Here’s the result:

round 06

Setting Height

The minimum height of the round rectangle may be defined.

With Background Color parameter set to hexadecimal value "#00a044" and Height parameter set to "333".

Here’s the result:

round 07

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

With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "400", and Height parameter set to "10".

Here’s the result:

round 08

Setting Corner Size

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

Two Round Rectangle macros each contained in a Column macro, both Column macros contained in a Section macro.
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Corner Size parameter set to "10".
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Corner Size parameter set to "50".

Results in:

round 09

Setting Horizontal Size

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

Two Round Rectangle macros each contained in a Column macro, both Column macros contained in a Section macro.
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Horizontal Size parameter set to "10".
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Horizontal Size parameter set to "50".

Which Produces:

round 10

Setting Vertical Size

This is the companion parameter to Horizontal Size.

Two Round Rectangle macros each contained in a Column macro, both Column macros contained in a Section macro.
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Vertical Size parameter set to "10".
With Background Color parameter set to hexadecimal value "#a3e3a3", Width parameter set to "333", Height parameter set to "333", and Vertical Size parameter set to "50".

Which Produces:

round 11

You may wish to use different colors for the title and footer areas, this can be done using the title background color and footer background color parameters.

With Title parameter set to "Title", Footer parameter set to "Footer", Title Background Color set to "#AAAAAA", and Footer Background Color set to "#AAAAAA"

Which produces the following results:

round 12

Hints and Tips

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.

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