Creating a consistent look in EPiServer plugins

One of the basic principles in visual design of things that go on the screen, is creating a consistent look and feel througout the entire experience. EPiServer is a typical web based application, and it has its look and behavior. It has its colors, button styles and behaviour. When making plugins/modules that integrate with EPiServer's own user interface, you should follow these "guidelines". It's really not that hard, and those extra 15 minutes spent on a plugin will make life better for developers, editors and webmasters around the world.

Consider the following image. It's from the pre-today version of Intergen's multipage selector from EPiCode. It had some styles for CMS5 applied, but has seemingly not been updated to use new looks after CMS6 was released. And the result? It looks weird and half-done.

Today, I spent something like twenty minutes fixing up all this. I removed all the old CMS5-styles, and added in the default stylesheets of CMS6. I also did all the basic formatting which I believe should be required by such a plugin, which I see is button styles, background colors, body padding and table styles. Those few things will at least cover 95% of what's needed.

Below, I have listed a few tips for when writing new plugins (or updating old ones!).

•  To get access to the default styles, you should include the following files in the head of your page. I haven't looked too much into what belongs in what style sheet, but these are the basic stylesheets EPiServer use. Update: As Tarjei points out in a comment, use Paths.ToShellResource(string path) and UriSupport.ResolveUrlFromUIBySettings(string path) to resolve correct paths across different installations with different virtual path mappings. If you're lazy, copy the lines below.

  <link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/App_Themes/Default/styles/system.css") %>">
  <link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/App_Themes/Default/styles/ToolButton.css") %>">
  <link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/styles/multipageproperty.css") %>">
  <link rel="stylesheet" type="text/css" href="<%= Paths.ToShellResource("ClientResources/Shell.css")  %>"/>
  <link rel="stylesheet" type="text/css" href="<%= Paths.ToShellResource("ClientResources/ShellCoreLightTheme.css")  %>"/>
  <link rel="stylesheet" type="text/css" href="<%= UriSupport.ResolveUrlFromUIBySettings("ClientResources/Epi/Base/CMS.css")  %>"/>
  

• Wrap your plugin content in <div class="epi-padding epi-contentArea"> to give it default padding and background color.
• Use proper level heading-elements, paragraphs, lists and so on. EPiServer has styling for most of these.
• Apply the class epi-default to your tables. Also, remember to use th as your table header elements.
• When adding a button, you should wrap it in  <span class="epi-cmsButton"> (or, as Lars Øyvind Bodahl points out in a comment, use <EPiServerUI:ToolButton .../> with the CssClassInnerButton attribute. To use ToolButton your Page should inherit from SystemPageBase as Dan Matthews points out), and also give the inner input the following classes:
  • epi-cmsButton-text
  • epi-cmsButton-tools
  • And, according to the purpose of the button you can add icons to the buttons by applying classes like
    • epi-cmsButton-Delete
    • epi-cmsButton-Add
    • epi-cmsButton-Edit
    • ...and quite a few others. A full list can be found in the bottom of this article.

With those few, tiny changes, the updated Intergen Multipage selector looks like this:

...or in other words: It now looks like the rest of EPiServer.

To many developers, this might seem like a tiny change, but I guarantee you: This will without a doubt increase the feel of quality with your plugin.

And if my list above does not cover all possible application states in EPiServer, you should really just have to find similar interfaces that's already been built into the various parts of edit and admin mode and inspect the code with any web developer tools. All browsers have them these days.

And to clarify, I'm not trying to mock Intergen for not updating their plugins. After all, it's open sourced, and we're all human etc. I used it as an example because it simply was a really good example of what I'm trying to get through with this.

Complete list of EPiServer button styles

• epi-cmsButton-Add
• epi-cmsButton-AddFile
• epi-cmsButton-AddFiles
• epi-cmsButton-AddOff
• epi-cmsButton-AddUser
• epi-cmsButton-AddUserGroup
• epi-cmsButton-AdminMode
• epi-cmsButton-ArrowLeft
• epi-cmsButton-ArrowRight
• epi-cmsButton-Cancel
• epi-cmsButton-Check
• epi-cmsButton-CheckBoxOff
• epi-cmsButton-CheckBoxOn
• epi-cmsButton-CheckOff
• epi-cmsButton-CheckinVersion
• epi-cmsButton-Compare
• epi-cmsButton-Copy
• epi-cmsButton-CopyToClipboard
• epi-cmsButton-CreateFolder
• epi-cmsButton-Cut
• epi-cmsButton-DelayPublish
• epi-cmsButton-Delete
• epi-cmsButton-DeleteFolder
• epi-cmsButton-DeleteLanguage
• epi-cmsButton-DeleteOff
• epi-cmsButton-Down
• epi-cmsButton-DownOff
• epi-cmsButton-Edit
• epi-cmsButton-EditMode
• epi-cmsButton-EditOff
• epi-cmsButton-Export
• epi-cmsButton-Favorite
• epi-cmsButton-File
• epi-cmsButton-FileManagement
• epi-cmsButton-FolderUp
• epi-cmsButton-Help
• epi-cmsButton-Import
• epi-cmsButton-LanguageOverview
• epi-cmsButton-LanguagePage
• epi-cmsButton-LanguageProperty
• epi-cmsButton-LanguageSettings
• epi-cmsButton-Locked
• epi-cmsButton-LogOut
• epi-cmsButton-MySettings
• epi-cmsButton-NewFile
• epi-cmsButton-NewPage
• epi-cmsButton-OpenInWindow
• epi-cmsButton-Paste
• epi-cmsButton-Print
• epi-cmsButton-Property
• epi-cmsButton-Publish
• epi-cmsButton-QuickEdit
• epi-cmsButton-Redo
• epi-cmsButton-Refresh
• epi-cmsButton-RenameFolder
• epi-cmsButton-Report
• epi-cmsButton-ReportCenter
• epi-cmsButton-Revert
• epi-cmsButton-Save
• epi-cmsButton-SavePublish
• epi-cmsButton-SaveShow
• epi-cmsButton-Search
• epi-cmsButton-Security
• epi-cmsButton-StickyEditOff
• epi-cmsButton-StickyEditOn
• epi-cmsButton-Undo
• epi-cmsButton-Unlocked
• epi-cmsButton-Up
• epi-cmsButton-UpOff
• epi-cmsButton-ViewMode
• epi-cmsButton-Warning
• epi-cmsButton-Window
• epi-cmsButton-WindowSplit
• epi-cmsButton-Workflow
• epi-cmsButton-WorkflowInformation
• epi-cmsButton-WorkflowView