Personnaliser la coloration du titre du sujet

par **Luzz** Ven 06 Aoû 2021, 14:21

Personnaliser la coloration du titre du sujet

Cette astuce vous propose de personnaliser la fonction "Autoriser la couleur pour les titres de sujets". En effet, vous aurez la possibilité d'ajouter de nouvelles couleurs (par exemple celles de vos groupes) et de paramétrer des permissions dans l'utilisation de cette fonction.

Voir illustration :

Prérequis

Tout d'abord, il convient que cette option soit activée :

Panneau d'administration  Général  Messages et Emails - Configuration

A la ligne "Autoriser la couleur pour les titres de sujets", cochez "Oui".

N'oubliez pas de cliquer sur le bouton :enreg:

afin de sauvegarder les modifications.

Voir illustration :

Ajouter de nouvelles couleurs

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 "Ajouter des couleurs au titre des sujets" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: $(function() { if (!document.post || !document.post.topic_color) return; var colors = { 'nom_de_la_couleur': 'code_couleur_hexadécical', }, a, b = document.post.topic_color, c = b.childNodes, i = 0, j = c.length, k; for (k in colors) { a = document.createElement('OPTION'); a.innerHTML = k; a.style.color = colors[k]; a.value = colors[k]; b.insertBefore(a, b.firstChild) }; for (; i < j; i++) if (c[i].style.color == document.post.subject.style.color) c[i].selected = 1 });

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

Paramétrage du script

Le seule paramétrage consiste en l'ajout de nouvelles couleurs. Pour ce faire, il vous suffit de renseigner la ou les couleur(s) que vous souhaitez entre la variable var colors = { ... } en suivant cette écriture :

Code:: var colors = { 'nom_de_la_couleur': 'code_couleur_hexadécical', },

Ce qui peut donner à partir de l'exemple :

Code:: var colors = { 'Couleur 3': '#3CB371', 'Couleur 2': '#5c5658', 'Couleur 1': '#20B2AA', },

Gérer les permissions

Pour toutes les versions sauf AwesomeBB

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 "Permissions des couleurs au titre des sujets" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Autoriser seulement les administrateurs à utiliser cette option

Code:: $(function() { if(_userdata.user_level !== 1) { $('select[name="topic_color"]').hide(); } });

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

Autoriser seulement les administrateurs et modérateurs à utiliser cette option

Code:: $(function() { if(_userdata.user_level == -1 | _userdata.user_level == 0) { $('select[name="topic_color"]').hide(); } });

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

Autoriser seulement quelques membres à utiliser cette option

Code:: $(function(){ if($.inArray(_userdata["user_id"], [ID_membre1, ID_membre2, ID_membre3])==-1){ $('select[name="topic_color"]').remove(); }; });

Remplacez [ID_membre1, ID_membre2, ID_membre3] par les ID des membres qui auront le droit d'utiliser cette option. Pour obtenir l'ID d'un membre, il vous suffit de vous rendre dans le profil du membre et de récupérer le nombre qui se trouve après le /u dans l'adresse URL :

Voir illustration :

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

Pour la version AwesomeBB

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 "Permissions des couleurs au titre des sujets" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Autoriser seulement les administrateurs à utiliser cette option

Code:: $(function() { if(_userdata.user_level !== 1) { $('select[name="topic_color"]').hide(); $(function(){ $('div[id="postingbox"]').find('div.select').hide(); }); }; });

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

Autoriser seulement les administrateurs et modérateurs à utiliser cette option

Code:: $(function() { if(_userdata.user_level == -1 | _userdata.user_level == 0) { $('select[name="topic_color"]').hide(); $(function(){ $('div[id="postingbox"]').find('div.select').hide(); }); }; });

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

Autoriser seulement quelques membres à utiliser cette option

Code:: $(function(){ if($.inArray(_userdata["user_id"], [ID_membre1, ID_membre2, ID_membre3])==-1){ $('select[name="topic_color"]').remove(); $(function(){ $('div[id="postingbox"]').find('div.select').hide(); }); }; });

Remplacez [ID_membre1, ID_membre2, ID_membre3] par les ID des membres qui auront le droit d'utiliser cette option. Pour obtenir l'ID d'un membre, il vous suffit de vous rendre dans le profil du membre et de récupérer le nombre qui se trouve après le /u dans l'adresse URL :

Voir illustration :

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