Coloriser les cellules des annonces (globales) et notes

[Matriochka]

Coloriser les cellules des annonces (globales) et notes

Cette astuce vous permettra d’intégrer une couleur spécifique aux cellules contenant des annonces (globales), des notes [lire ce tutoriel] sur votre forum Forumactif. Cette astuce mettra donc en valeur les messages importants dans vos sous-forums. Illustration: Installer le script Ce script va permettre d’ajouter une class aux cellules contenant des annonces et des notes en se référant soit à l’image utilisée, soit l'id de la balise div contenant les annonces et les notes (pour la version AwesomeBB) pour les différencier des autres sujets de votre forum. Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Coloration des messages importants" et pour placement "Sur les sous-forums". Insérez-y le code suivant (eu égard à la version de votre forum) : Pour les versions phpBB2, punBB et Invision Code: $(function() { /* Ajoute une class à la cellule des annonces */ $('img[src="http://url_image_annonces.jpg"]').closest('tr').addClass('annonces'); /* Ajoute une class à la cellule des annonces globales */ $('img[src="http://url_image_annonces_globales.jpg"]').closest('tr').addClass('annonces_globales'); /* Ajoute une class à la cellule des notes*/ $('img[src="http://url_image_notes.jpg"]').closest('tr').addClass('notes'); }); Il faut remplacer les URL des images par celles que vous utilisez sur votre thème : - http://url_image_annonces.jpg : l’URL de l’image utilisée pour les annonces ; - http://url_image_annonces_globales.jpg : l’URL de l’image utilisée pour les annonces globales ; - http://url_image_notes.jpg : l’URL de l’image utilisée pour les notes. Pour les versions phpBB3 et ModernBB Code: $(function() { /* Ajoute une class à la cellule des annonces */ $("dl.icon[style*='http://url_image_annonces.jpg']").addClass("annonces"); /* Ajoute une class à la cellule des annonces globales */ $("dl.icon[style*='http://url_image_annonces_globales.jpg']").addClass("annonces_globales"); /* Ajoute une class à la cellule des notes */ $("dl.icon[style*='http://url_image_notes.jpg']").addClass("notes"); }); Il faut remplacer les URL des images par celles que vous utilisez sur votre thème : - http://url_image_annonces.jpg : l’URL de l’image utilisée pour les annonces ; - http://url_image_annonces_globales.jpg : l’URL de l’image utilisée pour les annonces globales ; - http://url_image_notes.jpg : l’URL de l’image utilisée pour les notes. Pour les versions AwesomeBB Code: $(function() { /* Ajoute une class à la cellule des annonces */ $('div.posts-icon.folder_announce').closest('.posts-section').addClass('annonces'); /* Ajoute une class à la cellule des annonces globales */ $('div.posts-icon.folder_global').closest('.posts-section').addClass('annonces_globales'); /* Ajoute une class à la cellule des notes */ $('div.posts-icon.folder_sticky').closest('.posts-section').addClass('notes'); }); Cliquez sur le bouton afin de sauvegarder les modifications. Installer le CSS Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS Pour les versions phpBB2, punBB et Invision Code: /* Modifie la couleur de fond des annonces */ tr.annonces td {background-color:#COLOR!important;} /* Modifie la couleur de fond des annonces globales */ tr.annonces_globales td {background-color:#COLOR!important;} /* Modifie la couleur de fond des notes */ tr.notes td {background-color:#COLOR!important;} Il faut remplacer la valeur #COLOR par le code couleur de votre choix. Pour les versions phpBB3 et ModernBB Code: /* Modifie la couleur de fond des annonces */ dl.annonces {background-color:#COLOR;} /* Modifie la couleur de fond des annonces globales */ dl.annonces_globales {background-color:#COLOR;} /* Modifie la couleur de fond des notes */ dl.notes {background-color:#COLOR;} Il faut remplacer la valeur #COLOR par le code couleur de votre choix. Pour les versions AwesomeBB Code: /* Modifie la couleur de fond des annonces */ .annonces {background-color:#COLOR;} /* Modifie la couleur de fond des annonces globales */ .annonces_globales {background-color:#COLOR;} /* Modifie la couleur de fond des notes */ .notes {background-color:#COLOR;} /* Tires longs sur 2 lignes */ .forum-description h3, .posts-description h3, .block-topics h2 {     white-space: normal;     padding-right: 0 !important;} .forum-description h3::after, .posts-description h3::after, .block-topics h2::after {content: none;} Il faut remplacer la valeur #COLOR par le code couleur de votre choix. Cliquez sur le bouton afin de sauvegarder les modifications.

Ce tutoriel a été réalisé par le Staff du Forum des Forums, En particulier par Matriochka, actualisé par Bipo et *Splash* (décembre 2018). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.