Go to content

Go to employees

Go to search

Creating a consistent look in EPiServer plugins

There are loads and loads of plugins for EPiServer out there on the internets. We've got places like CodeResort, CodePlex and probably a few others that collectively supply us developers with vast amounts of tools and easy solutions. Sad thing, though - a lot of it looks really dirty.

Arve Systad
 

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

 


Comments:

  1. Great post :) If you use <EPiServerUI:ToolButton .../> it will generate the <span class="epi-cmsButton"> for you. To use the button classes above, you need to set the CssClassInnerButton attribute.
  2. Yay, great tip. Added it to the post. :-)
  3. Even better: Use Paths.ToShellResource("ClientResources/Shell.css") and UriSupport.ResolveUrlFromUIBySettings("ClientResources/Epi/Base/CMS.css") (from the namespaces EPiServer.Shell and EPiServer) to resolve the paths to the css files when you include the style sheets from EPiServer. That way you'll get a consistent look when you distribute your awesome plugin/module to different EPiServer instances with different virtual path mappings.
  4. @Tarjei: Good point, updated the text above slightly.
Post a comment