November Happy Hour will be moved to Thursday December 5th.

Magnus Stråle
Oct 4, 2011
  10922
(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
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

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