MyBB Community Forums

First of all... I'm not a programmer, so, if you find a bug or you find a better way to achieve this, you can share your opinion here.

This is a very short and simple tutorial on how to display automatic messages, with fade in and out, and a custom time to "change".

First: jQuery (If you're on 1.6.x, you need to load jQuery first)

This code goes on headerinclude template

​<script type="text/javascript">
jQuery(function() {

    var quotes = jQuery(".quotes"); // Here you define the class you want to use in your messages
    var quoteIndex = -1;
    
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(500) // This is the time for the fade in effect
            .delay(12000) // This is the time for the change between each message
            .fadeOut(500, showNextQuote); // This is the time for the fade out effect
    }
    
    showNextQuote();

});
</script>

Now, the HTML (Put wherever you want, I recommend the header template, so this will be displayed in all the forum)

​<div class="news">
    <div class="announcements">Announcements:</div>
    <div class="automsg">
        <ul>
            <li class="quotes">Welcome to our community. Hope you like it.</li>
            <li class="quotes">If you read this, ignore this message.</li>
        </ul>
    </div>
</div>

And finally, the CSS (You can put this on global.css or in a custom one)

​.news {
    line-height: 40px;
    font-family: Tahoma;
}

.announcements {
    width: 130px;
    text-align: left;
    float: left;
    margin: 0 2px 0 0;
    padding: 5px 0;
    color: #FFFFFF;
    font-weight: bold;
}

.automsg {
    width: 852px;
    float: left;
    padding: 5px 0;
}

.automsj ul {
    padding: 0;
    margin: 0;
}

.quotes {
    color: #b4d3e2;
    list-style: none;
    display: none;
    text-align: left;
}

This is defined by:

.announcements class > 130px of width, it's only the word "announcements", I put 130px because I add a custom icon, you can modify this by your liking.

.automsj class > The class defines the width of the messages displayed, I put 852px because I personally use a total of 984px of width and 20px of padding in the size of my own forum, you can change this and put more pixels or even percentaje / ems.

.quotes class > It's the class that's used by the jQuery. This applies to every <li> tag, and format the text. Also this have "display: none" to hide ALL the messages, because our jQuery code is gonna display only one <li> tag at time, and then switch to the next, and do that cicle infinitely.

And that's all ^^

Hope you like it and if you know any way to improve this, share with MyBB.

Greetings and sorry for my bad english, I'm really trying this.

eNvy, can you please tell me how I can access to file to change jQuery. I want to change delay value.
I can see that code in page source, but i can't figure out how to access to it and change it.

Thank you!

Read again the tutorial, the code I give you for the headerinclude it's the jquery and you have the comments in orange there...

.delay(12000) // This is the time for the change between each message

That's the delay between each message, you can put more or less.

Do we have a demo? Or can I see it at http://xstyled.com?

edit: got it xd

(2014-10-19, 07:29 AM)ElectricShock Wrote: [ -> ]Do we have a demo? Or can I see it at http://xstyled.com?

Yep, the announcements bar on xstyled it's the same as here (A bit modify the style but the same code) ^^.

works great besidethat announcments are changing the width of the members informations on their profile page

O.o, that can't be possible... only if you use the same class on the profile page, in the members information :|

Can you give me your forum url so I can check that?