Santa Clara University

Web Publishing @ SCU

Rounded Corners

You can bring focus to a particular piece of content on a page by adding a background color with rounded corners to the element. The rounded corners help to differentiate the content from the rest of the page, as most of the template's design consists of blocks of color and straight lines.

To apply a background color and rounded corners to a block of content, you'll need to add a text element to the page. There are four available options in the Text category in the Element Gallery; in most cases, you'll probably want to use the "Formatted Text Block (no header)" option.

Be careful not to over-use this design element; if the majority of the page content has a background color and rounded corners, then the content won't be  as distinctly set apart from the rest of the page design.

Best Practices

A few examples of pages that use round-corner rendering:

The rounded corner option is used sparingly on these pages, but is effective in bringing focus to featured content.

Adding Rounded Corners

help text for render handler

The rounded-corner rendering option is available with four of the elements in the Text category of the Element Gallery. The "Formatted Text Block (no header)" option is essentially the same as the Rich Text Editor element that's found in the Content Well category, and would probably be the element you'll want to select, particularly if your text requires any formatting, such as bold or italic styles, headings, tables, or lists. The "Simple Text Block" options are best suited to a block of text that doesn't have any special formatting requirements. In both cases there's a version that includes a separate form field for a heading. You can include a heading just as easily within the main body of the text, so the "no header" option gives you more flexibility.

  1. To begin, you must be in "Author Mode" on a page or template.
  2. Click "insert a new element" and choose "Text" -> "Formatted Text Block (without header)."
  3. Click the "define the text block" link to open the text entry form.
  4. Click "finish" to save your text content as work-in-progress.
  5. Click the Element Properties icon icon above and to the left of the text element.
  6. Select the Custom Render Handler option from the properties menu.
  7. A new window will open with the available rendering options for the element - select the Rounded Corners rendering option and click "next".
  8. Select a background color (it defaults to light gray if no option is selected) and specify any special formatting for the width, position, and styles within the text block.
  9. Click Finish to update the rendering of the textblock.

To make changes to these settings, just click the Element Properties icon for the element and step through the process again (starting at step 6) until you reach the rendering options form.

The settings available in the render handler form (other than the background color) may be left blank.  You my need to use these settings, depending on the page display requirements.

The Float and Width options will determine the pixel-width of the textblock and its position within the containing block on the page.  The Element Style field allows you to enter valid CSS attributes for the table that encloses the text.  For example, you might enter a margin setting in this field, which would add white space around the text block.  The Content Style field allows you to enter CSS attributes that would be applied to the content inside the text block.  You could alter font styles or padding within the borders of the text block using CSS style attributes.

Printer-friendly format