Forum Home Enhancements - Newsbar/Announcements

What is it?

This is a simply yet very effective newsbar that you can display at the top of your forum. You can display 1 or as many as you like and change the colour and border of each one.


How to Install?


1. Go to AdminCP --> Styles & Templates --> Your Style --> Edit Templates --> Forum Home Templates --> FORUMHOME
2. Find:

{vb:raw headinclude}
    <title>{vb:raw vboptions.bbtitle}</title>
    <script type="text/javascript" src="clientscript/vbulletin_read_marker.js?v={vb:raw vboptions.simpleversion}"></script>

and below place:

<styletype="text/css">
.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;} </style>

Additionally you can instead add this code to the end of your additional CSS by going to your AdminCP --> Templates & Styles --> YOUR STYLE --> Edit Templates --> Additional CSS. If you decide to do this please make sure you remove the <style> tags so the code would look:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

If you put the CSS in the FORUMHOME you do not put it in the additional.css. The same goes for if you put the CSS in the additional.css you do not put it in the FORUMHOME.
3. Find (in FORUMHOME):

<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
    </div>

and below place:

<p class="newsbar"><strong>Latest News:</strong> <a href="http://yoursitehere.com/THREADURL" target="_blank">Your Important Announcement Here</a></p>

4. Save and enjoy




If you want to have multiple just repeat step 3 by placing the same code below. If you want to have multiple that are different colours then you'll need to duplicate the CSS with different class names (say .newsbar_red) and change the CSS colours accordingly.



If you use this please mark as installed
Support (if any) will be prioritized to those who have this modification marked as installed.
Thanks and Enjoy

[thetechgenius]

If I may suggest something?

Well, this is a really nice idea, I am using it on my forum. However, can I give you some advice about your CSS?

I edited the CSS a bit, and I think it looks a lot better like this:

/* Newsbar Announcements - Begin */
.newsbar {    background: #D6ECA6;  border: 2px solid #8DC93E;  border-radius: 5px;  text-align: center;    margin: 10px auto;    padding: 5px 20px;   font-size: 11px; font-weight: bold; }
/* Newsbar Announcements - End */

This way adds a border around the entire thing. Your CSS adds a border just on the top and bottom. This also makes the font just a bit smaller, and it also adds rounded corners for a more professional look.

If you like my CSS Edits, your more then welcome to add them to your post.

Here is a screenshot: