This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Simple Announcement Bar

Description: How to Add a Simple Announcement Bar to Your Board

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/simple-announcement-bar/]Knowledge Base - Simple Announcement Bar[/url]

How to Add a Simple Announcement Bar to Your Board

Why
This proves a relatively easy a quick way to add an announcement or message to the header of your forum. It may be to point out a particular rule, important event, or similar. This can be done either via FTP or the Administration Control Panel (ACP).

Features
  • This is a simpe hard-coded message bar.
  • Makes use of the existing classes and selectors to minimise the amount of styling you will need to add.
  • BBCodes will not be parsed.
  • XHTML tags can be used.
  • If you are unfamiliar with XHTML tags you can just use standard text.
  • If you want a bar that is more configurable and has added features look in the Modification database for MODs, such as the, ACP Announcement Centre.

How
This requires making a code edit to each style you want the message to appear in (see below).

The best way is to:
  • Download the relevant files(s) via [kb=ftp]FTP[/kb],
  • Make backups of the files. If anything goes wrong or you want to remove the announcement just replace the edited file(s) with the backup(s)
  • Make the edit(s) with a [wiki=Text_Editors]text editor[/wiki].
  • Upload the edited file(s), via FTP, back the the original location(s).
  • Refresh the templates component – Administration Control Panel > Styles tab > Templates > name of the style > Refresh or if you don't have access to the ACP open the /cache folder of your board installation on the server and delete the tpl_your style_overall_header.html.php file (or to be sure just delete all files that start with tpl_)

An alternative method is to:
  • Go to Administration Control Panel > Styles tab > Styles Components > Templates > your style(s) > Edit
  • Then do the code edits below
  • Note: This method should only be used for temporary edits, refreshing the templates or purging the cache will likely lead to the announcement being removed.

Code Edits

prosilver

Open styles/prosilver/template/overall_header.html

Add after (At the end of the file on new lines)

Code: Select all

   <div id="announcebar" class="rules">
        <div class="inner"><span class="corners-top"><span></span></span>
            <strong>Bertie for president!</strong> - <a href="https://www.phpbb.com/shop/" title="Buy a Bertie">Buy a Mascot</a>
         <span class="corners-bottom"><span></span></span></div>
     </div>

This is the part you change to your message:

Code: Select all

<strong>Bertie for president!</strong> - <a href="https://www.phpbb.com/shop/" title="Buy a Bertie">Buy a Mascot</a>


Open styles/prosilver/theme/colours.css

Find

Code: Select all

p.rules {
   background-color: #ECD5D8;
   background-image: none;
}

Add after (on new lines)

Code: Select all

#announcebar.rules {
   background-color: #FFD700;
}
Where #FFD700 is the hexadecimal notation for whichever colour you wish to use for the background of the announcement bar.

Image


subsilver2

Open styles/subsilver2/template/overall_header.html

Find

Code: Select all

<div id="wrapcentre">

Add after (on new lines)

Code: Select all

<div class="announcebar">
   <table class="gen">
      <tr>
         <td><strong>Bertie for president!</strong> - <a href="https://www.phpbb.com/shop/" title="Buy a Bertie">Buy a Mascot</a></td>
      </tr>
   </table>
</div>

This is the part you change to your message:

Code: Select all

<strong>Bertie for president!</strong> - <a href="https://www.phpbb.com/shop/" title="Buy a Bertie">Buy a Mascot</a>


Open styles/subsilver2/theme/stylesheet.css

Find

Code: Select all

#findbar {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}


Add after (on new lines)

Code: Select all

.announcebar {
   background-color: #FFD700;
   border-width: 1px;
   border-style: solid;
   border-color: #BB9860;
   padding: 4px;
   margin: 15px 25px 0 25px;
   font-weight: normal;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
Where #FFD700 is the hexadecimal notation for whichever colour you wish to use for the background of the announcement bar.

Image


  • 201200507 Oyabun1 Changed code to remove multiple use of same CSS ID selectors. Added reference to changing background colour.