c'est moi, et oui, cela fais un bon bout de temps que je n'avais pas fais un petit tutoriel écrit pour les addicts de forum Xenforo ! Je reviens donc en force avec 3 petites manipulations simple, qui pourtant ajoute un peu d'esthétisme à votre forum.
Prés-requis:
Pour ce type de tutoriel, aucun prés-requis ne vous seront nécessaire. Sauf si les tutoriels précédents n'ont pas été pris en compte.
Le tutoriel:
Pour ce premier tutoriel, il consistera à ajouter des 'fa fa-' dans la NavBar comme ceci
pour réaliser cette action, rien de bien compliqué. Rendez vous dans votre panel admin > apparence > Template (template du thème actif) et cherchez la template 'EXTRA.css'.
Une fois dedans, entrez y ce code
Code:
.navTab.home .navLink:before {
content: '\f015';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}
.navTab.forums .navLink:before {
content: '\f19c';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}
.navTab.taigachat .navLink:before {
content: '\f0e6';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}
.navTab.members .navLink:before {
content: '\F0c0';
font-family: FontAwesome;
font-size: 15px;
font-weight: normal;
padding-right: 3px;
}si vous souhaitez modifier l'icone FA, il vous suffit de modifier l'ID du 'content' par l'ID du nouvel FA utiliser exemple
correspond au 'content' du premier code.
Second tutoriel
Ce second tutoriel sera tellement court, que je vais pour la peine vous en donner 2. Le premier va consister à centrer le pseudo et la banner de votre utilisateur.
Rendez vous dans votre panel admin > apparence > Template (template du thème actif) et cherchez la template 'EXTRA.css'.
Une fois dedans, entrez y ce code
Code:
.messageUserBlock a.username, .messageUserBlock .userTitle {
text-align: center;
}Et voilà. Ce tutoriel est terminé, passons au suivant.
Dans ce tutoriel ci, nous allons ajouter un effet animé sur les titres des postes comme ceci
rendez vous à nouveau dans votre panel admin > apparence > Template (template du thème actif) et cherchez la template 'page_container_js_body'.
pour ensuite y ajouter ce code
Code:
<script type="text/javascript">
$(document).ready(function(){
$("h3 a").hover(function(){
$(this).stop().animate({marginLeft:"10px"},300);}
,function(){
$(this).stop().animate({marginLeft:"0px"},300);
});
});
</script>Troisième tutoriel
Pour ce troisième et dernier tutoriel, je vais vous apprendre à appliquer un message qui défile sous votre shoutbox.
Donc pour ce faire, rendez vous encore et toujours dans votre panel admin > apparence > Template (template du thème actif) et cherchez la template 'dark_taigachat_chatbox'.
afin d'y ajouter ce code
Code:
<xen:require css="taigachat_announce.css" /><div class="announce" align="left"><marquee scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();"> <a></a> <b><font color = "inherit">ICI Marque votre message </font></b> <a></a> <a> </a></marquee></div>Voilà voilà tutoriel terminé, j'espère avoir été le plus complet possible.
Comme d'habitude, laisser vos appréciations et remarques
Le prochain tutoriel portera sur l'interface de l'AdminCP de XenForo et cette fois ci je tiens ma promesse !
Cordialement,
Clément
Source de certains tutoriels sur RG.fr
Sujets similaires
