Thread Rating:
  • 10 Vote(s) - 3.6 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] How to add a CSS news bar to your index
#1
I could have sworn there was a tutorial here on this already but there isn't (unless I have infact gone blind)... this is in the Wiki somewhere but I wrote this myself (says pretty much the same stuff though).

On the MyBB community forums, there is a 'newsbar' at the top of the index page, under the welcomeblock. This is useful for things such as making a specific thread more noticeable, giving a general message, making a global announcement, etc etc. It's easy to set up, here's how.

Go to 'ACP --> Templates & Style --> Templates --> **expand template set** --> Index Templates --> index'. Find:

{$headerinclude}

And directly underneath, add this code:

<style type="text/css"> 
.newsbar_blue {
	background: #CCCCFF;
	border-top: 2px solid #000033;
	border-bottom: 2px solid #000033;
    border-left: 2px solid #000033;
	border-right: 2px solid #000033;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
	font-weight: bold;
}
</style> 

This will give a light blue background with a dark blue border. Colours should be in HEX code format; colour codes can be found here. All of this is fully customizable, this is just an example. This particular style is called 'newsbar_blue'. To add the newsbar to your index, add this code wherever you want it (normally under {$header}):

<p class="newsbar_blue">Whatever you want here</p>

Here, you must make sure the name is the same as the name given to the CSS code. You can put anything you want where it says, and format it with HTML. For example, you could have:

<p class="newsbar_blue">Forum: <a href="http://www.learnmybb.com">Learn MyBB</a></p>

You can add multiple CSS blocks and multiple newsbars.

Enjoy Smile
MyReactions - All Plugins

Can you still feel the butterflies?

Free never tasted like pudding.
Reply
#2
Great Tutorial Matt

But afraid im going to stick with the plugin for this makes my life easier, than editing Templates!

Checked Works Great!
Reply
#3
Thanks Smile That plugin is easier to use but you can only have one IIRC. With this, you can have as many as you like.
MyReactions - All Plugins

Can you still feel the butterflies?

Free never tasted like pudding.
Reply
#4
The CSS we use here on this forum is posted at [Wiki: Help:Latest News Bar] (Broken link, head over to docs.mybb.com instead)
Dennis Tsang
Former MyBB Team Member
Web: http://dennistt.net
Reply
#5
Ah that's the one, thank you Smile
MyReactions - All Plugins

Can you still feel the butterflies?

Free never tasted like pudding.
Reply
#6
does the plug in do anything special , like have a place to add the scrolling marquee features or is that show up in settings on both?

also, does the plug in one show up on the index page only?

or does the plug in not scroll, and jsut show up as a message?

i like the pm message on the forum board hear! and the other for a message or announcement!
Even Lies Can't keep a good man down. Heart
Reply
#7
Oh don't use marquee, it's so ugly. Spare the eyes of the users please, it's so 1997!
Reply
#8
Great tutorial but am having a little problem

<p class="newsbar_blue">Forum: <a href="http://www.learnmybb.com">Learn MyBB</a></p> 

becomes

<p class="newsbar_blue">Forum: <a&nbsp;href="http://www.learnmybb.com">Learn MyBB</a></p> 

and the link doesn't works. Please help
Reply
#9
<a&nbsp;


why is <a&nbsp there?
Reply
#10
I don't know it automatically comes there when I save the template.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)