Coloriser les cases des note et des annonces

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

  • 0

Astuce Coloriser les cases des Note et des annonces

Message par Matriochka le Dim 17 Mar 2013 - 19:30

Coloriser les cases des Note et des annonces

Le tutoriel qui suit vous permettra d’intégrer une couleur spécifique aux cellules contenant des Note et des annonces sur votre forum Forumactif. Cette astuce mettra donc en valeur les messages importants dans vos sous-forums.

L’astuce est valable pour toutes les versions de forum : phpBB2, phpBB3, punBB et Invision

Avant toute modification, assurez-vous que votre forum respecte les conditions suivantes :
- La gestion des scripts JavaScript doit être convenablement activée.



Première étape : le JavaScript
La première étape de ce tutoriel consiste à installer le script JavaScript sur votre forum. Celui-ci va nous permettre d’ajouter une class aux cellules contenant des Note et des annonces en se référant à l’image utilisée pour les différencier des sujets lambda.

1. Rendez-vous dans :
Panneau d’administration ► Modules ► HTML et JavaScript ► Gestion des codes JavaScript

2. Si ça n’est pas déjà fait, activez la gestions des scripts :


3. Créez un nouveau script en cliquant sur le bouton approprié :

4. Donnez lui un titre évocateur, appliquez-le sur les sous-forums et collez le code destiné à votre version disponible ci-dessous.

phpBB2, punBB et Invision :
Code:
$(function() {
/* Ajoute une class à la cellule des annonces */
$('img[src="http://url_image_annonce.jpg"]').closest('tr').addClass('annonce');
/* Ajoute une class à la cellule des Note*/
$('img[src="http://url_image_Note.jpg"]').closest('tr').addClass('Note');
});
phpBB3 :
Code:
$(function() {
/* Ajoute une class à la cellule des annonces */
$("dl.icon[style*='http://url_image_annonce.jpg']").addClass("annonce");
/* Ajoute une class à la cellule des Note */
$("dl.icon[style*='http://url_image_Note.jpg']").addClass("Note");
});
Modifications à apporter :
Dans les deux scripts, remplacez les URL des images par celles que vous utilisez sur votre thème :
- http://url_image_annonce.jpg : l’URL de l’image utilisée pour les annonces
- http://url_image_Note.jpg : l’URL de l’image utilisée pour les Note

5. Enregistrez votre script en cliquant sur le bouton :


Seconde étape : le style CSS
Maintenant que le script est installé, une class a été ajoutée aux cellules des annonces et des Note. Nous allons maintenant nous en servir pour appliquer du style sur celles-ci.

1. Rendez-vous dans :
Panneau d’administration ► Affichage ► Couleurs ► Feuille de styles CSS

2. Collez les lignes de CSS correspondant à votre version :

phpBB2, punBB et Invision :
Code:
tr.annonce td {background-color:#COLOR!important;} /* Modifie la couleur de fond des annonces */
tr.Note td {background-color:#COLOR!important;} /* Modifie la couleur de fond des Note */
phpBB3 :
Code:
dl.annonce {background-color:#COLOR;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#COLOR;} /* Modifie la couleur de fond des Note */

Modifications à apporter :
Pour les deux versions, remplacez #COLOR par le code couleur de votre choix.
- Aide : Trouver un code couleur

Note :
Si vous maîtrisez le langage CSS, vous pouvez parfaitement appliquer plus de style sur les cellules des annonces et des Note : une couleur pour l’écriture, une police d’écriture particulière, etc.
- Pour plus d’informations, consultez le tutoriel suivant : Le CSS, comment ça marche ?



Complément : icône de sujets, annonces globales, etc.
Si le tutoriel ci-dessus se concentre principalement sur la personnalisation des cellules liées aux annonces et aux Note, vous pouvez parfaitement l’appliquer aux autre cellules de votre forum en modifiant simplement le script de base. Vous pouvez par exemple l’appliquer aux annonces globales en utilisant l’URL de l’image liée aux annonces globales, ou encore aux icônes de sujets, en utilisant les URL des images utilisées pour vos diverses icônes.

Par exemple, si l’on veut reproduire l’astuce pour les cellules des sujets contenant l’icône , il suffit simplement de placer ce script et ce CSS :

phpBB2, punBB et Invision :
Code:
$(function() {
/* Ajoute une class aux sujets portant l’icône Résolu */
$('img[src="http://r24.imgfast.net/users/2913/10/00/00/smiles/505812.png"]').closest('tr').addClass('resolu');
});
phpBB3 :
Code:
$(function() {
/* Ajoute une class aux sujets portant l’icônes Résolu */
$("dd.dterm[style*='http://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png']").closest("dl.icon").addClass("resolu");
});

phpBB2, punBB et Invision :
Code:
tr.resolu td {background-color:#COLOR!important;} /* Modifie la couleur de fond des Note */
phpBB3 :
Code:
dl.resolu {background-color:#COLOR;} /* Modifie la couleur de fond des annonces */

Explications :
Dans le script, on modifie simplement l’URL de l’image, ainsi que la class ajoutée ici : addClass("resolu"); (qui passe donc de "annonce" ou "Note" à "resolu"). Si vous ne modifiez pas cette class, le script ne pourra fonctionner.

N’hésitez pas, soyez créatif ! Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

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


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