Have you ever wanted to distinct your custom sections in the Toolbox from the other Sitefinity OOTB sections? This blog post will show you a way to achieve it.
Option 1 - Using Toolboxes config:
1. Open the Sitefinity Web Application in Visual Studio and go to App_Data >> Sitefinity >> Configuration >> ToolboxesConfig.config
2. Find the section you’d like to customize
3. Wrap the Section’s title in span with class that will hold the styling for the custom icon like in the example below:
4. Save your changes
5. Go to the CSS file you are using for styling fixes in Sitefinity backend. Please note that the styles of your custom Theme are loaded in Page Editing mode, so you may add new css file in your theme as well as use your main theme CSS.
Here is an example of the styles that could be applied to the custom icon:
Option 2 - Using Toolbox Settings in Sitefinity backend.
1. Open Sitefinity Backend
2. Go to Adminstration >> Settings >> Advanced Settings
3. Expand Toolboxes section >> Toolboxes >> PageControls >> Sections and find the section you’d like to customize
4. Click on Section to edit its properties
5. Wrap Section’s Title in span with class that will hold the styling for the custom icon like in the example below:
6. Save your changes
7. Perform step 5 from the previous option.
And you are done! 😊