Template 1.X Ajouter des icônes fa dans votre block utilisateur

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

laurent68

Développeur
Développeur
Membre Certifié
Messages
92
J'aime
59
Points
1 353
Hors ligne
#1
Dans ce tuto je vais vous montrer comment avoir sa :


Dans votre template message_user_info chercher :

Code:
				<xen:if is="@messageShowMessageCount AND {$user.user_id}">
					<dl class="pairsJustified">
						<dt>{xen:phrase messages}:</dt>
						<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
					</dl>
				</xen:if>
		  
				<xen:if is="@messageShowTotalLikes AND {$user.user_id}">
					<dl class="pairsJustified">
						<dt>{xen:phrase likes_received}:</dt>
						<dd>{xen:number $user.like_count}</dd>
					</dl>
				</xen:if>
		  
				<xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
					<dl class="pairsJustified">
						<dt>{xen:phrase trophy_points}:</dt>
						<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
					</dl>
				</xen:if>
Et remplacer par ce code :

Code:
				<xen:if is="@messageShowMessageCount AND {$user.user_id}">
					<dl class="pairsInline">
						<dt><span class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}"></span></dt>
						<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
					</dl>
				</xen:if>
		  
				<xen:if is="@messageShowTotalLikes AND {$user.user_id}">
					<dl class="pairsInline">
						<dt><span class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}"></span></dt>
						<dd>{xen:number $user.like_count}</dd>
					</dl>
				</xen:if>
		  
				<xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
					<dl class="pairsInline">
						<dt><span class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}"></span></dt>
						<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
					</dl>
				</xen:if>
Dans votre template extra.css ajoutez ce ode :

Code:
.extraUserInfo .pairsInline .fa {
  font-size: 18px;
  color: #ffffff;
  margin: 3px;
}
.messageUserBlock .extraUserInfo .pairsInline {
  text-align: center;
  display: inline-block;
  margin-bottom: 10px;
  width: 28%;
  border: 1px solid rgb(60, 59, 60);
}
.messageUserBlock .extraUserInfo {
  font-size: 14px;
  margin: 5px 10px;
  padding: 0 !important;
}
.extraUserInfo .pairsInline > dd {
  display: block;
  font-size: 12px;
  color: #ffffff;
  margin: 5px;
  padding: 10 !important;
}
.messageUserBlock .extraUserInfo {
   text-align:center;
}
Ensuite rendez vous dans les propriétés de style / éléments des messages et décocher tout sauf les 3 case comme sur l'image :



Si vous voulez agrandir ou changer la couleur de vos FA changer les codes dans ces codes :​

Code:
.extraUserInfo .pairsInline .fa {
  font-size: 18px;
  color: #ffffff;
et
Code:
.extraUserInfo .pairsInline > dd {
  font-size: 12px;
  color: #ffffff;
Si vous voulez supprimer la bordure (le cadre) supprimer ce code :

Code:
border: 1px solid rgb(60, 59, 60);
dans ce code :

Code:
.messageUserBlock .extraUserInfo .pairsInline {
Ou Changer la couleur ce qui donne :



Voila ce tuto est terminer
 
Haut Bas