Coloriser les cellules sur l’index lorsqu’un nouveau message est posté

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

  • 0

Tutoriel Coloriser les cellules sur l’index lorsqu’un nouveau message est posté

Message par Matriochka le Dim 8 Sep 2013 - 14:14

Coloriser les cellules lorsqu'un nouveau message est posté

Le tutoriel qui suit vous permettra de coloriser les cellules de vos forums Forumactif lorsqu'un nouveau message est posté.

Voici un exemple du rendu final (ici, sous phpBB2) :


Installation du script


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 gestion des codes javascript:


3. Puis, créez un nouveau script en cliquant sur le bouton et indiquez les informations suivantes:

Titre: Colorisation cellules
Placement: Sur l'index



4. Collez le code correspondant à la version de votre forum:

Pour les versions phpBB2, punBB et Invision
Code:
$(function() {
 $('img[src="http://illiweb.com/fa/empty.gif"]').closest('tr').addClass('newpost');
$('img[src="http://illiweb.com/fa/empty.gif"]').closest('tr').addClass('newpost');
});

Pour phpBB3
Code:
$(function() {
 $('dl.icon[style*="http://illiweb.com/fa/empty.gif"]').addClass('newpost');
$('dl.icon[style*="http://illiweb.com/fa/empty.gif"]').addClass('newpost');
});

Warning Modifications à apporter:
Remplacez l'URL http://illiweb.com/fa/empty.gif par celle correspondant à l'image indiquant un nouveau message sur le forum. Attention ! Le script comporte deux lignes similaires car il vous faut penser à renseigner les images pour les catégories et les forums.

5. Enregistrez votre script en cliquant sur le bouton

Modification du CSS


Une fois le script installé, il ne reste plus qu'à personnaliser le CSS de manière à appliquer la nouvelle couleur sur les cellules.

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

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

phpBB2, punBB et Invision
Code:
tr.newpost td {
background-color:#COLOR!important;}

phpBB3
Code:
dl.newpost {
background-color:#COLOR!important;}

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

Et pour encore plus de personnalisation CSS, lisez le tutoriel ci-dessous !


Lectures complémentaires

Tuto Tutoriel sur l’utilisation du CSS
Tuto Coloriser les cases Note et annonce

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