[vB 3.7] Create visually appealling Notices

[Wayne Luke]

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.

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

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


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

[Wayne Luke]

Remove Containing Table from Notices

Open the navbar template and find:

<if condition="$show['notices']">
<form action="profile.php?do=dismissnotice" method="post" id="notices">
<input type="hidden" name="do" value="dismissnotice" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
<input type="hidden" name="url" value="$return_link" />
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
        <td class="thead">$vbphrase[notices]</td>
    </tr>
    <tr>
        <td class="alt1">
            $notices
        </td>
    </tr>
    </table>
    <br />
</form>
</if>

Replace with:

<if condition="$show['notices']">
<form action="profile.php?do=dismissnotice" method="post" id="notices">
<input type="hidden" name="do" value="dismissnotice" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
<input type="hidden" name="url" value="$return_link" />
     $notices
</form>
<if condition="$show['forumdesc'] AND $show['notices']">
    <br />
</if>
</if>

Note this removes the container completely. You will need to use your own block level device as a container. However this makes a smoother notice experience when combined with the techniques in the first post.