[VB4]: How to create custom styled notifications

[TAF]

With vB4 and it's new CSS driven layout system it's super easy to highly customize the same aspects of the site in different ways. For this tutorial I'm showing you how to use vBulletin 4 CSS on the notifications to give a different and unique look to each notification by only adding CSS and no template changes.

When a new notification is created it is given an ID number(1), when another new one is created it's increased by one and given another new ID number (2). In a stroke of genius (either intentional or not) the vBulletin style team gave the notifications a ID tag that will allow overriding of the standard styling because of the way CSS works, an ID will override a class.

For my example I'm using the standard Guest Notice with the ID of 1. Just add the following lines to your vbulletin-chrome.css file (A better way is to use Lynnes Additional CSS Mod).

#notifications a:link { color: black; }
#nonotifications a { color: black; }

#navbar_notice_1 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 75px;
background-repeat: no-repeat;
background-position: 10px center;
}

#navbar_notice_1 {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('images/misc/info.png');

}

Then upload the attached attention.png file to 'images/misc/'

The end result is a new and better looking notification that makes for a good "Warning" rather than the default one. You can find tons of free icons all over the web that will be suitable replacements for these ones. The ones I used you can find for free at http://www.jankoatwarpspeed.com/file...atus_icons.zip

You can get more vBulletin 4 Optimization & Customization tips at my blog: David McHenry vBulletin 4 Optimize

Full notification CSS code used:

#navbar_notice_1 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 75px;
background-repeat: no-repeat;
background-position: 10px center;
}

#navbar_notice_1 {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('images/misc/info.png');
}


#navbar_notice_3 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 75px;
background-repeat: no-repeat;
background-position: 10px center;
}

#navbar_notice_3 {
color: #4F8A10;
background-color: #DFF2BF;
background-image: url('images/misc/good.png');

}

#navbar_notice_4 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 75px;
background-repeat: no-repeat;
background-position: 10px center;
}

#navbar_notice_4 {
color: #00529B;
background-color: #BDE5F8;
background-image: url('images/misc/help.png');
}

#navbar_notice_5 {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 75px;
background-repeat: no-repeat;
background-position: 10px center;
}

#navbar_notice_5 {
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/misc/error.png');
}