This is an information note
This is a notification note
This is an orientation note
This is a warning note
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu libero, sit amet tristique risus. Duis viverra neque vitae metus hendrerit eget sodales ipsum fringilla. Integer accumsan dui ac odio facilisis vel scelerisque elit facilisis. Mauris non augue lectus, in dictum neque. Ut arcu diam, hendrerit ut convallis ac, fringilla ac metus. In mollis semper sodales. Ut commodo pulvinar lorem, et pulvinar quam porttitor in. Curabitur dictum risus ut mi vehicula aliquam. Maecenas libero dui, viverra id sagittis in, dictum a turpis. Aliquam erat volutpat. Ut volutpat accumsan augue eget commodo. Maecenas id molestie metus. Integer cursus mauris vel lorem congue bibendum. Ut in orci tortor. Pellentesque imperdiet pretium consectetur. Vestibulum egestas, tellus sit amet tristique accumsan, nulla tellus fringilla massa, sit amet euismod ligula erat et nisi. Morbi non urna nunc, non gravida risus.


Credits


Icon images from PixeloPhilia 1 and PixeloPhilia 2. Distributed under a Creative Commons License Attribution License ('Of course, you can use these icons if you give me the credit').

How to adapt


To add this widged to a page, add a division
<div class="wg-note" id="a-0">
and get jquery to transform that content into an interactive.
 jQuery(".wg-note#a-0").wgNote();
The text should be specified as a list of items with options.
<div class="wg-note information">This is an information note</div>
<div class="wg-note notification">This is a notification note</div>
<div class="wg-note orientation">This is an orientation note</div>
<div class="wg-note warning">This is a warning note</div>
<div class="wg-note tip">Lorem ipsum dolor ...</div>
<div class="wg-note">This is a default note</div>

Images for icons are provided by default. If you want to specify your own, overwrite the script options. Make sure that any image that you specify exists in your wikispaces file directory.
styles: {
 defaultNote: {
    icon: 'file/view/pen.png',
    contentBackground: '#FFF4BF',
    iconBackground: '#FFDD73'
 },
 tip: {
    icon: 'file/view/lamp.png',
    contentBackground: '#FFF4BF',
    iconBackground: '#FFDD73',
 },
 information: {
    icon: 'file/view/note.png',
    contentBackground: '#CEF',
    iconBackground: '#9DF'
 },
 news: {
    icon: 'file/view/news.png',
    contentBackground: '#FFF4BF',
    iconBackground: '#FFDD73'
 },
 orientation: {
    icon: 'file/view/map.png',
    contentBackground: '#E6FFB3',
    iconBackground: '#C4E67F'
 },
 notification: {
    icon: 'file/view/alarm.png',
    contentBackground: '#FFDACC',
    iconBackground: '#FFB499'
 },
 warning: {
    icon: 'file/view/alert.png',
    contentBackground: '#FFD9DD',
    iconBackground: '#FFA6AE'
 }
}
 

Code

In wikispaces use Edit > Widget > Other Widget and paste the code below.
<div class="wg-note information">This is an information note</div>
<div class="wg-note notification">This is a notification note</div>
<div class="wg-note orientation">This is an orientation note</div>
<div class="wg-note warning">This is a warning note</div>
<div class="wg-note tip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu libero, sit amet tristique risus. Duis viverra neque vitae metus hendrerit eget sodales ipsum fringilla. Integer accumsan dui ac odio facilisis vel scelerisque elit facilisis. Mauris non augue lectus, in dictum neque. Ut arcu diam, hendrerit ut convallis ac, fringilla ac metus. In mollis semper sodales. Ut commodo pulvinar lorem, et pulvinar quam porttitor in. Curabitur dictum risus ut mi vehicula aliquam. Maecenas libero dui, viverra id sagittis in, dictum a turpis. Aliquam erat volutpat. Ut volutpat accumsan augue eget commodo. Maecenas id molestie metus. Integer cursus mauris vel lorem congue bibendum. Ut in orci tortor. Pellentesque imperdiet pretium consectetur. Vestibulum egestas, tellus sit amet tristique accumsan, nulla tellus fringilla massa, sit amet euismod ligula erat et nisi. Morbi non urna nunc, non gravida risus.</div>
<div class="wg-note">This is a default note</div>

<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.notes.js"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
  jQuery(".wg-note").wgNote({styles: {
   defaultNote: {
      icon: 'file/view/pen.png',
      contentBackground: '#FFF4BF',
      iconBackground: '#FFDD73'
   },
   tip: {
      icon: 'file/view/lamp.png',
      contentBackground: '#FFF4BF',
      iconBackground: '#FFDD73',
   },
   information: {
      icon: 'file/view/note.png',
      contentBackground: '#CEF',
      iconBackground: '#9DF'
   },
   news: {
      icon: 'file/view/news.png',
      contentBackground: '#FFF4BF',
      iconBackground: '#FFDD73'
   },
   orientation: {
      icon: 'file/view/map.png',
      contentBackground: '#E6FFB3',
      iconBackground: '#C4E67F'
   },
   notification: {
      icon: 'file/view/alarm.png',
      contentBackground: '#FFDACC',
      iconBackground: '#FFB499'
   },
   warning: {
      icon: 'file/view/alert.png',
      contentBackground: '#FFD9DD',
      iconBackground: '#FFA6AE'
   }
   }
});
//-->
//]]>
</script>