notices

Simple global notices

On 03.28.11, In phpBB3 Tutorials, by

Ever needed to inform your users of something, but not wanted to post a full announcement? Displaying a simple coloured message in the header of your site is a great way to do this. Complete with “close” icon, supported by cookies.

What we’re trying to achieve

Simple notices in your header. As a board Admin at some point you’ve probably had to inform your users of something fairly important such as: Scheduled Maintenance, a change to your forum rules or default time zone change. Sometimes a full-on announcement isn’t appropriate, instead you can use a coloured message in the header of your site to draw your members’ attention. Supported by cookies, messages won’t re-appear when they are closed. Thanks to Unknown Bliss for inspiring me to make this into a tutorial.

global-notices.zip

Preparation

To complete this tutorial you’ll need a decent Source Code editor. Secondly, you need to download the global-notices.zip archive by clicking the “download” button above. Then:

Copy: /global-notices/blue-cross.gif to /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/green-cross.gif to /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/red-cross.gif to /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/yellow-cross.gif to /phpBB/styles/prosilver/theme/images/
Copy: /global-notices/jquery.cookie.js to /phpBB/styles/prosilver/template/

Step 1) HTML Edits

So first up we need to connect to jQuery, the cookie plugin and then place the notice.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Below, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Notice at very top of page

Find:

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}"></body>

Below, Add:

<div class="global-notice notice-top green">
    <strong>Notice:</strong> Scheduled Maintenance at 15:00 UTC.
    <a class="cross" href="#">Close</a>
</div>

Notice below header

Find:

<a name="start_here"></a>

Before, Add:

<br />
<div class="global-notice green">
    We're going in! See you on the other side.
    <a class="cross" href="#">Close</a>
</div>

Step 2) CSS Edits

Just some basic styling rules, accommodating 4 colour schemes by default. If you have some basic CSS knowledge you’ll be able to add your own colours.

Open: /styles/prosilver/theme/colours.css

Find:

input.disabled {
    color: #666666;
}

Below, Add:

.global-notice {
    padding: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px solid;
    -moz-box-shadow: inset 0 -1px #FFFFFF;
}

.global-notice strong {
    color: #000000;
}

.notice-top {
    border-top: none;
    border-left: none;
    border-right: none;
    margin-top: -12px;
}

.blue {
    background-color: #e5f4ff;
    border-color: #a7cee2;
    color: #004b90;
}

.red {
    background-color: #ffe5e5;
    border-color: #e2a8a8;
    color: #900000;
}

.green {
    background-color: #e4ffdf;
    border-color: #b8dfb8;
    color: #3a6e31;
}

.yellow {
    background-color: #fdffe5;
    border-color: #dfe2a7;
    color: #678801;
}

.cross {
    float: right;
    width: 12px;
    height: 12px;
    background: no-repeat 50% bottom;
    text-indent: -9999px;
    display: block;
    outline: none;
}

.blue .cross {
    background-image: url("{T_THEME_PATH}/images/blue-cross.gif");
}

.red .cross {
    background-image: url("{T_THEME_PATH}/images/red-cross.gif");
}

.green .cross {
    background-image: url("{T_THEME_PATH}/images/green-cross.gif");
}

.yellow .cross {
    background-image: url("{T_THEME_PATH}/images/yellow-cross.gif");
}

Step 3) The jQuery

Here we make the message fade out when the cross is clicked, and make sure it doesn’t show up again when the page is refreshed.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Below, Add:

<script type="text/javascript">
$(document).ready(function() {
    $("a.cross").click(function() {
        $(".global-notice").fadeOut();
        $.cookie('noticeState', 'hidden', { expires: 3, path: '/'});
    });
   
    var noticeState = $.cookie('noticeState');
   
    if(noticeState == 'hidden') {
        $(".global-notice").hide();
    };
});
</script>

Important Information

This script is meant to be simple, and as such can only be used once per page. The only way you can display more than one message (without them both fading out when you click a cross) is to disable the cross by remove the link from the code. As this is intended to be a temporary message, the cookie is set to expire after 3 days. This is configurable by editing this line in overall_header.html:

$.cookie('noticeState', 'hidden', { expires: 3, path: '/'});

With regard to choosing between colours, that’s simple. The line that calls chosen colour is also in overall_header.html:

<div class="global-notice notice-top green"></div>

Here you would simply replace green with red, yellow or blue.

Support / Donations

If you encounter any problems implementing this script, support is freely available over on the Support Forum. If you have found this script useful please consider making a donation. Finally if you find a mistake let me know here. Cheers.