Cette astuce nous permettra de personnaliser des sujets spécifiques grâce à deux méthodes distinctes, pour deux utilisations différentes.
Titre: ce que vous voulez
Placement: Sur les sous-forums
Code: insérer le code suivant:
Ensuite, vous pourrez personnaliser tous les sujets ayant telle icône comme vous l'entendez. Un exemple pour coloriser en vert les sujets ayant l'icône résolue, dont l'url de l'icône est https://i.imgur.com/g1NOuj4.png :
Rendez-vous dans: Affichage » Templates » Général » topics_list_box
Trouver:
Remplacer par:
Ensuite, vous pourrez personnaliser le ou les sujet(s) de votre choix. Un exemple pour coloriser en bleu le sujet dont le titre est "Annonce test" :
On peut même, évidemment, pousser la personnalisation encore plus loin. Cliquez ici pour voir l'exemple rendu avec le code suivant:
modernBB :
Utilisation 1: Grâce aux icônes
Créons un nouveau JS. Pour cela, rendez-vous dans Modules » HTML & Javascript » Gestion des codes Javascript » Créer un nouveau Javascript:Titre: ce que vous voulez
Placement: Sur les sous-forums
Code: insérer le code suivant:
Code:
$('.topiclist dl.icon dd.dterm').each(function() {
var $icon = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
$(this).parent().parent().attr('data-icon', $icon);
});
Ensuite, vous pourrez personnaliser tous les sujets ayant telle icône comme vous l'entendez. Un exemple pour coloriser en vert les sujets ayant l'icône résolue, dont l'url de l'icône est https://i.imgur.com/g1NOuj4.png :
Code:
li.row.row1[data-icon="https://i.imgur.com/g1NOuj4.png"] {
background-color: #7ec94e;
}
li.row.row1[data-icon="https://i.imgur.com/g1NOuj4.png"] * {
color: white;
}
Utilisation 2: Grâce au titre du sujet
Cette utilisation ciblera des sujets très spécifiques que vous souhaitez personnaliser (contexte, règles du forum, annonce/annonce globale à ne pas manquer, etc.). Cela va nécessiter la modification d'un template.Rendez-vous dans: Affichage » Templates » Général » topics_list_box
Trouver:
Code:
<li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
Remplacer par:
Code:
<li class="row {topics_list_box.row.ROW_ALT_CLASS}" data-title="{topics_list_box.row.TOPIC_TITLE}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
Ensuite, vous pourrez personnaliser le ou les sujet(s) de votre choix. Un exemple pour coloriser en bleu le sujet dont le titre est "Annonce test" :
Code:
li.row[data-title="Annonce test"] {
background-color: #0088d1;
}
li.row[data-title="Annonce test"] * {
color: white;
}
On peut même, évidemment, pousser la personnalisation encore plus loin. Cliquez ici pour voir l'exemple rendu avec le code suivant:
Code:
li.row[data-title="Annonce test"] {
background-color: #0088d1;
}
li.row[data-title="Annonce test"] * {
color: white;
}
li.row[data-title="Annonce test"] dl.icon {
background-image: url(https://i.imgur.com/jjdic6u.png) !important;
}
li.row[data-title="Annonce test"] .topic-title-container strong,
li.row[data-title="Annonce test"] span.topic-author,
li.row[data-title="Annonce test"] .topic-title-container img,
li.row[data-title="Annonce test"] dd.posts,
li.row[data-title="Annonce test"] dd.views,
li.row[data-title="Annonce test"] dd.lastpost {
display: none;
}
li.row[data-title="Annonce test"] dd.dterm {
width: 100%;
text-align: center;
padding-top: 12px;
}
Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre; c'est un travail qui a pris plusieurs heures jours de mon temps libre.
modernbb