Magnus Stråle
Oct 4, 2011
  10921
(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
I'm running Optimizely CMS on .NET 9!

It works 🎉

Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog

Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

ExcludeDeleted(): Prevent Trashed Content from Appearing in Search Results

Introduction In Optimizely CMS, content that is moved to the trash can still appear in search results if it’s not explicitly excluded using the...

Ashish Rasal | Nov 7, 2024

CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024