Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Personnalisations du Système "J'aime et Je n'aime pas"

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

  • 0

Personnalisations du Système "J'aime et Je n'aime pas" Empty Personnalisations du Système "J'aime et Je n'aime pas"

Message par Luzz le Ven 10 Juil 2020 - 11:44

Personnalisations du Système "J'aime et Je n'aime pas"
A la suite de la mise en place du système de J'aime et Je n'aime pas, nous vous présentons dans ce tutoriel des éléments clés pour sa personnalisation afin de l'adapter à la thématique de votre forum. Pour plus d'informations sur ce système, nous vous invitons à lire le tutoriel : Système de J'aime et Je n'aime pas.

La modification des templates n'est pas une opération à prendre à la légère. Elle requiert, au minimum, de bonnes connaissances du langage HTML. En outre, seul le fondateur du forum est habilité à en modifier les templates.

Si vous ne voyez pas de template viewcomments_body dans votre liste de templates, c’est que vous n’utilisez pas le module Blog et ne l’avez pas activé dans votre Panneau d'administration. Dans ce cas, aucun changement n'est nécessaire.

Renommer les intitulés J'aime et Je n'aime pas


A la suite de la mise à jour du vendredi 14 août 2020, la personnalisation des intitulés J'aime et Je n'aime pas se fait directement via le Panneau d'administration.

Panneau d'administration  Affichage  Messages et Emails - Configuration
Illustration :
Personnalisations du Système "J'aime et Je n'aime pas" 08-08-11

Si vous avez effectué les modifications proposées par ce tutoriel, il est nécessaire de faire les étapes en sens inverse afin de pouvoir personnaliser les intitulés depuis le Panneau d'administration. Pour plus d'information, nous vous invitons à lire le tutoriel [Système de J'aime et Je n'aime pas], notamment le point 2.3.

Méthode obsolète pour personnaliser les intitulés J'aime et Je n'aime pas :

Sur les messages d'un forum


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

Nous allons procéder au remplacement du bouton J'aime par un bouton D'accord, et à celui du bouton Je n'aime pas par un bouton Pas d'accord.

Quelle que soit votre version de forum, remplacez le code :

Code:
<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

par le code suivant :

Code:
<span>D'accord</span>

puis remplacez le code :

Code:
<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

par le code suivant :

Code:
<span>Pas d'accord</span>

Enregistrez puis n'oubliez pas de publier le template.

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-10

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-11

Sur les messages d'un blog


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

Sur l'article du blog


Quelle que soit votre version de forum, remplacez le code :

Code:
<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

par le code suivant :

Code:
<span>D'accord</span>

puis remplacez le code :

Code:
<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

par le code suivant :

Code:
<span>Pas d'accord</span>

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-12

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-14

Sur les commentaires d'un article d'un blog


Pour marquer la différence entre les boutons sur l'article et ceux présents sur les messages, nous modifierons l'intitulé des boutons par J'adore et Je déteste.

Remplacez le code :

Code:
<span>{comment.displayed.switch_likes_active.L_LIKE}</span>

par le code suivant :

Code:
<span>J'adore</span>

enfin remplacez le code :

Code:
<span>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

par le code suivant :

Code:
<span>Je déteste</span>

Enregistrez puis n'oubliez pas de publier le template.

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-15

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 28-06-16

Sur les messages de la version Mobile Modern


Panneau d'administration  Affichage  Templates - Version mobile - viewtopic_body

Les étapes sont identiques au point 1.1.

Renommer les phrases de réaction


A la suite de la mise à jour du vendredi 14 août 2020, la personnalisation des phrases de réaction se fait directement via le Panneau d'administration.

Panneau d'administration  Affichage  Messages et Emails - Configuration
Illustration :
Personnalisations du Système "J'aime et Je n'aime pas" 08-08-11

Si vous avez effectué les modifications proposées par ce tutoriel, il est nécessaire de supprimer le script JavaScript afin de pouvoir personnaliser les phrases de réaction depuis le Panneau d'administration. Pour plus d'information, nous vous invitons à lire le tutoriel [Système de J'aime et Je n'aime pas], notamment le point 2.3.

Méthode obsolète pour personnaliser les phrases de réaction :
Nous vous proposons dans cette deuxième partie de renommer les phrases suivantes : "XXXXX aime(nt) ce message" et "XXXXX n'aime(nt) pas ce message". Le script proposé fonctionne pour toutes les versions.

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Cliquez sur le bouton "Créer un nouveau Javascript" :

  1. Titre : Renommer les phrases de réaction (J'aime / Je n'aime pas) ;
  2. Emplacement : Sur les sujets ;
  3. Code Javascript : Collez le code donné ci-dessous.

Code:
$(function() {
    try {
        /* Modifie le texte des évaluations positives */
        var modifTexteLikes = function(txt) {
                var msg = {
                    "singulier": {
                        "txt": "{members} adore ce message"
                    },
                    "pluriel": {
                        "txt": "{members} adorent ce message",
                        "sep_1": ", ",
                        /* Permet de modifier le séparateur entre les pseudos lors d'une réaction.*/
                        "sep_2": " et " /* Permet de modifier le séparateur entre l'avant dernier et le dernier pseudo lors d'une réaction.*/
                    }
                };
                return tplMod(txt, msg);
            },
            /* Modifie le texte des évaluations négatives */
            modifTexteDislikes = function(txt) {
                var msg = {
                    "singulier": {
                        "txt": "{members} déteste ce message"
                    },
                    "pluriel": {
                        "txt": "{members} détestent ce message",
                        "sep_1": ", ",
                        /* Permet de modifier le séparateur entre les pseudos lors d'une réaction.*/
                        "sep_2": " et " /* Permet de modifier le séparateur entre l'avant dernier et le dernier pseudo lors d'une réaction.*/
                    }
                };
                return tplMod(txt, msg);
            },
            tplMod = function(txt, msg) {
                var regexp_members = /<a.+?\/a>/g;
                var members = txt.match(regexp_members);
                if (members != null) {
                    if (members.length < 2) {
                        return msg.singulier.txt.replace(/\{members?\}/, function(m) {
                            return members[0];
                        })
                    } else {
                        return msg.pluriel.txt.replace(/\{members\}/, function(m, m1, m2) {
                            var last_member = members.pop();
                            return members.join(msg.pluriel.sep_1) + msg.pluriel.sep_2 + last_member;
                        })
                    }
                }
            };
        $(".fa_like_list").each(function(i, e) {
            $(e).html(modifTexteLikes($(e).html()))
        });
        $(".fa_dislike_list").each(function(i, e) {
            $(e).html(modifTexteDislikes($(e).html()))
        });
        if (typeof window.FA_refreshLikeList == "undefined") throw "Function FA_refreshLikeList was not set, redefinition aborted";
        window.FA_refreshLikeList = function(caller, data) {
            var arr_likes = JSON.parse(data);
            var like_div_selector = $(caller).parents(':has(.fa_like_list),:has(.fa_dislike_list)').first();
            $(like_div_selector).find('.fa_like_list, .fa_dislike_list').html('');
            $(like_div_selector).find('.fa_like_list, .fa_dislike_list').hide();
            if (arr_likes.likes_list !== null) {
                arr_likes.likes_list = modifTexteLikes(arr_likes.likes_list);
                $(like_div_selector).find('.fa_like_list').show();
                $(like_div_selector).find('.fa_like_list').html(arr_likes.likes_list)
            }
            if (arr_likes.dislikes_list !== null) {
                arr_likes.dislikes_list = modifTexteDislikes(arr_likes.dislikes_list);
                $(like_div_selector).find('.fa_dislike_list').show();
                $(like_div_selector).find('.fa_dislike_list').html(arr_likes.dislikes_list)
            }
        }
    } catch (e) {
        if (_userdata["session_logged_in"]) console.error(e);
    }
});

N'oubliez pas de cliquer sur le bouton valider pour sauvegarder les modifications apportées à votre Javascript.

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 29-06-10

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 29-06-11

Personnaliser l'apparence des boutons et les phrases de réaction via le CSS


Dans cette troisième partie, nous vous proposons de personnaliser l'apparence des boutons J'aime et Je n'aime pas ainsi que phrases de réaction via la feuille de style CSS. Nous vous proposons ci-dessous une feuille de style CSS avec les principaux éléments permettant de personnaliser les boutons afin de les rendre compatible avec la thématique de votre forum. Toutefois, d'autres modifications peuvent être envisagées selon vos désirs. En cas de problème, n'hésitez pas à ouvrir un message dans l'entraide.

Panneau d'administration  Affichage  Images et Couleurs - Couleurs - Feuille de style CSS

Pour les versions PhpBB2, PhpBB3, PunBB, Invision et ModernBB


Code:
/******** Personnalisation des listes de pseudos ********/
 
/* Liste des pseudos qui aiment un message */
 
.fa_like_list {
  background-color: #FFFFFF; /* Couleur de fond de la liste */
  color: #D70000; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_like_list a {
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Trebuchet MS; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
/* Liste des pseudos qui n'aiment pas un message */
 
.fa_dislike_list {
  background-color: #FFFFFF; /* Couleur de fond de la liste */
  color: #33A5FF; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_dislike_list a {
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Trebuchet MS; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
/******** Personnalisation des textes des boutons ********/
 
/* Couleur du texte du bouton J'aime */
 
.fa_like {
  color: #666666;
}
 
/* Couleur du texte du bouton J'aime (active) */
 
.fa_liked {
  color: #33A5FF;
}
 
/* Couleur du texte du bouton Je n'aime pas */
 
.fa_dislike {
  color: #666666;
}
 
/* Couleur du texte du bouton Je n'aime pas (active) */
 
.fa_disliked {
  color: #D70000;
}
 
/******** Personnalisation avancée des boutons ********/
 
.rep-button, .rep-button:active, .rep-button:focus {
 
    background: #FFFFFF; /* Couleur de fond */
    border: 1px solid #005c8b; /* Couleur de la bordure du bouton */
    border-radius: 4px; /* Bordure arrondis du bouton */
    box-shadow: 0 -1px 0 #b9b9b9 inset; /* Ombre de la bordure du bouton */
    font-family: Trebuchet MS; /* Police d'écriture du bouton */
    font-size: 11.4px; /* Taille de la police d'écriture du bouton */
    font-weight: 700; /* Taille de la police grasse du bouton */
    height: 17px; /* Hauteur des boutons */
    text-transform: initial; /* Pour mettre une majuscule aux noms des boutons */
}

Pour la version AwesomeBB


Code:
/******** Personnalisation des listes de pseudos ********/
 
/* Liste des pseudos qui aiment un message */
 
.fa_like_list {
  background-color: #FFFFFF; /* Couleur de fond de la liste */
  color: #4CAF50; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_like_list a {
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Arial; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
/* Liste des pseudos qui n'aiment pas un message */
 
.fa_dislike_list {
  background-color: #FFFFFF; /* Couleur de fond de la liste */
  color: #F44336; /* Couleur de la police d'écriture de la liste */
  font-family: Arial; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_dislike_list a {
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Open Sans; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
/******** Personnalisation des textes des boutons ********/
 
/* Couleur du texte du bouton J'aime */
 
.fa_like {
  color: #ffffff;
}
 
/* Couleur du texte du bouton J'aime (active) */
 
.fa_liked {
  color: #ffffff;
}
 
/* Couleur du texte du bouton Je n'aime pas */
 
.fa_dislike {
  color: #ffffff;
}
 
/* Couleur du texte du bouton Je n'aime pas (active) */
 
.fa_disliked {
  color: #ffffff;
}
 
/* Couleur de fond de la partie gauche du bouton J'aime (active) */
 
.fa_liked .rep-cat {
    background-color: #4CAF50;
}
 
/* Couleur de fond de la partie gauche du bouton Je n'aime pas (active) */
.fa_disliked .rep-cat {
    background-color: #F44336;
}
 
.rep-button, .rep-button:active, .rep-button:focus {
    background-color: #263238; /* Couleur de fond */
    border: none; /* Le bouton n'a aucune bordure */
    border-radius: 3px; /* Bordure arrondis du bouton */
    font-family: Arial; /* Police d'écriture du bouton */
    font-size: 12px; /* Taille de la police d'écriture du bouton */
    height: 30px; /* Hauteur des boutons */
    text-transform: initial; /* Pour mettre une majuscule aux noms des boutons */
}

Pour la version Mobile Modern


La majorité des éléments du CSS de la version Mobile Modern est commune au CSS des autres versions.

Code:
/******** Personnalisation des textes des boutons ********/

/* Couleur du texte du bouton J'aime (active) */

.rep-button.fa_liked i {
  color:#4CAF50;
}

/* Couleur du texte du bouton Je n'aime pas (active) */

.rep-button.fa_disliked i {
  color:#F44336;
}

Modifier les icônes matérielles des boutons


Pour la version ModernBB


Pour cette version, les images du "pouce levé" (ion-thumbsup) et "pouce baissé" (ion-thumbsdown) sont gérées par des Ion Icons [consulter le site]. Pour remplacer ces Ion Icons, il convient alors de vous rendre sur le site et de récupérer le nom des icônes choisies. A titre d'exemple, nous remplacerons l'icône ion-thumbsdown par ion-checkmark et ion-thumbsdown par ion-close.

Personnalisations du Système "J'aime et Je n'aime pas" 01-07-10

Pour les messages sur le forum :

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

Pour les articles et les commentaires dans un blog :

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

Recherchez le code suivant :

Code:
<i class="ion-thumbsup"></i>

Remplacez-le par :

Code:
<i class="ion-checkmark"></i>

Enfin, recherchez le code :

Code:
<i class="ion-thumbsdown"></i>

Remplacez-le par :

Code:
<i class="ion-close"></i>

Enregistrez puis n'oubliez pas de publier le template.

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 01-07-11

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 01-07-12

Pour la version AwesomeBB


Pour cette version, les images du "pouce levé" (thumb_up) et "pouce baissé" (thumb_down) sont gérées par des icônes matérielles [consulter le site]. Pour remplacer ces icônes matérielles, il convient alors de vous rendre sur le site et de récupérer le nom des icônes choisies. A titre d'exemple, nous remplacerons l'icône thumb_up par done et thumb_down par clear.

Personnalisations du Système "J'aime et Je n'aime pas" 29-06-15

Pour les messages sur le forum :

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

Pour les articles et les commentaires dans un blog :

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

Recherchez le code suivant :

Code:
<i class="material-icons">thumb_up</i>

Remplacez-le par :

Code:
<i class="material-icons">done</i>

Enfin, recherchez le code :

Code:
<i class="material-icons">thumb_down</i>

Remplacez-le par :

Code:
<i class="material-icons">clear</i>

Enregistrez puis n'oubliez pas de publier le template.

Voir illustration :
Avant la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 29-06-16

Après la modification :

Personnalisations du Système "J'aime et Je n'aime pas" 29-06-17

Pour la version Mobile Modern


Panneau d'administration  Affichage  Templates - Version mobile - viewtopic_body

Ce sont les mêmes étapes que le point 4.2.

Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 1158
Inscrit(e) le : 25/10/2007

Voir le profil de l'utilisateur https://forum.forumactif.com
Luzz 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