Ben  McKernan
Dec 12, 2014
  8500
(2 votes)

Using custom CSS in edit mode

TL;DR
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.

define([
    'dojo/_base/declare',
    '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

Comments

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?




path="Styles/mystyles.css"
resourceType="Style"/>

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
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog