Views: 9223
Number of votes: 4
Average rating:

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

dule
(By dule, 10/4/2011 8:03:55 AM)

Nice! You made it Magnus :)

frederik
(By frederik, 10/4/2011 10:48:52 AM)

Excellent!

henriknystrom
(By henriknystrom, 10/4/2011 11:04:08 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.

Jeff.Wallace
(By Jeff.Wallace, 10/4/2011 11:16:14 PM)

Good intel. Thx!

Please login to comment.