Ben  McKernan
Dec 12, 2014
(2 votes)

Using custom CSS in edit mode

You can dynamically load your custom CSS for your components in edit mode via the xstyle/css plugin. Simply require the plugin with the relative path to your stylesheet as a parameter, e.g. xstyle/css!./path/to/stylesheet.css

Dynamically Loading CSS

When you develop a custom component for the edit interface in EPiServer it is often the case that you need to have custom CSS to make it look great. In large JavaScript applications, like the edit interface in EPiServer 7.5, it can be beneficial to dynamically load resources such as CSS. The less you need to load at startup the better the startup performance will be, obviously. As you all should know, EPiServer uses an AMD loader to load JavaScript. One of the great things about AMD is that it gives us the ability to load JavaScript dynamically. So when you use the edit interface, things like editors or different views aren't loaded until they are actually needed.

The next great thing about AMD is that it has a concept of plugins. A plugin is a JavaScript module within AMD which loads another file and returns that to the loader instead of itself. For example both dojo/text and epi/i18n are examples of plugins that return file text (good for loading templates) and EPiServer localizations respectively.

We also have the xstyle/css plugin whose sole purpose is to load CSS files.

    'xstyle/css!./path/to/stylesheet.css' // PRO-TIP: Place this last since it doesn't return anything.
], function(declare) {

    return declare([], {
        // ...


In the above example you can see that we are requiring the plugin and passing through the relative path to the stylesheet as a parameter. The exclamation mark indicates that the module should be loaded as a plugin and then AMD takes care of passing through the remaining string as a parameter to the plugin. The plugin will then parse this string and add a link node, with the path as its href attribute, to the head element of the page causing the referenced CSS file to be loaded into the page.

Dec 12, 2014


Dec 18, 2014 05:45 PM

isn't it simpler to just add something like this to modules.config if all you need is custom css?


Ben  McKernan
Ben McKernan Jan 7, 2015 08:37 AM

Your example will work but I wouldn't say that it is any simpler. Concept-wise they are both references to a CSS file, however in your example it is probably loaded when the application starts rather than when needed. Also you lose the modularity of having the CSS together with the component.

Please login to comment.
Latest blogs
Configured Commerce - Introduction to Long-Term Support (LTS) Releases

First off, for those who have not had a chance to meet me yet, my name is John McCarroll, and I am the Technical Product Manager for the Optimizely...

John McCarroll | Sep 29, 2023

Auto-translate with OpenAI in Optimizely CMS

You can now auto-translate content using your favorite online AI service, inside the old trustworthy Episerver.Labs.LanguageManager!

Tomas Hensrud Gulla | Sep 29, 2023 | Syndicated blog

Vulnerability in CMS 12 shell module configuration

Introduction A potential security vulnerability has been identified in Optimizely CMS 12, triggered by a certain shell module configuration. To be...

Magnus Rahl | Sep 28, 2023

AI-Assistant: The 'Change Tone' Shortcut

The AI-Assistant for Optimizely is constantly evolving, adjusting, and transforming to meet your digital needs, providing a cutting-edge advantage...

Luc Gosso (MVP) | Sep 27, 2023 | Syndicated blog