By Andy Stephenson
June 2012
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.
Contents:
Video 1 - Preparing Chrome Developer Tools and Adding the Icons
- Introduction
- Setting up the Google Chrome developer tools
- Accessing your skin.css file from Google Chrome
- Brief overview of the notification area structure
- How to create ID and Class CSS selectors
- Saving your work
- Removing (hiding) the text within the notifications and messages links
- How to add icons as background images to the notifications and messages links
- Using the display:block property and resizing the anchor tags
Video Duration: 12min 52sec
Video 2 - Styling the Unread Message/Notification Numbers and Aligning Elements
- 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
Video Duration: 10min 30sec