2. Styling the Unread Message/Notification Numbers and Aligning Elements

In this tutorial we walk you through how to skin the new DNN 6.2 notification area to match your skin.

The notification area has quite a simple HTML structure and is quite easy to style.

If you haven’t worked with skin files and CSS before we recommend that you follow the DNNCreative "How To Build Skins For DotNetNuke 6.x" tutorial before you begin.

In this tutorial we will be utilising the developer tools built into Google Chrome. These tools allow us to see our CSS changes in real time and vastly improve development time.

If you don’t have any previous experience with skin ascx files, you might want to follow the DNNCreative "How To Build Skins For DotNetNuke 6.x" tutorial before you begin.

This video contains:

• How to select the unread notification numbers with CSS
• Styling the span tags
• Using negative margins to position the span tags within the icons
• How to align the notification elements horizontally
• Moving the login/logout link within a skin ASCX file
• Aligning the login link alongside the notification area
• How to add a border around the entire area
• Resizing the avatar image
• How to position the text links vertically