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
Now, the HTML (Put wherever you want, I recommend the header template, so this will be displayed in all the forum)
And finally, the CSS (You can put this on global.css or in a custom one)
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.
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
PHP Code:
<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)
PHP Code:
<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)
PHP Code:
.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.