Part 2: Image Icons and CSS

In this tutorial I will be concentrating on creating images and CSS to match to the new custom section and it’s tree menu.

Custom Section Icon

So far (from part one) we have created a new custom section in Umbraco via the database. In order to access this section in the administration panel, the section must be assigned an icon (although the link still exists in the ‘Sections’ panel).

Umbracos 3 and 4 use different techniques to display the section icons. Umbraco 3 uses a single image for each section while Umbraco 4 uses CSS to split one master image into parts for each section. (My suggestion at this point would be to overwrite all the section icons with your own icons to keep the styles consistant.)

Umbraco 3

Create the icon

In Umbraco 3 the folder that holds the icons is /umbraco/images/tray/. When creating your own icon be sure the dimensions match the other icons in the folder (including margins for consistancy). When you have created the icon save it into the folder mentioned above.

Assign the icon

Once the new icon has been created the next step is to link the icon to the custom section that was created in part one.

If we take another look at the umbracoApp table from part one the appIcon field is used to identify the icon used for that section as shown on the right. Inserting the filename used for the icon we have just created to the appIcon field will assign the icon to the custom section. Once this is done you should now see your new section with the assigned icon in the sections panel.

Umbraco 4

Create the icon

In Umbraco 4 the section icons are loaded from a master image using CSS to select and position the corresponding icon. The master image can be located in the following location /umbraco/images/tray/traySprites.png. To assign an icon to a custom section we need to add a new icon to the bottom of the master image. The same spacing between each icon should be kept when adding a new icon to the master image as demonstrated on the right.

Create the style

Once the new icon has been added to the master image we must create a style that references this new icon in the admin stylesheet. The default stylesheet that umbraco uses for the existing icons can be found at the following location /umbraco/css/umbracoGui.css. The styles for the section icons look like the following:

/* tray sprites */
.traycontent{background-position: -18px -18px;}
.traymedia{background-position: -18px -90px;}
.trayusers{background-position: -18px -162px;}
.traysettings{background-position: -18px -234px;}
.traydeveloper{background-position: -18px -306px;}
.traymember{background-position: -18px -378px;}
.traystats{background-position: -18px -450px;}
.traytranslation{background-position: -18px -522px;}
/* end tray sprites */

Using the coordinates of the other tray sprites in the CSS we can work out what coordinates the new custom icon requires. For example:

/* tray sprites */
.traycontent{background-position: -18px -18px;}
.traymedia{background-position: -18px -90px;}
.trayusers{background-position: -18px -162px;}
.traysettings{background-position: -18px -234px;}
.traydeveloper{background-position: -18px -306px;}
.traymember{background-position: -18px -378px;}
.traystats{background-position: -18px -450px;}
.traytranslation{background-position: -18px -522px;}

.traycustom{background-position: -18px -594px;}

/* end tray sprites */

Assign the style

Once the new style has been created the next step is to link the style to the custom section that was created in part one.

If we take another look at the umbracoApp table from part one the appIcon field is used to identify the style used for that section as shown on the right. Inserting the class (including the .) used in the CSS file we have just created to the appIcon field will assign the icon to the custom section. Once this is done you should now see your new section with the assigned icon in the sections panel.

End of Part 2

OK, thats the end of Part 2 of the Umbraco Custom Sections Tutorial. The next tutorial post invloves adding elements to the tree menu for your custom section.

I hope this tutorial has helped and please feel free to contact me or leave a comment with any questions regarding the tutorial.

Part 3: Creating the tree menu (Coming Soon)