Template-CSS Mod Site Message with Dismiss Button

Made this quick tutorial on request of a member from MyBB Community.

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.

1. jQuery Library
2. jQuery Cookie Plugin

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:

<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/jscripts/cdn/jquery-1.8.2.min.js' type='text/javascript'%3E%3C/script%3E"));
<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:

.notebox { padding: 10px; border: 1px solid #FFA600; background: #FFE478; display: none; }
#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:

<script type="text/javascript">
      jQuery(document).ready(function () {
      if(jQuery.cookie("sitenote") != "X") {

            jQuery("#dismissnote").click(function(event) {
                  jQuery.cookie("sitenote","X", {expires: 365});

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

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

Your supersweet exciting global site message goes here.


Thats all.

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

[Image: EwIQza3.png]

Happy Coding Big Grin

Possibly Related Threads…
Thread Author Replies Views Last Post
  Template-CSS Mod Dismiss Moderator Notice effone 0 867 07-31-2013, 12:04 PM
Last Post: effone