Styling CMS-Bound Rich Text Blocks

CMS-bound Rich Text Blocks ( RTBs ) behave differently in the designer.

When a rich text element is CMS bound, you lose the ability to select any of the sub-elements, and do any styling work in the designer.

You can unbind the RTB temporarily, and in unbound mode, it allows you to select and style the sub-elements ( RTE's ) within that block. But there's a better way that makes this a bit more manageable.

The Style Guide Approach

‍

The solution is to maintain a "copy" of that RTB on a hidden static page, with the same Class. Keep that RTB un-bound, and you'll be able to select and style sub-elements normally.

Because your CMS-bound one uses the same Class, any styling changes you make to your hidden copy will appear on the CMS-bound one as well.

Pro Tips

Put your styleable RTE on a special Style Guide page

You can mark it as Draft, since you will only need to access it in the designer. I usually have a Style Guide folder, and then have several pages in it, e.g. a blog page, a product page, etc, along with the special styling mechanics I need to centralize there.

Style all of the sub-elements you might use

In your style guide RTE, put all of the elements that you might use in the CMS, and style all of them;

• Headings ( H1 .. H6 )
• Bold and italic text
• Blockquotes
• Ordered and unordered list items
• Superscripts and subscripts

Anything you could conceivably use, put it in your style guide RTE, and style it to make sure it looks OK.

Try different arrangements as well, such as putting an H1, an H2, and an H3 next to each other. Or putting an image next to an unordered list. You need to see how these variations will look, and how the spacing will work.

‍

‍