Ajouter des bandeaux colorés en haut du forum (1.8)

[Saphir]

Pour ajouter un bandeau coloré en haut du forum comme sur les forums communautaires de MyBB (voir capture d'écran ci-dessous), insérez le code suivant dans le template header de votre (vos) thème(s).

   

Code PHP :

<style>
    .bandeau {
        text-align: center;
        border: 1px solid #CCC;
        background: none repeat scroll 0% 0% #F5F5F5;
        border-radius: 5px;
        padding: 8px 12px;
        margin: 10px 0px 0px;
    }

    .bandeau strong {
        margin-right: 6px;
    }

    .bandeau .date {
        color: #666;
        font-size: 0.8em;
        margin-left: 6px;
    }

    .jaune {
        background-color: #FFF6BF;
        border-color: #FFD324;
    }

    .vert {
        background-color: #D6ECA6;
        border-color: #8DC93E;
    }

    .bleu {
        background-color: #ADCBE7;
        border-color: #0F5C8E;
    }
</style>

<div class="bandeau jaune">
    <strong>Information 1 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<div class="bandeau vert">
    <strong>Information 2 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<div class="bandeau bleu">
    <strong>Information 3 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<br /> 


Si vous souhaitez également avoir la partie dédiée aux réseaux sociaux (visible sous les bandeaux de la capture d'écran ci-dessus), vous pouvez utiliser le code suivant.

Code PHP :

<style>
    .bandeau {
        text-align: center;
        border: 1px solid #CCC;
        background: none repeat scroll 0% 0% #F5F5F5;
        border-radius: 5px;
        padding: 8px 12px;
        margin: 10px 0px 0px;
    }

    .bandeau strong {
        margin-right: 6px;
    }

    .bandeau .date {
        color: #666;
        font-size: 0.8em;
        margin-left: 6px;
    }

    .jaune {
        background-color: #FFF6BF;
        border-color: #FFD324;
    }

    .vert {
        background-color: #D6ECA6;
        border-color: #8DC93E;
    }

    .bleu {
        background-color: #ADCBE7;
        border-color: #0F5C8E;
    }

    .social {
        padding: 12px;
        text-align: center;
    }

    .social .intro {
        color: #666;
        margin-right: 16px;
    }

    .social .twitter, .social .facebook {
        margin: 0px 16px 0px 0px;
        border-left: 1px solid #DDD;
        padding: 0px 0px 0px 16px;
    }
</style>

<div class="bandeau jaune">
    <strong>Information 1 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<div class="bandeau vert">
    <strong>Information 2 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<div class="bandeau bleu">
    <strong>Information 3 :</strong>
    (...)
    <span class="date">(9 août 2014)</span>
</div>

<div class="social">
    <span class="intro">Restez au courant de notre actualité !</span>
    <span class="twitter"><a href="http://twitter.com/mybb">Suivez @MyBB sur Twitter</a></span>
    <span class="facebook"><a href="http://facebook.com/mybboard">Aimez MyBB sur Facebook</a></span>
</div>