Tutorial Personnaliser votre Statistiques forum

Dans votre template forum_liste

Chercher :

Code:

<div class="pairsJustified">
                  <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl><dt>{xen:phrase latest_member}:</dt>
                        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
               <!-- slot: forum_stats_extra -->
                  
                  
</div>

Et remplacer par :

Code:

<div class="pairsJustified">
                    <dl class="discussionCount"><dt><i class="fa fa-comment fa-2x" style="padding-right: 8px;"></i> {xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt><i class="fa fa-comments fa-2x" style="padding-right: 8px;"></i> {xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt><i class="fa fa-users fa-2x" style="padding-right: 8px;"></i> {xen:phrase members_count}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl class="latestMember"><dt><i class="fa fa-user-plus fa-2x" style="padding-right: 8px;"></i> {xen:phrase latest_member}:</dt>
        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                    <!-- slot: forum_stats_extra -->
                  
                  
</div>

Dans votre extra.css ajouter ce code :

Code:

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .latestMember dt, .pairs dt, .pairsInline dt, .pairsRows dt, .pairsColumns dt, .pairsJustified dt {
padding-top: 10px;
}
.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .latestMember dd, .pairs dd, .pairsInline dd, .pairsRows dd, .pairsColumns dd, .pairsJustified dd {
padding-top: 10px;
}
.pairsJustified .fa.fa-comments.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #F37338;
}
.pairsJustified .fa.fa-comment.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #1b95e0;
}
.pairsJustified .fa.fa-users.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #f92205;
}
.pairsJustified dt.fa.fa-user-plus.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #1e598e;
}
.pairsJustified .latestMember dt, .pairsJustified .latestMember dd {
  color: #59a65f;
}

Résultat :



Deuxième façon, (remplacer le premier code dans votre extra.css par celui-ci )

Dans votre extra.css ajouter ce code :

Code:

.pairsJustified dt.fa.fa-comments.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #C22326
}
.pairsJustified .discussionCount dt, .pairsJustified .discussionCount dd {
  color: #C22326;
}
.pairsJustified dt.fa.fa-comment.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #F37338;
}
.pairsJustified .messageCount dt, .pairsJustified .messageCount dd {
   color: #F37338;
}
.pairsJustified dt.fa.fa-users.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #027878;
}
.pairsJustified .memberCount dt, .pairsJustified .memberCount {
  color: #027878;
}
.pairsJustified dt.fa.fa-user-plus.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #801638;
}
.pairsJustified .latestMember dt, .pairsJustified .latestMember dd  {
  color: #801638;
}
.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .latestMember dt {
padding-top: 10px;
}
.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .latestMember dd {
padding-top: 10px;
}

Resultat :