When creating Episerver tools, editors and plugins, maintaining a consistent look and feel is a good thing. Read more, and see a long list of button classes on the Epinova-blog.
If we dive inside the EPiServer.CMS.UI package, the file ToolButton.css can be found in /App_Themes/Default/Styles/ inside the archive CMS.zip located in the folder /content/modules/_protected/CMS/ - it contains the icons for all these buttons. But how do they all look?
Like this! This blog post is mostly for future reference for myself.
| Name | CSS class | Icon |
|---|---|---|
| Add | epi-cmsButton-Add | |
| AddFile | epi-cmsButton-AddFile | |
| AddFiles | epi-cmsButton-AddFiles | |
| AddOff | epi-cmsButton-AddOff | |
| AddUser | epi-cmsButton-AddUser | |
| AddUserGroup | epi-cmsButton-AddUserGroup | |
| AdminMode | epi-cmsButton-AdminMode | |
| ArrowLeft | epi-cmsButton-ArrowLeft | |
| ArrowRight | epi-cmsButton-ArrowRight | |
| Cancel | epi-cmsButton-Cancel | |
| Check | epi-cmsButton-Check | |
| CheckBoxOff | epi-cmsButton-CheckBoxOff | |
| CheckBoxOn | epi-cmsButton-CheckBoxOn | |
| CheckOff | epi-cmsButton-CheckOff | |
| CheckinVersion | epi-cmsButton-CheckinVersion | |
| Compare | epi-cmsButton-Compare | |
| Copy | epi-cmsButton-Copy | |
| CopyToClipboard | epi-cmsButton-CopyToClipboard | |
| CreateFolder | epi-cmsButton-CreateFolder | |
| Cut | epi-cmsButton-Cut | |
| DelayPublish | epi-cmsButton-DelayPublish | |
| Delete | epi-cmsButton-Delete | |
| DeleteFolder | epi-cmsButton-DeleteFolder | |
| DeleteLanguage | epi-cmsButton-DeleteLanguage | |
| DeleteOff | epi-cmsButton-DeleteOff | |
| Down | epi-cmsButton-Down | |
| DownOff | epi-cmsButton-DownOff | |
| Edit | epi-cmsButton-Edit | |
| EditMode | epi-cmsButton-EditMode | |
| EditOff | epi-cmsButton-EditOff | |
| Export | epi-cmsButton-Export | |
| Favorite | epi-cmsButton-Favorite | |
| File | epi-cmsButton-File | |
| FileManagement | epi-cmsButton-FileManagement | |
| FolderUp | epi-cmsButton-FolderUp | |
| Help | epi-cmsButton-Help | |
| Import | epi-cmsButton-Import | |
| LanguageOverview | epi-cmsButton-LanguageOverview | |
| LanguagePage | epi-cmsButton-LanguagePage | |
| LanguageProperty | epi-cmsButton-LanguageProperty | |
| LanguageSettings | epi-cmsButton-LanguageSettings | |
| Locked | epi-cmsButton-Locked | |
| LogOut | epi-cmsButton-LogOut | |
| MySettings | epi-cmsButton-MySettings | |
| NewFile | epi-cmsButton-NewFile | |
| NewPage | epi-cmsButton-NewPage | |
| OpenInWindow | epi-cmsButton-OpenInWindow | |
| Paste | epi-cmsButton-Paste | |
| epi-cmsButton-Print | ||
| Property | epi-cmsButton-Property | |
| Publish | epi-cmsButton-Publish | |
| QuickEdit | epi-cmsButton-QuickEdit | |
| Redo | epi-cmsButton-Redo | |
| Refresh | epi-cmsButton-Refresh | |
| RenameFolder | epi-cmsButton-RenameFolder | |
| Report | epi-cmsButton-Report | |
| ReportCenter | epi-cmsButton-ReportCenter | |
| Revert | epi-cmsButton-Revert | |
| Save | epi-cmsButton-Save | |
| SavePublish | epi-cmsButton-SavePublish | |
| SaveShow | epi-cmsButton-SaveShow | |
| Search | epi-cmsButton-Search | |
| Security | epi-cmsButton-Security | |
| StickyEditOff | epi-cmsButton-StickyEditOff | |
| StickyEditOn | epi-cmsButton-StickyEditOn | |
| Undo | epi-cmsButton-Undo | |
| Unlocked | epi-cmsButton-Unlocked | |
| Up | epi-cmsButton-Up | |
| UpOff | epi-cmsButton-UpOff | |
| ViewMode | epi-cmsButton-ViewMode | |
| Warning | epi-cmsButton-Warning | |
| Window | epi-cmsButton-Window | |
| WindowSplit | epi-cmsButton-WindowSplit | |
| crop | epi-cmsButton-crop | |
| fliph | epi-cmsButton-fliph | |
| flipv | epi-cmsButton-flipv | |
| resize | epi-cmsButton-resize | |
| rotateccw | epi-cmsButton-rotateccw | |
| rotatecw | epi-cmsButton-rotatecw | |
| transform | epi-cmsButton-transform |
Still reading? How can the classes be used? Create a button like this:
<span class="epi-cmsButton">
<asp:Button runat="server" Text="Click me!" OnClick="DoStuff"
CssClass="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Add" />
</span>