[TUT] Site Message with Dismiss Button

Made this quick tutorial on request of a member from MyBB Community.
http://community.mybb.com/thread-142313-...pid1019332

This will show a global site message to all the users of your site and if they dismiss the message it will not appear again.

Dependency:
1. jQuery Library
2. jQuery Cookie Plugin

Method:
1. Go to your headerinclude template and include the jQuery library (if not already included) and jQuery Cookie plugin. find the code {$stylesheets} and add the following just before that:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='http://demonate.com/jscripts/cdn/jquery-1.8.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="http://demonate.net/CDN/Library/jquery.cookie.js"></script>

2. Now open your global.css and add at the end:

Code:

.notebox { padding: 10px; border: 1px solid #FFA600; background: #FFE478; }
#dismissnote { cursor: pointer; padding: 2px 6px; color: #000; font-weight: 700; border: 1px solid #FFA600; background: rgba(255,255,255,0.5); float: right;}
#dismissnote:hover { color: #FFF; background: #FFA600; }

3. Open your header template and add at the end:

Code:

<script type="text/javascript">
      jQuery(document).ready(function () {

      jQuery('.notebox').hide();
      if(jQuery.cookie("sitenote") != "X") {
             jQuery('.notebox').show();
    };

            jQuery("#dismissnote").click(function(event) {
                  jQuery('.notebox').hide();
                  jQuery.cookie("sitenote","X", {expires: 365});
            });
      });
</script>

Now in the same template find a suitable location (preferably, before '{$pm_notice}') and add this code:

Code:

<div class="notebox">
<span id="dismissnote">X</span>

Your supersweet exciting global site message goes here.

</div>

Thats all.

The message will appear this way and once it is closed, the cookie saves the state:



Happy Coding