Mettre un libellé aux icônes de messages

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

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,


L’aperçu en image:



Suite au tutoriel de Matriochka :
http://forum.forumactif.com/t348011-coloriser-les-cases-des-post-it-et-des-annonces

Je vous propose de déposer un libellé propre à chaque icône de message hinhin .

Allez c'est parti les ami(e)s tape la .


Rappel pour la procédure:
Vous pouvez créer des icônes de messages pour mieux distinguer les différents topics créés :

Passez en mode avancé en cliquant sur :
Affichage/Images et couleurs/Gestion des images/Mode avançé
Icônes de messages



Recherchez l'image voulue et copiez l'adresse de cette dernière hinhin .



On va dans un premier temps passer la gestion de script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript


Cliquez sur le bouton creerjavascript

Donnez un intitulé explicite puis cochez "Sur les sous-forums".

Dans le bloc déposez ceci:

Code:

$(function()
{
 $('img[src="LE LIEN DE L IMAGE"]').closest('tr').addClass('LACSS');
});

A la place de "LE LIEN DE L IMAGE" déposez le lien de l'image de votre icône.

Puis dans la dernière partie du script
Code:
 .addClass('LACLASS');

Modifiez LACLASS par celle que vous voulez hinhin .

Par exemple avec le smiley de test:



Je copie l'adresse de l'image:
https://illiweb.com/itest/smilies/default/default56.gif

et je vais la déposer dans le script
Code:

$(function()
{
 $('img[src="http://illiweb.com/itest/smilies/default/default56.gif"]').closest('tr').addClass('LACSS');
});

Puis je vais lui donner une class dans la partie concernée.

Code:
 .addClass('test_icone');

Mon script complet:
Code:

$(function()
{
 $('img[src="http://illiweb.com/itest/smilies/default/default56.gif"]').closest('tr').addClass('test_icone');
});

Assurez vous avant de cliquer sur bouton Valid d'avoir donner un titre et d'avoir coché "Sur les Forums".


Et hop ensuite on part donner une apparence via la feuille de style hinhin .


Affichage/Images et Couleurs/Couleurs/Feuille de style

Rappel sur la class donnée:
Code:
.addClass('test_icone');

Code:

 
tr.test_icone .topic-title:before
{
content:'Votre libellé'; /*modifiez comme bon vous semble le libelle*/
margin-right:10px;  /*on donne une marge de 10px pour ne pas coller sur le titre du sujet*/
color:#Votre couleur; /*on donne une couleur*/
}

Pensez à valider les modifications en cliquant sur le bouton Valid .


Voilà c'est tout pour le moment clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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