+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : Règles et FAQ (https://mybb.support/forum-36.html)
+--- Forum : Questions fréquemment posées (FAQ) (https://mybb.support/forum-38.html)
+--- Sujet : Ajouter des bandeaux colorés en haut du forum (1.8) (/thread-7037.html)
Ajouter des bandeaux colorés en haut du forum (1.8) - Saphir - 08-09-2014
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).
[attachment=1405]
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>