With the new Notices system in vBulletin 3.7.X, you can make announcements and notices to your members based on particular criteria. By default they are plain text though you can liven them up using any HTML at your disposal. Here is a quick tip to make visually appealing notices without having to resort to a lot of HTML all the time. You can create CSS classes for common things that you might use often while creating notices.
Here are some examples that you might try.
Place the above CSS in the second Additional CSS Definitions box found at:
Styles & Templates -> Style Manager -> %YourStyle% -> MainCSS.
This code creates colored boxes that can be used for errors, simple notification, and success messages. I also included a fun one for birthdays. To use these in your notices you would do something like:
The key here is the class="success". You can change this to any class that you have created. I have also included an image to make it stand out more. Create your notice, add your text and set your criteria. It will take on the appearance set by the CSS above.
The icons used are from the FamFamFam Silk set
Here are some examples that you might try.
Code:
.error, .notice, .success, .birthday {
padding:.8em;margin-bottom:1.6em;
border:2px solid #ddd;
}
.error {
background:#FFCCFF;
color:#8a1f11;
border-color:#FF3366;
}
.notice {
background:#FFF6BF;
color:#514721;
border-color:#FFD324;
}
.success {
background:#E6EFC2;
color:#264409;
border-color:#C6D880;
}
.birthday {
background:#00FFFF;
color:#9900FF;
border-color:#6633CC;
}
.error a {
color:#8a1f11;
background:none;
padding:0;
margin:0;
}
.notice a {
color:#514721;
background:none;
padding:0;
margin:0;
}
.success a {
color:#264409;
background:none;
padding:0;
margin:0;
}
.birthday a {
color:#9900FF;
background:none;
padding:0;
margin:0;
}Place the above CSS in the second Additional CSS Definitions box found at:
Styles & Templates -> Style Manager -> %YourStyle% -> MainCSS.
This code creates colored boxes that can be used for errors, simple notification, and success messages. I also included a fun one for birthdays. To use these in your notices you would do something like:
HTML:
<p class="success"><img src="images/icons/accept.png" alt=""/> YOUR TEXT HERE</p>The key here is the class="success". You can change this to any class that you have created. I have also included an image to make it stand out more. Create your notice, add your text and set your criteria. It will take on the appearance set by the CSS above.
The icons used are from the FamFamFam Silk set