MyBB Community Forums - Floating Announcement Bar

Do you need a floating Announcement Bar + links, that sticks to the top of your window as you scroll down a page. So this tutorial will help you.
This will work for any versions of mybb.

Adding Codes

Step 1: Locate the custom/default NAvBar location
Step 2 : Admin Cp >> Templates & Styles >> Templates >> your theme >> Header Templates > Edit Header >> Now add the given Codes at the TOP

Quote:<div class='openbloggernotification' id='onlinedevelopersnoti' style='display: block; margin-top: 0px;'>
<div id='onlinedevelopers'>
(Announcement Here) You can add Links too
</div></div>

Now save the codes..

Adding CSS

Step 3: Now go to theme >> your theme >> Add style sheets
File name : onlinedevelopersnoti .css
Attached to : Globally

then choose write my own content. Then paste the css codes given below and save it

Quote:#onlinedevelopersnoti{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}
#onlinedevelopers {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #fff;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #90F128;
}
#onlinedevelopers a{
text-decoration: none;
color:#FFFC00;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}

Changing the Design:

To change the background color of the bar simply edit #2E2F2E
To change text color edit #fff
To Add a site logo insert the image url. The logo Height should not exceed '20' pixel and width not longer that '200' pixel
You can add link with <a href=' Url ' >Link Name </a>

Also check Floating NAVBAr

Nice.. Mind to share for bottom version ??

How to reduce the width of the bar ?? It blocked my logo Big Grin

(2015-09-21, 06:46 PM)gamemaster Wrote: [ -> ]Nice.. Mind to share for bottom version ??

How to reduce the width of the bar ?? It blocked my logo

can you post a screenshot, it will help me more Big Grin

To change the width >> edit the .css code
edit ---> width: 100%; to Width: 75%; or width: 500px; depending on your site change the 500px or 75 % to match your site . Hope you have understood Big Grin

nvm about bar width. i found the code Big Grin

Can share how to put floating annoucement Bar at Footer section ?? Big Grin

It will look bad if it is place on footer, secondly you will not be able to see the footer due to this notification bar overlapped. If you really need it i will make it.

(2015-09-21, 07:39 PM)gamemaster Wrote: [ -> ]nvm about bar width. i found the code

Can share how to put floating annoucement Bar at Footer section ??

Follow the tutorial to save css code

Quote:#navbarfooter
{
background-color:#1b1a1c;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 3px solid #90F128;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:99999;
width:100%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
}

place the following code at admincp >> templates & style >> templates >> your theme >> footer templates >> edit footer
now add the following codes at the TOP

Quote:<center>
<div id="navbarfooter">
Testing 
</div>
</center>

Press the thank you button if it helps
Demo page

Note: Please add <br/> <br/> at the bottom of footer to prevent overlapping

nice code but i fixed it alittle.

#onlinedevelopersnoti{
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    margin-top: -41px;
    z-index: 999999;
    width: 100%;
    height: 41px;
}
#onlinedevelopers {
    width: 100%;
    height: 28px;
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    background: none repeat scroll #2E2F2E;
    position: relative;
    box-shadow:0px 1px 3px #666;
    z-index: 9998;
    text-decoration: none;
    color: #fff;
    font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    border-bottom:2px solid #90F128;
}
#onlinedevelopers a{
    text-decoration: none;
    color:#FFFC00;
     font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    outline: none;
}

this one will actually be aligned to the top.

#onlinedevelopersnoti{
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
	top:0;
	left:0;
	right:0;
    z-index: 999999;
    width: 100%;
    height: 41px;
}
#onlinedevelopers {
    width: 100%;
    height: 28px;
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    background: none repeat scroll #2E2F2E;
    position: relative;
    box-shadow:0px 1px 3px #666;
    z-index: 9998;
    text-decoration: none;
    color: #fff;
    font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    border-bottom:2px solid #90F128;
}
#onlinedevelopers a{
    text-decoration: none;
    color:#FFFC00;
     font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    outline: none;
}

(2015-09-21, 09:22 PM)leroymcqy Wrote: [ -> ]nice code but i fixed it alittle.

Looking good Big Grin

Good tutorial, but you should have used semantic ID's and classes rather than stuff relating to your username.

(2015-09-22, 01:24 AM)Cookie123 Wrote: [ -> ]Good tutorial, but you should have used semantic ID's and classes rather than stuff relating to your username.

Thank you. I made this for a website and ported it to Mybb