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

Kévin 🚀

Kévin 🚀

Administrateur
Administrateur
Inscription
18 Décembre 2012
Messages
4 887
Réactions
5 627
Points
28 052
RGCoins
3 938
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 =>
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


You must be registered for see images attach

Sommaire :​
  • Création du champ personnalisé.
  • Modification de la template member_view
  • Test du système.
You must be registered for see images attach

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.

You must be registered for see images attach

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.

You must be registered for see images attach

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

You must be registered for see images attach
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​
 
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>
Faragnight GTP a dit:
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 =>
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


You must be registered for see images attach

Sommaire :​
  • Création du champ personnalisé.
  • Modification de la template member_view
  • Test du système.
You must be registered for see images attach

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.

You must be registered for see images attach

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.

You must be registered for see images attach

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

You must be registered for see images attach
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​
Cliquez pour agrandir...
 
marche pas pour moi non plus pourtant tous fais nikel.
 
moi sa marche pas sa me met juste la couleur c'est tous :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
 
VaniTy TV a dit:
J'ai suivie le tuto et ce ne fonctionne pas
Cliquez pour agrandir...
DciBelia a dit:
marche pas pour moi non plus pourtant tous fais nikel.
Cliquez pour agrandir...
WarzYTGo a dit:
moi sa marche pas sa me met juste la couleur c'est tous :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Cliquez pour agrandir...
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 ! :)
Kévin SEC a dit:
Allez dans les préférences et amusez vous avec cette nouvelle option
Cliquez pour agrandir...
 
Retour
Haut