EPiServer

Customizing Episerver admin view styles

Do you remember themes and skins? Do you remember control adapters? Have you forgotten those or never heard – or just hardcore ASP.NET MVC all the way baby. Well it doesn’t really matter – just sounded cool in my head.

Did you know that Episerver has supported themes from the early days? Back in the Episerver 5 & 6 days we used to use control adapters, erm usually to work around some HTML ouputted by Episerver so that it would be what we wanted the HTML to be. And again getting sidetracked..

Episerver applicationSettings still have the uiTheme attribute and I wanted to test can it still be used for something. The default value for uiTheme is empty string and in that case the Default theme is used. Themes use the special folder App_Themes\[Theme-name-here]. If you look at Episerver Alloy sample or create a new Episerver website there is no App_Themes folder in the solution – so where does it come from? The Default theme is included in the EPiServer.CMS.UI NuGet package. When the package is installed it adds CMS.zip under the path modules\_protected\CMS. Episerver does its magic and registers virtual paths for the package. One of those paths will map to  ‘~/App_Themes/Default’.

So where is this Default theme used? – it is used by the admin views. Most of the admin views still use the same very old UI that was around Episerver CMS 5 and 6. I partly understand that the Admin views are not the first ones to get some love – CMS edit and Commerce views are way more used compared to the admin views but surely it would be time to give some UI upgrade to the admin views too 🙂

Time to “Pimp My Admin View”

So what I did was create a custom theme and started to hack the CSS files with my mad skillz ;P I lost the count how many mistakes I made: like missing colon, typoing a class name so what was supposed to be a quick test took way too much time. Googling for replacement icons takes a lot time too. As I spent too much time on this I decided to share the results with you.

What I mainly did was:

  • changed background color of the left panel in admin view
  • increased font size
  • changed and added a few icons
  • added padding to tables (more air)
  • fixed with CSS table attribute usage ‘align=center’
  • note the rounded corners in the buttons 😀 (remember the days when images were used to make rounded corners? well that style is still used in the admin views)

Here are a few screenshots, upper part is the default and below the orange line is the pimped version.

theme-manage-content
Icon added for ‘Move to trash’

 

theme-scheduled-job
Stop job icon changed

 

theme-edit-categories
Padding to tables and alignment of content

 

theme-manage-languages
Changed system icon flags (template icon uses hardcoded default theme) in my theme

Wrapping up

So it is (still) possible to re-style the admin views using a custom theme – should You? Propably not. Wait for Episerver to give some love to the admin views.

If there comes some weird requirement in your project to for example to increase the font size in admin views for better readability you can do that pretty easily by using a custom theme. There are couple of views that don’t use theming at all. For example license view doesn’t use themes and same might be with the third party add-ons you use (or those might use the newer styles from /Episerver/Shell/X.X.X/ClientResources/epi/themes/legacy path, ShellCore.css and ShellCoreLightTheme.css).

If you still want to create your own theme you can unpack the Default theme from CMS.zip and use that a base for your own theme. The default theme includes ToolButton.less file that you should use to generate the ToolButton.css. I used Visual Studio Code with less transpiler to transpile the less file in to css.

My sample sources are available in GitHub Swapcode.EpiCustomThemes. I’ve also prepared a NuGet package for the theme in MyGet feed. The NuGet package doesn’t modify the Episerver applicationSettings so you need to manually add the uiTheme=”SCRefresh” attribute the element.

History is still included in the default theme

While looking at the different images included in the default theme I spotted two familiar images from the past. Heart warming 😉

theme-still-includes

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s