myBB info bar plugin modifications

[csm]

Hey there.

Again we will have some fun with a myBB plugin and jQuery.

This time it's the myBB info bar plugin.

Here we go:

What we want to achieve is (you can see the info bar if you are not logged in) an info bar at the bottom, styled with CSS3 properties (border-top-left and gradient background) that can be closed!

What we have to do is modifying the infobar.css.

The original file (you can find it in the themes folder) looks like this:

Code:

#infobar
{
    background-color: infobackground;
    border-bottom: 2px ridge threedlightshadow;
    color: infotext;
    cursor: default;
    left: 0;
    padding: 2px;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
    z-index: 32767;
}

#infobar:hover
{
    background-color: highlight;
    border-bottom-color: threedshadow;
    color: highlighttext;
}

#infobar span
{
    background: url(../images/icons/lightbulb.png) no-repeat left;
    padding-left: 22px;
}

#infobar span a
{
    color: infotext;
    text-decoration: none;
}

#infobar:hover span a
{
    color: highlighttext;
}

Now we need to edit and add some stuff so it looks like the info bar at this forum:

Code:

#infobar
{
    background: #222222;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222222), to(#888888));
  background: -moz-linear-gradient(-90deg,#222222,#888888);
    color: #eee;
    cursor: default;
    bottom:0;
    padding: 12px;
    position: fixed;
    text-align: left;
    width: 100%;
    height: 24px;
    opacity:0.7;
    z-index: 32767;
    -moz-border-radius-topleft: 16px;
    -webkit-border-top-left-radius: 16px;
    border-top-left-radius: 16px;
}

#infobar:hover
{
    background: #888888;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#222222));
  background: -moz-linear-gradient(-90deg,#888888,#222222);
    color: #fff;
    opacity:0.9;
}

#infobar span
{
    background: url(../images/icons/lightbulb.png) no-repeat left;
    padding-left: 22px;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    height:16px;
}

#infobar span a
{
    color: #a01010;
    padding:2px;
    text-decoration: none;
}

#infobar:hover span a
{
    color: #a01010;
    background:#000;
    padding:2px;
}

#infobar span strong a:hover
{
    color: #AFD143;
}

#infobar .closer
{
    position:absolute;
    right: 32px;
    bottom:12px;
    width: 32px;
    height:16px;
    background: #a01010;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    font-size:10px;
    padding:2px;
    text-align:center;
    
}
#infobar .closer:hover
{
cursor:pointer;
background: #AFD143;
color:#222;
}

We added #infobar .closer and #infobar .closer:hover and modified some other CSS (#infobar, #infobar:hover, #infobar:hover span a and #infobar span strong a:hover).

Now save your work.

Open the file infobar.php located in inc/plugins folder. Replace the line:

Code:

$page=preg_replace('#<body(.*)>#Usi','<body$1><div id="infobar"><span>'.$infobar_message.'</span></div>',$page);

with the following code:

Code:

$page=preg_replace('#<body(.*)>#Usi','<body$1><div id="infobar"><span>'.$infobar_message.'</span><div class="closer">Close</div></div>',$page);

We just added the closer DIV so we are able to close the info bar... hm, not yet.

The next thing is jQuery.

Go to Templates & Styles and click on your template (in my case I use the Apart1 template).
Click on Footer Templates and then footer.

If you followed my "first" tutorial here on the XHTML-Valid-Websites forum you could just add the following lines

Code:

jQuery("#infobar .closer").click( function () {
jQuery("#infobar").fadeTo(100, 1).delay(200).fadeOut(300);
});

after the stuff we did in the first tutorial but before the closing </script> tag.

If you did not follow the first tutorial you should do this:

Download jQuery minified version (http://jquery.com) and upload it to your main forum folder.
Now insert the next lines before the closing body tag so it looks like this:

Just copy the code

Code:

<!-- copy from here -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#infobar .closer").click( function () {
jQuery("#infobar").fadeTo(100, 1).delay(200).fadeOut(300);
});
</script>
<!-- until here -->

and paste it at the end of your template footer file.

Save your work and now your info bar should be at the bottom, nicely styled and you can even click to close it.

Questions? Tipps?

Feel free to join and start a discussion.

[haynes11]

hey! thanks, i will add this to my forum in the near future me thinks

[uiol]

Well, I am really glad to know that there are ways which we can modify the myBB info bar plugin. I never thought that getting an info bar at the bottom was going to be like this styled with CSS3 properties. Anyway, all the process does take up a little bit time!

[csm]

Good morning.

Yes, ofcourse it takes some time but I think it is more user friendly. Sometimes such "bars" can be annoying if you just want to take a look

[LAwR]

Hy! Congratulations for you work!
But i have a little problem, the bar does not to close on my forum. When i press button "Close", nothig happen.
I download original version from here http://mods.mybb.com/view/infobar and i made all steps that you say here, exatly!
Do you know why the bar does close?
My forum is http://gwm-club.ro/forum
And do you know how to change text on this bar too?

Thanks and sorry my english!

[csm]

Sorry for answering so late.

The problem is that jquery is not getting loaded.

You need to alter the path to your jquery library.

(11-03-2011 03:39 AM)LAwR Wrote:  Hy! Congratulations for you work!
But i have a little problem, the bar does not to close on my forum. When i press button "Close", nothig happen.
I download original version from here http://mods.mybb.com/view/infobar and i made all steps that you say here, exatly!
Do you know why the bar does close?
My forum is http://gwm-club.ro/forum
And do you know how to change text on this bar too?

Thanks and sorry my english!

[braxmule]

(11-10-2011 03:20 PM)csm Wrote:  Sorry for answering so late.

The problem is that jquery is not getting loaded.

You need to alter the path to your jquery library.

I am having the same problem of the closer not working. I tried altering the path to no avail...and I know that jquerry can load properly by putting this into the footer:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){

$("div").css("border", "3px solid red");

});
</script>

This adds a 3px red border to every single div on the page...

So knowing that I can get jquerry to load properly, I still can't get the closer to work...tried both the jquerry uploaded to the server, and the one running from google as the source.

Any suggestions?

Edit: Just realized the footer code breaks parts of my site for some reason...with the code in the footer the "edit" button on posts no longer works when clicked, and a couple plugins stop working correctly...ah well.