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 Dim 8 Sep 2013 - 14:14

Coloriser les cellules lorsqu'un nouveau message est publié

L'astuce qui suit vous permettra de coloriser les cellules de votre forum lorsqu'un nouveau message est publié, que ce soit sur l'index ou dans la liste des sujets.

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

Pour les versions PhpBB2, PunBB et Invision


Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Coloriser les cellules lorsqu'un nouveau message est posté" et pour placement "Sur l'index" et / ou "Sur les sous-forums" (plus d'informations sur la gestion des scripts).

Code:
$(function() {
  $('img[title="Nouveaux messages"]').closest('tr').addClass('newpost');
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Insertion du CSS


Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Code:
tr.newpost td {
    background-color: #COLOR!important;
}

Remplacez #COLOR par le code couleur hexadécimal de votre choix. A toutes fins utiles, vous pouvez utiliser ce générateur.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Pour la version PhpBB3 et ModernBB


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Coloriser les cellules lorsqu'un nouveau message est posté" et pour placement "Sur l'index" et / ou "Sur les sous-forums" (plus d'informations sur la gestion des scripts).

Création du script


Code:
$(function() {
    /*URL de l'image pour un nouveau message dans une catégorie */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans une forum */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet populaire */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet verrouillé */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet "annonce" */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet "annonce globale" */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
    /*URL de l'image pour un nouveau message dans un sujet "Note" */
    $('dl.icon[style*="http://2img.net/i/fa/empty.gif"]').addClass('newpost');
});

Remplacez l'URL https://2img.net/i/fa/empty.gif par celle correspondant à l'image indiquant un nouveau message sur le forum :

Panneau d'administration  Affichage  Images et couleurs - Gestion des images, onglet Icônes du forum
Voir illustration :

Panneau d'administration  Affichage  Images et couleurs - Gestion des images, onglet Icônes des sujets
Voir illustration :

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Insertion du CSS


Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

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

Remplacez #COLOR par le code couleur hexadécimal de votre choix. A toutes fins utiles, vous pouvez utiliser ce générateur.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Pour la version AwesomeBB


Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Coloriser les cellules lorsqu'un nouveau message est posté" et pour placement "Sur l'index" et / ou "Sur les sous-forums" (plus d'informations sur la gestion des scripts).

Code:
$(function() {
  $('div[title="Nouveaux messages"]').parent().closest('div').addClass('newpost');
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Insertion du CSS


Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

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

Remplacez #COLOR par le code couleur hexadécimal de votre choix. A toutes fins utiles, vous pouvez utiliser ce générateur.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

avatar

Matriochka
Membre actif

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

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

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

- Sujets similaires

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