Custom formats can be used to apply particular style rules to a section of text. They allow your page editors to use interesting text styling whilst adhering to brand guidelines, and remaining consistent across pages and sections.
There are three steps to using custom formats on your site:
- Write the CSS class
- Install the class on the site, with permissions for particular user groups
- Apply the class to a block of text in the Content Editor.
Applying a custom format to an area of text wraps it in a <span> tag with a class name applied. CSS rules are applied to that class and can be used to change text colour, background colour, padding, size, etc.
Custom formats are defined by writing style rules into the ContentFormats.css stylesheet. There should already be a couple of sample rules in place: red warning and green label.
Any new rules you write must follow the same formatting in order to be picked up by Easysite. The comment (in green) at the beginning of the line will become the friendly name for the class, used in the style drop-down menu.
Custom formats are made available on a user group basis.
To install your Custom Format go to the Administration section of the site. Select Content > Editor. You will see a number of user groups listed. Choose one that you wish to give permission to use custom formats, such as Power Users, and click 'edit' under the 'extended' column.
Next select the style which contains your custom formats from the drop down list at the top of the page.
You will be shown a list of the available custom formats for that style, and can switch them on or off for this user group using the 'enabled' tick box.
In a content editor select a piece of text and expand the drop down list under 'Style.' As well as the headings 1-6, you will also find under here all of your installed custom formats.
Custom formats and Links
A popular use for Custom Formats is to create a link style that looks like a button. However, if you add a custom format to a link Easysite will most likely place the custom format span inside the link, like so:
<a href="#"><span class="myCustomFormat">My link</span></a>
This is not ideal, as it does not allow your custom format to affect those properties which are only available to the link element, such as text-decoration.
The best way around this is to use the HTML editor to manually edit the CSS and place your custom class on the link itself or on an element outside the link. You can then write CSS which targets only those custom links, such as:
a.MyCustomFormat:link, a.MyCustomFormat:visited { color: #cc0000; text-decoration: underline; }
a.MyCustomFormat:hover, a.MyCustomFormat:active { text-decoration: none; }
