Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Sam 23 Mar 2013 - 6:50
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:
http://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 .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

  
  • © PunBB | Signaler un abus