Magnus Stråle
Oct 4, 2011
  10119
(4 votes)

CSS styles in the editor

First I want to point out that I am not a designer in any way (ask some EPiServer old-timer about the "Magnus Login dialog"...) and I have limited experience in working with CSS. In other words, this blog post is way outside my usual comfort zone. However I recently did add support for using "site identic" styling in the editor and discovered a way of doing this without duplicating CSS information or adding attributes that causes CSS not to validate.

Start by reading this blog post by Marek Blotny http://marekblotny.blogspot.com/2009/05/how-to-define-custom-styles-in.html

The problem is that you either have to have non-standard attributes (EditMenuName) in your CSS files or you have to duplicate the CSS content in your own editor css file.

The approach I came up with is to use an often-overlooked feature of the uiEditorCssPaths setting. Note that the name ends with an "s"... Aha, so you can have more than one CSS file listed here!

The common "best practice" is to have a reset.css (should be a separate file) and then the actual css styling, let's call it Common.css, that you want to use. See http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ or Google for css reset best practice. Now you simply create an editor.css that only references the tags and / or styles that you want to make available for the editors by setting the EditMenuName attribute.

A sample editor.css:

h1 { EditMenuName: Header 1; }
h2 { EditMenuName: Header 2; }
h3 { EditMenuName: Header 3; }
.enoLink { EditMenuName: Link; }
.enoClearFix { EditMenuName: Clear Fix; }

Now set the uiEditorCssPaths in web.config / episerver.config:

uiEditorCssPaths="~/Templates/Styles/Reset.css, ~/Templates/Styles/Common.css, ~/Templates/Styles/Editor.css"

Voilà - your selected tags and styles are available in the editor without breaking CSS validation or introducing duplication.

Oct 04, 2011

Comments

Oct 4, 2011 06:03 AM

Nice! You made it Magnus :)

Frederik Vig
Frederik Vig Oct 4, 2011 08:48 AM

Excellent!

henriknystrom
henriknystrom Oct 4, 2011 09:04 AM

Another similar option that I've been using for a long time has been to have an Editor.css file with only the EditMenuName and then have @import statements in that file that includes the regular styles that the pages are using.

I would also refrain against saying that reset styles are best practice, in reality I would say that the opinion among experienced front end developers are pretty split.
For some great thoughts on CSS architecture I would recommend http://smacss.com/book/ for a great read.

Oct 4, 2011 09:16 PM

Good intel. Thx!

Please login to comment.
Latest blogs
Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Optimizely names Luminary Senior Developer, Ynze Nunnink, OMVP

Luminary Senior Developer and Optimizely Lead, Ynze Nunnink has secured the coveted position of Optimizely MVP. Earning a Platinum badge for his...

Ynze | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

A multi-brand strategy in Optimizely DXP

The Optimizely Digital Experience Platform (DXP) is ideally suited to digital projects featuring multiple websites or applications. Here, we showca...

Ynze | Sep 29, 2022 | Syndicated blog