Ajouter l'option centrage du texte sur les profils XenForo.

Kévin 🚀

Administrateur
Administrateur
Inscription
18 Décembre 2012
Messages
4 815
Réactions
5 500
Points
27 882
Salut à tous ,

Aujourd'hui on se retrouve pour un nouveau court tutoriel sur XenForo.
Je vais vous apprendre a ajouter une option pour centrer les pseudo, statut, bannière de rang XenForo de vos membres.
Vous aurez pour rendu ceci =>

secpa.png

Sommaire :​
  • Création du champ personnalisé.
  • Modification de la template member_view
  • Test du système.
secpa.png

Première partie : Création du champ personnalisé.
Pour créer un champ personnalisé il faut aller dans votre AdminCP, puis allez dans l'onglet utilisateur et dans la sidebar gauche cliquée sur Champs personnalisés.

Une fois sur la page des champs personnalisés cliquez sur le bouton en haut a droit qui se nomme Créer un nouveau champ.

Vous allez être redirigés vers la page de création du champ personnalisé et cette page va vous demander plusieurs informations

Mettez les paramètres suivants :
  • ID du champs : info_center
  • Titre : Permet de positionner vos informations sur votre profil.
  • Description :
  • Emplacement de l'affichage : Préférence
  • Ordre d'affichage : 1
  • Type de champ : Menu déroulant de sélection

Maintenant nous allons configurer les choix possibles donc pour ce faire allez dans l'onglet Options pour le choix du champ

Pour le première vous mettez :
  • Valeur de (A à Z ...) : left
  • Texte : Gauche
Pour le deuxième vous mettez :
  • Valeur de (A à Z ...) : center
  • Texte : Centré

Sauvegardez le champ.

secpa.png

Deuxième partie : Modification de la template member_view
Pour ce faire il faudra vous rendre dans vos templates de style et sélectionner la template member_view.
Une fois la template ouverte chercher ceci :
HTML:
<h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
Remplacer ce code par celui-ci :
HTML:
<xen:if is="{$user.customFields.info_center} == 'center'">
                <center>
                <br />
                <br />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                </center>
                <xen:elseif is="{$user.customFields.info_center} == 'left'" />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                <xen:else />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                </xen:if>
Sauvegardez la template.

secpa.png

Troisième partie : Test du système.
Allez dans les préférences et amusez vous avec cette nouvelle option :)

secpa.png
Si vous avez des questions n'hésiter pas ;)
Tutoriel proposé par :
Faragnight SEC
Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site
 
Inscription
20 Juillet 2013
Messages
1 330
Réactions
239
Points
6 008
j'arrive pas a trouver ceux code
Code:
<h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
Salut à tous ,

Aujourd'hui on se retrouve pour un nouveau court tutoriel sur XenForo.
Je vais vous apprendre a ajouter une option pour centrer les pseudo, statut, bannière de rang XenForo de vos membres.
Vous aurez pour rendu ceci =>

  • Création du champ personnalisé.
  • Modification de la template member_view
  • Test du système.
Voir la pièce jointe 55106
Première partie : Création du champ personnalisé.
Pour créer un champ personnalisé il faut aller dans votre AdminCP, puis allez dans l'onglet utilisateur et dans la sidebar gauche cliquée sur Champs personnalisés.

Une fois sur la page des champs personnalisés cliquez sur le bouton en haut a droit qui se nomme Créer un nouveau champ.

Vous allez être redirigés vers la page de création du champ personnalisé et cette page va vous demander plusieurs informations

Mettez les paramètres suivants :
  • ID du champs : info_center
  • Titre : Permet de positionner vos informations sur votre profil.
  • Description :
  • Emplacement de l'affichage : Préférence
  • Ordre d'affichage : 1
  • Type de champ : Menu déroulant de sélection

Maintenant nous allons configurer les choix possibles donc pour ce faire allez dans l'onglet Options pour le choix du champ

Pour le première vous mettez :
  • Valeur de (A à Z ...) : left
  • Texte : Gauche
Pour le deuxième vous mettez :
  • Valeur de (A à Z ...) : center
  • Texte : Centré

Sauvegardez le champ.

Voir la pièce jointe 55106
Deuxième partie : Modification de la template member_view
Pour ce faire il faudra vous rendre dans vos templates de style et sélectionner la template member_view.
Une fois la template ouverte chercher ceci :
HTML:
<h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
Remplacer ce code par celui-ci :
HTML:
<xen:if is="{$user.customFields.info_center} == 'center'">
                <center>
                <br />
                <br />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                </center>
                <xen:elseif is="{$user.customFields.info_center} == 'left'" />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                <xen:else />
                <h1 itemprop="name" class="username">{xen:helper richUserName, $user}</h1>

                <p class="userBlurb">
                    {xen:helper userBlurb, $user}
                </p>
                <xen:if hascontent="true">
                    <div class="userBanners">
                        <xen:contentcheck>{xen:helper userBanner, $user}</xen:contentcheck>
                    </div>
                </xen:if>
                </xen:if>
Sauvegardez la template.

Voir la pièce jointe 55106
Troisième partie : Test du système.
Allez dans les préférences et amusez vous avec cette nouvelle option :)

Si vous avez des questions n'hésiter pas ;)
Tutoriel proposé par :
Faragnight SEC
Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site
 

SyTry'

Premium
Inscription
22 Mai 2015
Messages
2 608
Réactions
814
Points
13 171
J'ai suivie le tuto et ce ne fonctionne pas
marche pas pour moi non plus pourtant tous fais nikel.
moi sa marche pas sa me met juste la couleur c'est tous :
C'est normal après sa vous devez vous rendre dans vos "Préférences" puis sélectionner "Centré" car par défaut il est sur Gauche ! :)
Allez dans les préférences et amusez vous avec cette nouvelle option
 
Haut