Override CSS in #Episerver editor mode

2 min reading how you can customize and override the CSS in Episerver UI admin with help of module system.

Published 19 April 2017
For Episerver Version 9 and later

In Quan Mai book, Pro Episerver Commerce, which I highly recommend for good understanding of Episerver Commerce platform, he mention under chapter 3, page 55, that you can override the CSS to put a height on the image, since there is no default height on images in Catalogue UI.

This is what i need to inject

In my case the proportion of the thumbnails wasn’t default, so I needed to override, but how?

Overriding using module system

Episerver has a great extensionality with its module system. In this case, just add the right folder structure, for example:

sln-root\modules\_protected\CustomCSS\1.0.0\ClientResources\styles\custom.css

Create a module.config

The module.config should be in the root of your plugin-folder, eg sln-root\modules\_protected\CustomCSS\module.config

Dependencies
You need to use the <moduledependencies> to configure when and where it should run you CSS/Script

  • Shell works in dashboard onlinecenter, CMS and Commerce
  • CMS is standard
  • Commerce is loading after CMS
  • Forms and Episerver.Forms.Samples are loading after Commerce

If you have more modules attached to your solution and if you need to have yours latest, check the loadings of css, and try to figure out what the name of the Module loading it is. Check in their module.config.

 

Remember to IISRESET between changes

And yes, you may override scripts too.

Source

SEO terms

  • Styling admin episerver
  • Custom script injection
  • How to make an Addon for Episerver

Context based CSS in WYSIWYG TinyMCE editor for EPiServer multisite

In multisite scenarios or when you use optimization libraries you’ll need to set the TinyMCE editor css dynamically from the code.

tinymce

Normally you register the editor CSS thru the web configuration:

But sometimes in scenarios where you are using a optimization library like Combres to pack the CSS:s you’ll need to set the CSS programmatically. If you have a multisite scenario you’ll need different CSS for each site.  Thanks to other blogposts I’ve made a variation of a descriptor that works for my solution.

Since I use bootstrap.css I had to put some classes like “container” in the tinyMCE editors body to make bootstrap work. I also put the site name in the body class and the property name. Finally I add a tinymce.css where I can put custom editor css and editor styles, styleswith help of EditMenuTitle and EditMenuName (which won’t work if you don’t have a stop “;”)

Because the WYSIWYG uses an iframe, be aware of the column widths will not work, since the editor width is smaller.

Because I want to use this custom change globally i do use EditorDescriptorBehavior.PlaceLast and inherit EditorDescriptor.

The result: Body tag with custom CSS and head with your context based CSS styles.
The result: Body tag with custom CSS and head with your context based CSS styles.

Limitations in UIEditorCssPaths: You can’t have absolute urls nor non file urls (eg not without a file extention)

Continue reading “Context based CSS in WYSIWYG TinyMCE editor for EPiServer multisite”