Note: This is one for the CSS-savvy (cascading style sheet) among us.

As any truly stylish individual will tell you – if you can catch them between latte’s, sample sales and Davidoff Slim’s – variety is the spice of life. Sure you have your basics – dependable, crowd-pleasing items that go with everything, but a truly fabulous wardrobe is one with much more than just black; it needs at least a few unique, standout show-stoppers.

iD CMS’s Formatted Text component is one such wardrobe.

The Formatted Text component enables authorized users to create page content using a WYSIWYG rich text editor. The WYSIWYG editor comes with a predefined set of styles and formatting options that authorized users can quickly and easily apply to their text. Cue a fabulous coat thrown over an otherwise dull outfit.

What you might not know is that this set of styles can be further customized and expanded to suit your particular needs – enter some highly sought after tailor. Text styles are all defined in the ‘Theme Style Sheet’; for now we’ll use one of our default themes – the lovely ‘Classic 3’ – to demonstrate how to make changes.

1. The first step is to locate the folder where iD is installed. From there we need to then navigate to the ‘Classic 3’ theme style sheet, for example: C:/program files/Intranet DASHBOARD/wwwroot/cfr/apps/themes/Classic3/. This folder contains all the images and styles needed for the theme.
2. Open the file called ‘style.aspx’ in a text editor, then search or scroll down to the section labeled ‘WIKI CONTENT STYLES’. Here you will see all the text styles available in the formatted text component. These are displayed as a drop down box in the rich text editor on the front end like so:

To add a new style, you simply add a new line to the existing styles. The style must be a ‘class’; the class name is what will display in the Front End drop down box as shown above. Its position in the style sheet will also dictate the position in the drop down list.

Let’s say, for example, that you’re feeling spritely in the summer months and want some vibrant text styles to match your mood. To create a new heading style – for example something big, bold and bright orange like a poorly applied spray tan – you would add something like this to the ‘style.aspx‘ file underneath the ‘Heading4’ line:

.headingAlternate {font-family:<%=main_font_family%> !important;font-size:18px !important;color:#ff9600;font-weight:bold;}

Perhaps you need a change? Add a different bullet style to sit neatly under the existing bullet styles, just for special occasions, by adding the following line underneath the ‘customIndentedBullet’ line:

.alternateBullet {font-family:<%=main_font_family%> !important;background:transparent url(<%=GetImage(“star_bullet.gif”)%>) no-repeat left top;padding:1px 0px 2px 20px !important;display:inline-block;}

Note: You will also have to ensure that you add your custom image, in this case ‘star_bullet.gif’, to the Images Directory within the Theme folder.

Now that we have added these exciting new styles, simply save the file and refresh your browser to see how the new styles look from the Front End. In the words of Martha Stewart, here’s one we prepared earlier: