Comment changer les "j'aime" "j'aime pas".

[christaline]

Bonjour à tous et à toute!
Voilà, j'aimerais savoir s'il est possible de changer les "j'aime" "j'aime pas".
En fait je voudrais les remplacer par ces images :  
Voici le liens de mon forum : https://chezchristalinebis.forumactif.com/
Merci d'avance et bonne fin de journée à vous!

[Neptunia]

Bonjour ^^


Direction le #template #viewtopic_body
Commencez par sauvegarder votre template avant de modifier quoi que ce soit.

Chercher :

Code:


               <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                  <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
                  <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
               </button>

Ceci correspond au bouton J'aime, l'image du bouton étant représentée par la balise <svg> ... </svg>
Remplacez la balise svg par :

Code:

<img src="https://i.servimg.com/u/f93/19/50/00/72/pouce_14.png" alt="Pouce levé" />

Vous pouvez évidemment changer le lien de l'image.

Juste après dans le template, vous aurez ceci :

Code:

               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                  <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->

Même topo, mais cette fois c'est le bouton Je n'aime pas.

Remplacez la balise svg par :

Code:

<img src="https://i.servimg.com/u/f93/19/50/00/72/pouce_15.png" alt="Pouce baissé" />

Vous pouvez là aussi changer le lien de l'image.

N'oubliez pas d'enregistrer le template.

Pour d'autres modifications plus basiques, il existe ce tutoriel !
Personnalisations du Système "J'aime et Je n'aime pas"

[christaline]

Donc si je comprend bien, je remplace ça :

<svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>

Par ça :

<img src="https://i.servimg.com/u/f93/19/50/00/72/pouce_14.png" alt="Pouce levé" />

et ce pour les deux images, soit le pouce levé et l'autre pour le pouce en bas...

C'est bien ça? Je préfère être sûr d'avoir tout bien compris avant de le faire... lol
Je ne suis pas habitué à toucher aux templates...

[Neptunia]

Oui c'est bien cela.

La première balise <svg> correspondant au bouton J'aime et la seconde au bouton Je n'aime pas.

Vous pouvez évidemment remplacer l'image par une autre de votre choix ainsi que le alt (Pouce levé ou baissé).
Le alt s'affiche lorsque l'image n'est plus disponible et est lu pour les personnes mal ou non-voyantes équipées d'un matériel de lecture.

Et c'est précisément (du moins en partie) à cause de la complexité de la chose que l'on n'a pas fourni de codes pour changer l'image des boutons sous phpBB2, phpBB3, PunBB et Invision. Ca aurait rendu le tutoriel moins digeste et alourdi.

[christaline]

Oui je comprend... Je vais essayer et je vous dis ça...
Merci beaucoup!

[christaline]

Bonjour.
Voilà, j'ai fais comme vous m'avez dit et ça donne ça...

Mais ce que je voudrais, c'est qu'il n'y ait que l'image des pouces...
Comme cela :  
Pas de fond blanc ou autre couleur, pas de texte, juste les images des pouces...
Je ne sais pas si vous voyez ce que je veux dire... lol
Et encore merci pour votre aide!!!
Bon après-midi...

[Neptunia]

Dès ma première réponse je vous avais fourni le lien du tutoriel parce qu'il explique comment changer l'apparence du bouton.

Le CSS de base de l'option ressemble en phpBB2 à ceci

Code:

.rep-button,
.rep-button:active {
   background: #f2f2f2;
   border: 1px solid #005c8b;
   border-radius: 4px;
   box-shadow: 0 -1px 0 #b9b9b9 inset;
   color: #005c8b;
   cursor: pointer;
   float: left;
   font-family: Trebuchet MS;
   font-size: 11.4px;
   font-weight: 700;
   line-height: 1;
   margin: 3px 3px 6px 0;
   outline: none;
   padding: 1px 4px;
   position: relative;
   text-transform: lowercase;
   transition: color .4s
}

Les couleurs dépendent des choix du fondateur sur le panneau admin.

Si je veux supprimer la couleur de fond du bouton (background: f2f2f2) j'ajouterais par exemple ceci au CSS personnalisé.

Code:

.rep-button,
.rep-button:active {
   background: transparent;
}

Ainsi de suite pour tous les éléments non voulus.
Exemple, la bordure vous gêne, attribuez lui une épaisseur de 0 px, ou mieux encore donnez la valeur none pour la supprimer purement et simplement

Pour personnaliser le texte des boutons c'est ici
> PA > Général > Messages et Emails > Configuration
Personnaliser la réaction "J'aime" : Un espace et le texte disparaît

[christaline]

Ok, je vais regarder ça...
Désolée, mais n'y connaissant pas grand chose,
parfois, ce qui peut vous paraitre clair, ne l'est pas pour moi...
Mais merci pour votre aide et votre patience!
Je mettrais résolu dès que j'aurais réussie...
Bonne fin d'après-midi...

[Neptunia]

parfois, ce qui peut vous paraitre clair, ne l'est pas pour moi...

Je fais exprès de ne pas donner de réponse toute cuite, afin de vous forcer à comprendre un minimum ce que vous faites.

Je vous ai donné un exemple pour la couleur de fond, si ça ne suffit pas n'hésitez pas à demander.

[christaline]

Oui je comprend, il faut bien qu'on apprenne... lol
Je regarde et je vous dis si j'ai réussie...
Merci!

[christaline]

Je pense avoir compris le principe...
Comment je fais pour changer les choses dans ma CSS de base...
Voici ce que j'ai coché :
Que dois-je rectifier pour pouvoir changer ma CSS de base?
Car là, je peux la voir ma CSS de base, mais pas la modifier...
Désolée...

[Neptunia]

Vous ne pouvez pas changer votre css de base.

Il faut utiliser le css personnalisé pour redéfinir ce qui ne vous convient pas de base.

[christaline]

Ok, je crois que j'ai compris, tout ce que je veux changer par rapport à la CSS de base,
il faut que je le mette dans ma CSS personnalisée, ce qui changera ce que je souhaite...
C'est bien ça?

[christaline]

C'est bon, j'ai réussie!!
Merci beaucoup pour votre aide et votre patience Neptunia!
Bonne journée à vous!