Blog d'aide de Blog4ever

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

salut Scalou



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;
}

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

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, :ch:

re

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



.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;
       
}

 Je l'ai décomposé pour qu'il ne clignote plus, Ça me perturbait, 

re

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

Voir sur ce forum

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

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;

}

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

ok

Je vais voir plus tard.....

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


   

re



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

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

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

Donc je botte en touche

Désolé !

Ok merci @simon@ autrement si quelqu'un ici aurait la possibilité de m'aider, merci.

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.

@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

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;
       
}

.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

/*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;
}
/***********/

Sympa le ti crayon, 

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

@scalou@

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