[vB 3.7] Create visually appealling Notices at Your vBulletin Resource The Staff Lounge

You are here: Home » vBulletin Tips » [vB 3.7] Create visually appealling Notices

[vB 3.7] Create visually appealling Notices

76 Views Published 4 months, 3 weeks ago in vBulletin Tips

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.

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

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

Here is an example screenshot:
Attachment 27244

The icons used are from the FamFamFam Silk set and are included below as well.

Attached Images