Newsbar/Announcements

[Fatal Hazard]

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.

https://vborg.vbsupport.ru/external/2013/07/7.png

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 :)

[dandanch]

Thanks, I added the style to my additional.css and not forumhome :)

[Fatal Hazard]

Okay, it should work either way, for this tutorial I put it in the FORUMHOME :)

[joeychgo]

Thanks, I added the style to my additional.css and not forumhome :)


Could you explain how please

[dandanch]

Okay, it should work either way, for this tutorial I put it in the FORUMHOME :)

The only reason I put it in additional.css is when I tried forumhome for what ever reason it wouldn't work for me.

Just add the style code to the bottom of additional.css with out the tags:
.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;}

[joeychgo]

oh, I misread the instructions - my mistake.

[Fatal Hazard]

The only reason I put it in additional.css is when I tried forumhome for what ever reason it wouldn't work for me.

Just add the style code to the bottom of additional.css with out the tags:
.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;}

I'm glad you managed to get it working and I am going to add this to the tutorial so if others get the same issue (custom style) then they can hopefully resolve it.


Thanks.

[Fatal Hazard]

oh, I misread the instructions - my mistake.

No problem, if you have successfully installed it don't forget to mark as installed :)

[Fatal Hazard]

Could you explain how please

I've added the additional CSS option to the tutorial.

[stevieb]

all over the shop in vB4.2.0 lol

* uninstalled

[Fatal Hazard]

all over the shop in vB4.2.0 lol

* uninstalled

Okay, are you using a custom style?
Did you place the code in the correct place?
Have you made any previous modifications to the required templates?

[stevieb]

I added the code to alternative CSS and added the p class where directed.

All original files on standard vB 4.2.0 template.

I dunno lol. It just didn't work. Nothing there at all at one point then just got code in top left above logo.

Cheers

[Fatal Hazard]

I added the code to alternative CSS and added the p class where directed.

All original files on standard vB 4.2.0 template.

I dunno lol. It just didn't work. Nothing there at all at one point then just got code in top left above logo.

Cheers

When you added the CSS code to the additional.CSS template did you remove the <style> tags?
So the code should be:.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;}

[stevieb]

Yes I did :)

[ahobilam]

Good work!
Lot of improvements required in instructions.

Item 2 is not required for custom styles and the style included in the additional.cs is enough.

In Item 3.
Mentioned Find and not given where to find?
and in the replacement code should add clear instructions to change the url of the users site otherwise 404 error will occur.
Also can suggest some good location for that.

[Fatal Hazard]

Good work!
Lot of improvements required in instructions.

Item 2 is not required for custom styles and the style included in the additional.cs is enough.

In Item 3.
Mentioned Find and not given where to find?
and in the replacement code should add clear instructions to change the url of the users site otherwise 404 error will occur.
Also can suggest some good location for that.

Thanks but I don't know what you are talking about when you say item 2 is not needed. I am not saying to put the code in the additional.css and the FORUMHOME, you can do either. And I just thought it was common sense that if I say find code in the FORUMHOME then do not mention another template from that it would still be the same template, but that's just me. I don't want you to think that I was saying you put the CSS in 2 templates, it was your choice, either in the additional.css or FORUMHOME, Then the class in the FORUMHOME. So the CSS in either the additional.css or FORUMHOME and the class in the FORUMHOME. Oh and I think that: http://yoursite.com/THREADURL is pretty clear as to what you put there. If you want you don't even have to put the URL in, it can just be an announcement.

[Fatal Hazard]

Yes I did :)

Instead of putting the CSS in the additional.css put it in the FORUMHOME instead. Remember to add the <style> tags to the CSS when adding it to the FORUMHOME. Please read the instructions as to where you need to put the CSS in the FORUMHOME template.

[MahdyE23]

Can you help me? This is whats showing for me: (All this was edited in the FORUMHOME template)

http://prntscr.com/1k17hc

And these are the codes I have added, like you said to. First I added:
<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>

Then I added this:
<p class="newsbar"><strong>Welcome To RebellionX!</strong> <a href="http://rebellionx.org/forums/showthread.php?2-Welcome-to-RebellionX&p=12#post12" target="_blank">Welcome to RebellionX!</a></p>

But it doesn't even display. What did I do wrong?

[Fatal Hazard]

Can you help me? This is whats showing for me: (All this was edited in the FORUMHOME template)

http://prntscr.com/1k17hc

And these are the codes I have added, like you said to. First I added:
<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>Then I added this:
<p class="newsbar"><strong>Welcome To RebellionX!</strong> <a href="http://rebellionx.org/forums/showthread.php?2-Welcome-to-RebellionX&p=12#post12" target="_blank">Welcome to RebellionX!</a></p>But it doesn't even display. What did I do wrong?

Okay, first off did you add the codes to the correct place?
If you did then add the CSS to the additional.css template but remove the <style> tags. So the code for the additional.css would be:
.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;}
Remember to remove the CSS from the FORUMHOME and just leave the class there.

[nizzie]

Any way to make this so that users can make it collapse?

[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:

https://vborg.vbsupport.ru/external/2014/06/41.png