Notification Options

Please contact the website communications specialist if you are interested in added custom code as listed below to any of your pages.  This page is for instructions purposes only for pages that have been setup and approved to display such content. 

 

The html structure for the notices is very simple. To create a notice with the default styling you would use the following code:

<div class="notice">

<span>

<p>

<strong>Default Notice</strong>

This is the default notice style

</p>

</span>

</div>

 

 

The next thing you might want to do is change the colour of the notice. There are 8 different colour options including the default grey.  Default, Red, Orange, Yellow, Green, Indigo, Violet.  See the visual examples below. 


It's important to note the color names as they are the names of the classes used to change the notice color. For example, if you wanted to make the notice we created earlier red, you simply add the "red" class to the button, or if you wanted to make it blue you would add that class, like so:

<div class="notice red">

<span>

<p>

<strong>Color Only</strong>

This notice will appear red with no icon. 

</p>

</span>

</div>

 

To add a hidden description simply add your content inside a paragraph with the class "description". The CSS code will then hide this from the user until they mouse over the notice. You can see a demonstration of this in the index.html file supplied with this product. The first notice has a hidden description.

To add an icon, simply add it's class to your notice div:

<div class="notice download">

<span>

<p>

<strong>Icon Only</strong>

This notice will be the default color with the download icon.

</p>

</span>

</div>

 

 

To use an icon and a color, simply add both classes to your notice div:

<div class="notice red download">

<span>

<p>

<strong>Color and Icon</strong>

This notice box will appear red with the download icon.

</p>

</span>

</div>

 

Notification Color Options

Color Test default

Color Test red

Color Test orange

Color Test yellow

Color Test green

Color Test indigo

Color Test violet

Notification Icon Options

Default Notice This is the default notice style ...(more)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Default Notice (no icon) This is the default notice style with no icon

Icon Test notfound

Icon Test back

Icon Test bookmark

Icon Test calendar

Icon Test check

Icon Test comment

Icon Test delete

Icon Test download

Icon Test edit

Icon Test forward

Icon Test lock

Icon Test love

Icon Test mail

Icon Test plus

Icon Test refresh

Icon Test rss

Icon Test setting

Icon Test tag

Icon Test time

Icon Test unlock

Icon Test upload

Icon Test user

Icon Test volume

Icon Test window

Icon Test ajax