Jamie Connolly - Web Developer/Designer, Glasgow, Scotland » Blog

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)

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)

Check if query string variable exists ASP.NET C#/VB

Jamie Connolly — Mon, 27 Jul 2009 15:51:30 +0000

One of the problems I encountered when I started programming ASP.NET websites was to do with the Request.QueryString function. The first projects I was worked on were built with VB.NET and I used the following code to check the existence of a query string variable:

VB.NET Code

If Request.QueryString("[VARIABLE]") <> Nothing Then
      'CODE HERE
End If

This code checked if the variable existed and if it was populated.

Moving to C# I automatically assumed that the ‘Nothing’ keyword directly translated into empty quotes ("") as shown below:

C#.NET Code

if (Request.QueryString["[VARIABLE]"] != "") {
	// CODE HERE
}

NOTE: Notice the difference in the bracket types between VB.NET and C#, VB uses rounded brackets () for array selection while C# uses square brackets [] for array selection.

After a while I noticed that if the VARIABLE was NOT in the query string the ‘if’ statement would return true and the code inside would be executed. To counter this problem an additional check must be made which check the existence of the query string variable itself. The following code shows how to check for this:

C#.NET Code

if (Request.QueryString["[VARIABLE]"] != "" && Request.QueryString["[VARIABLE]"] != null) {
	// CODE HERE
}

NOTE: This conditional will only work if both conditions are checked using the AND (&&) logical operator and NOT the OR (||) logical operator.

This section of code will now check for both the existence of the specified variable in the query string including if it contains a value.

I hope this post helps you !

Jamie

jQuery Image Gallery

Jamie Connolly — Tue, 07 Jul 2009 10:33:37 +0000

A while back I was helping out a co-worker doing some work that required the use of an HTML/Javascript image gallery. He provided me with a jQuery Image gallery from this webpage. The original gallery allows multiple images with the option to start a slideshow.

The work that was being done required an auto start function and the ability to add links to the images. The original gallery was very easy to use and to adapt so I decided to use it and just and in the extra functionality that we needed. To see the final gallery we used (before going with a Flash solution) ina action follow the link below:

jQuery Image Gallery

Download the full scripts and test here.

I had to do some reconstruction of the original javascript file, but it has been appropriately commented making it easy for you to change it as you see fit. If you have any problems with the code do let me know and I will look into it, or even any recommendation for additional functionality.

Thanks to the original author of the software.

Jamie