Skip to end of metadata
Go to start of metadata

Description

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

Click Insert > Other Macros.


Select the Round Rectangle macro from the provided list.


Complete the desired fields.

ParameterDescriptionType

Default

Required?
Title

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

string

none

(error)

FooterDisplays content in the space below the main content area between the lower corners.stringnone

(error)

Background ColorThe background color of the content area.string#C0FFC0

(error)

WidthThe width of the entire round rectangle specified as pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit contents.string347px

(error)

HeightThe minimum height of the entire round rectangle specified as pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit contents.string347px(error)
Corner sizeThe radius, in pixels, of the round rectangle corners. This sets the defaults for the Horizontal Size and Vertical Size parameters below.string25px(error)
Horizontal sizeThis parameter, which defaults to the value defined by Corner Size, defines the width of the panel corners.string25px(error)
Vertical sizeThis parameter, which defaults to the value defined by Corner Size, defines the height of the panel corners.string25px(error)
Footer Background ColorThe background color of the footer area (defaults to the same color as the overall background color), this should be specified as a hex value.stringbackground color(error)
Title Background Color
The background color of the title area (defaults to the same color as the overall background color).
stringbackground color(error)
Corners
A comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, Bottom Right.
stringtrue,true,true,true(error)
RowsA comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom.stringtrue,true,true(error)
CSS ClassThe class attribute of the element.stringnone(error)


The macro will then appear on the page.


Alternatively add the macro to the page as follows.

With Title parameter set to "myTitle".


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:

Some Content

Setting the Background Color

You can set the background color to any color using hexadecimal color values.

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

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)

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

Here's the result:

Some Title
Some Content

Adding Footers

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

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

Here's the result:

Some Content

Setting Width

You can define the width of the round rectangle.

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

Here's the result:

Some Content

Setting Height

You can define the minimum height of the round rectangle.

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

Here's the result:

Some Content

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:

Lorem ipsum dolor sit amet, consectetur 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 consectetur. 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 Corner Size

You may define the radius of the curved corners 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:

Content
Content

Setting Horizontal Size

You may also override the Corner Size parameter using the Horizontal Size parameter which allows setting the width of the 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:

Content
Content

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:

Content
Content

Setting the Title and Footer Colors

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:

Title
Some Content

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

See Also


Top of page

  • No labels