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:
- 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