Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Comment Modifier le logo "j'aime" des articles.

155 appréciations
Hors-ligne
Bonjour,

Maintenant que la fonction "j'aime" des articles peut être utilisée par les visiteurs, j'aimerai mettre plus en avant cette fonction, en modifiant par exemple le logo, remplacer le pouce par un coeur, augmenter pourquoi la taille des caractères et aussi modifier les couleurs..... mais je ne sais pas comment faire !

J'ai donc besoin de votre aide, comment faire ?

Merci


3715 appréciations
Hors-ligne
salut Scalou

J'ai bricolé un code mais ce n'est pas simple !


Les coeurs sont ensemble et je n'ai pas cherché pour mettre 2 images différentes.


.articles_show_stats_article {
  background: #c99999;
  height: 30px;
  font-size: 16px;
  color:green!important;
}
.light [class^="icon-"],
.light [class*=" icon-"] {
 
  height: 20px;
  width: 20px;
  background-position: -1px;
    background-image: url("https://static.blog4ever.com/2006/01/2/artfichier_2_618779_20120308172368.gif")!important;
}



155 appréciations
Hors-ligne
Hello @simon@ déjà merci pour le temps passé.

Alors oui je viens de tester, l'idéal serait quand même d'avoir 2 logos différents ; un pour le j'aime et un autre pour les commentaires.

Après j'ai remarqué que ça bug pas mal  en version Mobile.

Mais la base est là.

Merci

1521 appréciations
Hors-ligne
Coucou @Scalou@

Merci pour ta demande, Elle se trouvait dans mes projets, 

Coucou 

J'ai pris la deuxième partie du css, 
Ça clignote un peu partout, 
Menu membres, page de notifications, messagerie privé, page de profil, 
plutôt cool, Mais @Scalou@ a raison Une seconde image pour les commentaires et notifications serait tip top, Merci, 
Bonne journée à tous les deux, 

3715 appréciations
Hors-ligne
re

L'icone coeur fait parti d'une liste donc je ne peux pas faire autrement que de prendre l'image de la liste.

Le coeur sera dans les articles.


.icon-thumbs-up {
  background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -92px 0px!important;
}
_________________________________________________
Pour le forum blog4ever il faut mettre.


.forum_sujet_tableau_likes i {
    
    background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -92px 3px!important;
       
}


3715 appréciations
Hors-ligne


1521 appréciations
Hors-ligne
 Je l'ai décomposé pour qu'il ne clignote plus, Ça me perturbait, 

3715 appréciations
Hors-ligne
re

J'ai mis des codes pour faire apparaitre le cœur bleu . sans clignotant.

Voir sur ce forum



155 appréciations
Hors-ligne

Merci Simon, j'ai ajouté ce coeur.

J'ai repris ton code et fait quelques modif mineures. Sur PC et mobile ça passe sans Bug.

.icon-thumbs-up {
  background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -92px 0px!important;
}
.articles_show_stats_article {
  background: #aad2be;
  height: 37px;
  font-size: 14px;
  color:green!important;
}

Dernière modification le dimanche 25 Septembre 2022 à 11:48:30

3715 appréciations
Hors-ligne
re    @scalou@

tu peux mettre le cœur rose
en remplaçant le code UP

LIGNE 92


.icon-thumbs-up {
 
    background-image: url("https://b4epics.com/uploads/2022-09-25/11/artfichier_2_618779_20120308172368858d04f2ae.gif")!important;

    background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -1px 3px!important;

}





155 appréciations
Hors-ligne
Merci @simon@ je vais laisser comme ça pour le moment.

Par contre j'ai une autre question, serait possible de positionner en haut de l'article et non en bas, la barre complète qui comprend la date, le nbre de visite, l'indication du nbre de com et les j'aime ?

Merci

3715 appréciations
Hors-ligne
ok

Je vais voir plus tard.....

voici un cœur vert ou bleu ou rose ....


 
 


3715 appréciations
Hors-ligne
re
serait possible de positionner en haut de l'article



Non pas possible pour moi car il est plus logique de proposer un commentaire ou un j'aime
après avoir consulté .....


155 appréciations
Hors-ligne
Ah ah, pas possible ou pas logique pour toi...

Après tout dépend de la taille de l'article, beaucoup de personne ne vont pas jusqu'au bas de page donc pas forcément visible.

J'irai même plus loin, une barre située en haut et une autre en bas.

Edit; je vois mon cas avec mes articles ou je fais régulièrement des MAJ et elles sont automatiquement placées en haut de page, visibles de tous, tout de suite.

Dernière modification le dimanche 25 Septembre 2022 à 15:40:03

3715 appréciations
Hors-ligne
Ah ah, pas possible ou pas logique pour toi...



J'ai essayé mais je ne suis pas assez doué pour mettre cette barre en haut ...

Donc je botte en touche

Désolé !


155 appréciations
Hors-ligne
Ok merci @simon@ autrement si quelqu'un ici aurait la possibilité de m'aider, merci.

755 appréciations
Hors-ligne
Bonjour,

Simon, le code suivant est trop générique dans son ciblage. Tu as ciblé tous les éléments qui répondent à cette classe, y compris d'autres qu'il ne faudrait pas modifier.

.light [class^="icon-"],
.light [class*=" icon-"] {
...
}


Du coup, par exemple, ça modifie la flèche du menu utilisateur en haut à droite par un coeur. Il faudrait cibler davantage l'élément que tu veux modifier. Par exemple en préfixant d'une classe ou un ID parent des éléments que tu veux que ça affecte.

Bonne journée.
Maelyne - Développeuse & Graphiste Blog4ever

3715 appréciations
Hors-ligne
@Maelranaidh@

Merci pour les précisions !

J'ai mis le code suivant.  petit cœur rose.

Mais tu as sans doute une meilleure solution ( je suis novice sur certains points )




.icon-thumbs-up {
 
    background-image: url("https://b4epics.com/uploads/2022-09-25/11/artfichier_2_618779_20120308172368858d04f2ae.gif")!important;

    background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -1px 3px!important;

}

bonne soirée


3715 appréciations
Hors-ligne
Ici j'ai mis ce code pour le coeur des " j'aime"
et supprimé le .light [class^="icon-"],
.light [class*=" icon-"] {
...
}


.forum_sujet_tableau_likes i {
  background-image: url("https://static.blog4ever.com/2021/03/863132/coeur-bleu.png")!important;
  background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -1px 3px!important;
       
}



3715 appréciations
Hors-ligne
pour le cœur rose dans les articles.

  Voici le code complet sur les conseils de Maelyne.   




.articles_show_stats_likes .total-likes .icon-thumbs-up {
 
    background-image: url("https://b4epics.com/uploads/2022-09-25/11/artfichier_2_618779_20120308172368858d04f2ae.gif")!important;

    background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -1px 3px!important;

}

voici le cœur bleu--> https://static.blog4ever.com/2021/03/863132/coeur-bleu.png




3715 appréciations
Hors-ligne

@scalou@

  Voici le code complet qui concerne les articles.   






/*petit coeur j'aime dans articles*/
.articles_show_stats_likes .total-likes .icon-thumbs-up {
 
    background-image: url("https://b4epics.com/uploads/2022-09-25/11/artfichier_2_618779_20120308172368858d04f2ae.gif")!important;
color:white!important;
    background-repeat: no-repeat;
   width: 22px!important;
  height: 20px!important;
  background-position:   -0px 3px!important;

}
.articles_show_stats_comments i{
 color:white!important;
    background-image: url("https://b4epics.com/uploads/2022-09-27/09/pngegg3c92ee96ee.png")!important;
    background-repeat: no-repeat;
   width: 25px!important;
  height: 25px!important;
  background-position: 0px 1px!important;

}

.articles_show_stats_article a{
  background: #800!important;
  height: 25px;
  font-size: 14px;
  color:white!important;
}
.articles_show_stats_article {
  background: #800!important;
  height: 25px;
  font-size: 14px;
  color:white!important;
}
/***********/


1521 appréciations
Hors-ligne
Sympa le ti crayon, 

155 appréciations
Hors-ligne
Merci @simon@

Coucou @Maelranaidh@ et pour la barre en haut de l'article, comme je parle au dessus, est ce possible ? Merci

Dernière modification le mercredi 28 Septembre 2022 à 09:31:10

3715 appréciations
Hors-ligne
@scalou@

J'ai demandé à Maelyne et ce n'est pas possible.





3715 appréciations
Hors-ligne

Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits conseils.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6100 autres membres