OK, maybe this is obvious for everyone else, but it wasn’t to me. So this is part sharing and part to remember my self. 🙂
And for the record, this may not be the most correct way, but it’s the way i figured out.
What i wanted to do
What i wanted to do, was to make some fancy icons that shows up in the block listing. That means the listing that shows your created blocks.
Since i had nice icons showing up when i create a new block, i really wanted this to work.
The easy part is to figure out you have to create a descriptor class. There’s tons of examples showing that. But most of them refers to internal css-classes, like epi-iconFacebook that grabs the icon from a sprite already existing in Epi UI. What if i want to make my own class and sprite?
Create a descriptor
The first thing i figured out was i had to create i descriptor class. Theese can be handy for a lot of things, but in this case there’s not much to it.
[UIDescriptorRegistration]
public class ServiceDeskBlockDescriptor : UIDescriptor<ServiceDeskBlock>
{
public ServiceDeskBlockDescriptor()
: base("epi-iconServicedesk")
{
DefaultView = CmsViewNames.AllPropertiesView;
}
}
The only important thing here is epi-iconServicedesk which is the class name used to show the correct icon. If you substitute that name with epi-iconFacebook you will instantly get a working icon for your block, the facebook icon.
Create sprite
You don’t have to create a sprite, it works fine with a 16×16 image of any supported format, but i needed a lot of icons so i made a sprite in a 16×16 grid.
Create CSS
Using firebug it was easy to figure out how the existing classes were made. It’s all just a background. I saved my css classes in a separate file called blockicons.css.
.Sleek .epi-iconServicedesk {
background:url('/Static/images/Alla_ikoner_16x16.png') -64px -16px no-repeat;
height: 16px;
width: 16px;
}
Module.config
This is the part that wasn’t obvious at all for me. I didn’t really find any thing about this at all, but i did find a few articles on how to create a dojo widget. Theese got me in right direction.
In your websites root folder, create (or modify) the file module.config, and add your css file.
<?xml version="1.0" encoding="utf-8"?>
<module>
<clientResources>
<add name="epi-cms.widgets.base" path="/Static/css/blockicons.css" resourceType="Style"/>
</clientResources>
</module>
If i got this right, the name epi-cms.widgets.base make EpiServer load your client resources when it start itself. If you choose another name, it loads when needed by your home made dojo widget (which does not exist in this case).
Finishing up…
Compile your project and restart your web server. Go to your sites edit UI and you should end up seeing something like the first image in this post.
EPiServer really cache theese things well, so modifications to icons and css files may need a restart. So don’t get to upset if you make changes that doesn’t seem to apply.