Jamie Connolly - Web Developer/Designer, Glasgow, Scotland

Umbraco Custom Sections: Part 2

Jamie Connolly — Sun, 22 Aug 2010 23:13:43 +0000

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)

abica Website

Jamie Connolly — Fri, 08 Jan 2010 18:14:02 +0000

Website - For GRP
http://www.abica.co.uk/

Features

Custom Built Content Management System

Document Library upload feature which allows documents to be added to any content managed page.

Custom Editing of content managed pages using HTML or plain text.

Ability to add sub-pages to each main section.

News Section with Text, Image and document uploads.

Custom sections to deal with FAQs, Phone Tarrifs and Mobile Phones.

Square Deal Motors (SDM) Website

Jamie Connolly — Mon, 09 Nov 2009 00:11:16 +0000

One of the websites that I developed for GRP that went live recently was the Square Deal Motors (SDM) website. The website is managed by a custom built CMS that has multiple functions that allows the management of all the website pages which includes promotional pods and vehicle management.

One of the biggest parts of the website is the used car search which allows you to search for used car under a variety of different criteria. The used car database is updated automatically every day from an XML file which is imported via third party sources.

http://www.sdm-group.co.uk/

Umbraco Custom Sections: Part 1

Jamie Connolly — Thu, 17 Sep 2009 16:10:10 +0000

Part 1: Adding a blank custom section

Umbraco by default lists each of the sections in the administration panel (Content, Users, Media etc . . .) from the umbracoApp database table that is created automatically when Umbraco is installed. The following shows the umbracoApp table in versions 3 and 4:

The umbracoApp table

Umbraco 3: umbracoApp table
Click to enlarge . . .
Umbraco 4: umbracoApp table
Click to enlarge . . .

The highlighted sections in the images above show the records I have manually inserted into SQL Management Studio. Heres a quick explaination of each of the fields so you know what to do when inserting your own section:

sortOrder: The order in which the icons are displayed in the Umbraco Admin.

appAlias: A unique identifier to allow Umbraco to distinguish between the different sections. Must be unique to the other secitons in the table.

appIcon: The appIcon field is used to determine what image to display in the Umbraco admin. Umbraco 3 and Umbraco 4 use this field in two separate ways:

Umbraco 3: In Umbraco 3 the appIcon field is used to store an image filename that can be retrieved from a specific folder (\umbraco\images\tray\umbraco\). For example: customSection.jpg.

Umbraco 4: In Umbraco 4 the appIcon field is used to store the name of a CSS class which loads the image from a single image which holds all the icons. For example: .customSection.

appName: This is a simple text field that holds the name of the section.

appInitWithTreeAlias: This field is not used in this tutorial and should be left at NULL

After creating a new record in the umbracoApp table (take note of the appAlias for this section) we must now add an entry into the umbracoAppTree table. This will place a top level node onto the navigation tree in the custom section.

The umbracoAppTree table

Umbraco 3: umbracoAppTree table
Click to enlarge . . .

Umbraco 4: umbracoAppTree table
Click to enlarge . . .

The highlighted sections in the images above show the records I have manually inserted into SQL Management Studio. Heres a quick explaination of each of the fields so you know what to do when inserting your own tree node:

treeSilent: This determines if the tree node is shown on the navigations tree in the Umbraco Admin. This should be set to False.

treeInitalize: This field determines wether the node is initialised when the tree is rendered or if it is used for other navigation purposes, but for tree nodes such as in this example it is set to True (the scope of this tutorial doesn't cover using this feature for anything other than simple node viewing).

treeSortOrder: The order in which the tree nodes are displayed in the Navigation panel.

appAlias: The appAlias refers to the Section which this node will be under as taken from the umbracoApp table

treeAlias: A unique identifier to allow Umbraco to distinguish between the different tree nodes. Must be unique to the other nodes in the table

treeTitle: This is a simple text field that holds the name of the tree node.

treeIconClosed & treeIconOpen: these fields relates to the icon representing the node on the navigation panel

Umbraco 3: In Umbraco 3 the treeIconClosed & treeIconOpen fields are used to store the image filenames that can be retrieved from a specific folder (\umbraco\images\tree\umbraco\). For example: folder.jpg and folder_o.jpg.

Umbraco 4: In Umbraco 4 the treeIconClosed & treeIconOpen fields are used to store the name of the CSS classes which loads the images from a single image which holds all the icons. For example: .sprTreeFolder and .sprTreeFolder_o. Note that the Umbraco 4 table can also handle direct images as well.

treeHandlerAssembly: This field holds the name of the Assembly (or DLL in this case) that the sub nodes of the current node will be loaded. We will revisit this field in Part 3 (Coming Soon) when we create our own Assembly Library to create our own menu. For the moment it can be populated with 'umbraco'.

treeHandlerType: This field holds the name of the type/method used in the DLL that populates the menu. Again we will revisit this field in Part 3 (Coming Soon). For the moment this field can be populated with one of the other treeHandlerType fields.

action: This field is used to call a function when the node is selected. For this tutorial it will remain at NULL

After entering a new record into the umbracoTreeApp table the next step is to give the Umbraco administrator access to the new section. There are two ways of performing this task:

Allow the Umbraco Administrator access to use this section under the umbracoUser2App table using the custom sections appAlias or

The Administrator could be given access from the 'Users' section in the Umbraco admin as shown in the image on the right. (Recommended)

Once the appropriate users (Administrator in this case) has been given access to the custom section the 'Sections' panel contains a new listed item. Since we have not configured the images or the CSS for the custom section it will either show as an image error or partial image depending on which Umbraco version and browser you are using.

End of Part 1

OK, thats the end of Part 1 of the Umbraco Custom Sections Tutorial. The next tutorial post invloves adding the images and editing the CSS for the custom section's icon.

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

Part 2: Image Icons and CSS »

« Return Umbraco Custom Section Tutorial Menu

Umbraco Custom Sections: Introduction

Jamie Connolly — Thu, 17 Sep 2009 16:03:17 +0000

Introduction

A couple of months ago I re-created a website in Umbraco from an existing content managed website. There was a lot of useful code behind the original website that wouldn't have been easy to implement in the Umbraco environment. So I decided to create a custom section in Umbraco to use the code present in the previous content management system and have the best of both worlds. So here a tutorial of how I created it (created my custom section in Umbraco 3, but included how to do it in Umbraco 4 for your convenience).

This tutorial is designed to give you the ability to create your own custom sections within the Umbraco Administration Panel. The tutorial is based on using Umbraco 3 and 4 using MS SQL.

Before we begin:

This tutorial requires the use of Microsoft SQL Server Management Studio and Microsoft Visual Studio 2008 either the full or express editions will work.

Contents

Part 1: Adding a blank custom section »
Part 2: Image Icons and CSS »
Part 3: Creating the tree menu (Coming Soon)
Part 4: Adding secured pages to umbraco (Coming Soon)