Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Magnus Stråle
Oct 4, 2011
  10778
(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
Remove a segment from the URL in CMS 12

Problem : I have created thousands of pages dynamically using schedule jobs with different templates (e.g. one column, two columns, etc..) and stor...

Sanjay Kumar | Jun 21, 2024

Copying property values part 2

After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change t...

Grzegorz Wiecheć | Jun 18, 2024 | Syndicated blog

Enhancing online shopping through Optimizely's personalized product recommendations

In this blog, I have summarized my experience of using and learning product recommendation feature of Optimizely Personalization Artificial...

Hetaxi | Jun 18, 2024

New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog