How To Add Your Own Custom CSS In The Episerver Editor

The Episerver editor looks great but sometimes you want to add your own flair into the mix.  With a bit of imagination you can do some pretty innovative stuff:

  • Do you want to make the Text Boxes longer?
  • Do you want to always make the description visible?
  • Do you want to add extra coloring or boldness to make certain labels stand out more?

Today we will cover how to do some of these things

Module.config

In your webroot, you will need a module config file.  If you haven’t come across the ‘module.config’ file before, then this is the configuration file that allows you to register custom files into Episerver.  If you want to create a widget you need to register it in here, or, if you want to register your own custom style-sheet within the editor.  The one thing you need to know about ‘module.config’ is that it points to the ClientResources folder, so when we add our stylesheet it will need to live in this folder

<?xml version="1.0" encoding="utf-8" ?>
<module>
<clientResources>
<add name="epi-cms.widgets.base" path="Styles/editor.css" resourceType="Style"/>
</clientResources>
</module>

Creating Our Stylesheet

In the ClientResources folder create a Styles and create a file called editor.css file, e.g.

webroot\ClientResources\Styles\editor.css

Episerer 8 and below
In your newly created editor.css file, add the following:

.Sleek .dijitTabPaneWrapper .epi-formsRow label[title]:after
{
display: block;
content: attr(title);
font-size: 0.7em;
font-style: italic;
}
.Sleek .epi-containerLayout .epi-formsRow .epi-formsWidgetWrapper .dijitTextBox
{
width: 45%;
}
.Sleek .epi-containerLayout .epi-formsRow .epi-content-area-editor
{
width: 45%;
}

Episerer 9

.Sleek .epi-form-container__section__row>label[title]:after {
display: block;
content: attr(title);
font-size: 0.8em;
}
.Sleek .dijitTextBox, .Sleek .dijitTextBox .dijitInputContainer {
min-width: 45%;
}
.Sleek .epi-previewableTextBox-text {
max-width: none;
}

The first style in the list is probably my favorite hack, when you define a property in Episerver, you can add a description text to it. The description only appears when the user hovers their mouse over the property as an overlay.  Personally, I find this really annoying and not that usable for content editors, so instead of having the description as an overlay we can use custom.css to display it as text instead:

episerver_custom_editor_css

Another annoyance I have with the editor, is that when you have lots of text in a text box, it gets hidden.  Having our own stylesheet, we can inject our own styles and make the text box longer to avoid the problem.

How do you know which style to use?

So, if you’re reading this and you don’t know how to find the styles you need, I’ll quickly show you. Open the editor up in chrome and point the mouse over the element you want to change.  Right-click on it and select ‘Inspect Element’, this will bring up the dialogue that will show you all the styles that are being applied to that element.

episerver_custom_editor_css_finding_your_style

In here you can see the style for the tab, if I wanted to, I could then change the background colour from grey to white for example.

Conclusion

Adding your own styles into the editor is fairly straight forward.  You need to register a style-sheet in your module.config, then you can use chrome to find the styles you want and modify and change them accordingly.

Code Sample

All the above code can be downloaded in a fully working website from my github account here.

JonDJones.Com.DisplayingTheDescriptionInTheEditor

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *