Modifier les icônes de l'aperçu du profil sur mentions

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel Modifier les icônes de l'aperçu du profil sur mentions

Message par Walt le Ven 7 Avr 2017 - 11:43

Modifier les icônes de l'aperçu du profil sur mentions

Les forums Forumactif intègre un système de mention des utilisateurs dans les messages (ex : @Walt). Ce système permet de notifier à l'utilisateur qu'il a été mentionné dans un sujet, et transforme le pseudo en un lien cliquable vers le profil. En outre, une infobulle s'ouvre au survol du pseudo, contenant les informations principales du profil utilisateur.


Ce tutoriel vise à vous expliquer comment modifier les boutons (profil, MP, email...) présents dans l'infobulle. Pour ce faire, vous devez être fondateur du forum puisqu'il vous faudra modifier les templates.


Modifications de template

Panneau d'administration  Affichage  Templates - Général

Éditez le template mentions_tooltip.

Icône de profil

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_PROFILE -->
            <li>
                <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
                    <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PROFILE -->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" />

Remplacez {switch_button_tooltip_PROFILE.IMAGE} par l'adresse de votre image personnalisée.

Icône de message privé

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_PM-->
            <li>
                <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
                    <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PM-->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" />

Remplacez {switch_button_tooltip_PM.IMAGE} par l'adresse de votre image personnalisée.

Icône d'ajout d'un ami

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_FRIEND-->
            <li>
                <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
                    <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FRIEND-->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" />

Remplacez {switch_button_tooltip_FRIEND.IMAGE} par l'adresse de votre image personnalisée.

Icône de contact par mail

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_MESSAGES -->
            <li>
                <a href="{switch_button_tooltip_MESSAGES.URL}" title="{switch_button_tooltip_MESSAGES.LANG}">
                    <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_MESSAGES-->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" />

Remplacez {switch_button_tooltip_MESSAGES.IMAGE} par l'adresse de votre image personnalisée.

Icône Facebook

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_FACEBOOK-->
            <li>
                <a href="{switch_button_tooltip_FACEBOOK.URL}" title="{switch_button_tooltip_FACEBOOK.LANG}">
                    <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FACEBOOK-->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" />

Remplacez {switch_button_tooltip_FACEBOOK.IMAGE} par l'adresse de votre image personnalisée.

Icône Twitter

Repérez cet extrait :
Code:
            <!-- BEGIN switch_button_tooltip_TWITTER-->
            <li>
                <a href="{switch_button_tooltip_TWITTER.URL}" title="{switch_button_tooltip_TWITTER.LANG}">
                    <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_TWITTER-->

Dans la ligne suivante :
Code:
<img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" />

Remplacez {switch_button_tooltip_TWITTER.IMAGE} par l'adresse de votre image personnalisée.


Exemple en image




Publication du template

Une fois vos modifications effectuées, n'oubliez pas de publier le template modifié afin de rendre vos modifications effectives.

avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3281
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum