Customize Custom Sitefinity Toolbox Elements

I don’t like delivering projects to clients with the basic anon generic images for custom widgets and layouts.  Layouts especially since the default is a weirdo arrow for some reason.  So this will show you how to change that to something more meaningful AND add some text right into the toolbox (if you want).

Step 1: Create a Custom Image

This step is optional, I mean if you like users seeing the custom layout “Arrow” image, but I find it a bit sloppy…custom image makes things appear more native.  Here’s an example:

…feel free to save and steal it if you want :)

Step 2: Add a custom class to the toolbox item

So in this case I put a global “shared” class called layout-custom.  This is just so I don’t have to duplicate Css on each element.  Appended to that is the specific class name where you’ll set the content in the next step.

Step 3: Add the Css

The page editor doesn’t load in with an iframe or anything so your core theme css will affect the design elements in the designer.  So you can just throw this into your LESS file and it’ll tweak the toolbox elements

Result

Optional

…Instead of the pseudo element idea and hardcoding the description into css you could run some jquery to move the title tooltip text into an actual element and style it.  Personally I don’t want the extra scripts running.