Site Design

Adding rounded corner styling to Custom Formats in v8

In version 8.0, we removed the rounded corner styling for all the Custom Formats (buttons, fields, images, etc.) because it is actually easier to add rounded corner styling to your themes than remove it if your design calls for square corner styling.

So if you had rounded corners in your theme previous to v8.0, and after you resave your theme you notice that the Custom Formats are no longer rounded but you want them rounded again, you can add this code to your theme's Advanced Styling are (while eding your theme in the Theme Designer):

/* v7.4 add rounded corner styling to Custom Formats (remove if you want square corners) */
td.text-annotate, p.text-annotate, span.text-annotate,
td.text-box-primary, p.text-box-primary, span.text-box-primary, p.paragraph-box-primary,
td.text-box-secondary, p.text-box-secondary, span.text-box-secondary, p.paragraph-box-secondary,
td.text-box-warning, p.text-box-warning, span.text-box-warning, p.paragraph-box-warning,
text-box-notice, p.text-box-notice, span.text-box-notice, p.paragraph-box-notice,
a.link-content-more,
a.link-content-more:link,
a.link-content-more:active,
a.link-content-more:visited,
table.table-primary,
table.table-secondary,
.software_fieldset
{
    -moz-border-radius-topleft: 7px;
    -webkit-border-top-left-radius: 7px;
    border-top-left-radius: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
li.link-menu-item, p.link-menu-item, a.link-menu-item
{
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

This code will round the corners of all elements that where previously rounded in v7.3. You can, of course, pick and choose the elements you want to be styled and how round you want them too.  This code will round the corners for all the major browsers (IE, Firefox, Safari, Chrome, Mobile, etc).