Mettre les titres des sujets en gras

[Swéb2]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'aimerais savoir comment mettre en gras les titres des sujets.
Eventuellement, uniquement les titres des notes, des annonces et des annonces globales.

Merci.

[Bryx]

Salut,

Je te propose cette solution : https://forum.forumactif.com/t348011-coloriser-les-cellules-des-annonces-globales-et-notes

Au lieu de mettre une couleur de fond, tu remplaces le [background-color] par [font-weight: bold]. Veille à bien mettre dans ton système de style des icônes de sujet.

Bien à toi,
Bryx

[Swéb2]

Merci pour ta réponse.
Mon forum étant en ModernBB, j'ai créé ce script actif sur toutes les pages :

1. $(function() {
2. /* Ajoute une class à la cellule des annonces */
3. $("dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons833.png']").addClass("annonces");
4. /* Ajoute une class à la cellule des annonces globales */
5. $("dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons838.png']").addClass("annonces_globales");
6. /* Ajoute une class à la cellule des notes */
7. $("dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons832.png']").addClass("notes");
8. });

et j'ai ajouté à la feuille de style CSS ces lignes :

1. /* Mettre en gras les annonces, etc */
2. dl.annonces {font-weight: bold;}
3. /* Modifie la couleur de fond des annonces globales */
4. dl.annonces_globales {font-weight: bold;}
5. /* Modifie la couleur de fond des notes */
6. dl.notes {font-weight: bold;
7. }

Cela ne modifie rien à l'apparence des titres des annonces, des notes et des annonces globales qui ne passent pas au "gras".

[Bryx]

Effectivement, l'astuce ne fonctionne plus, je viens de l'essayer.

Je vous propose ceci :

Code:

(function ($) {
    "use strict";
    var config = [
         { url: "2img.net/i/fa/modernbb/announce_read.png", background: "#D6FFD8" },
        { url: "2img.net/i/fa/modernbb/folder_global_announce.png", background: "#D4F3FD" },
        { url: "2img.net/i/fa/modernbb/sticky_read.png", background: "#FFF4D1" },
    ];
    $(function () {
        $(".icon").each(function () {
            var $this = $(this);
            if (!$this.css("background-image")) return;
            $.each(config, function (index, current) {
                var regex = new RegExp('^url\\("(http|https)://' + current.url + '"\\)$', "i");
                if (!regex.test($this.css("background-image"))) return;
                $this.parent().css("background-color", current.background);
            $this.parent().css("font-weight", "bold");
            });
        });
    });
})(jQuery);

Ce que vous pouvez faire :
- changer le fond du background color,
- ajouter les images pour nouvelle annonce, annonce globale et note,

Code:

{ url: "2img.net/i/fa/modernbb/sticky_read.png", background: "#COLEUR ICI" },

J'espère que ça vous aidera.
Ce codage JS fonctionne correctement.

Bien à toi,
Bryx

[chattigre]

Bonjour @Bryx et @Swéb2,

Si, après test, l'astuce fonctionne de notre côté.
En revanche, le CSS donné pour un background ne peut pas fonctionner avec ce sélecteur pour font-weight puisque la graisse de la police est redéfinie de manière plus précise dans les éléments enfants de dl.icon

Si on veut mettre en gras le titre, on peut faire quelque chose en CSS comme :

Code:

.notes .topic-title a, .annonces .topic-title a, .annonces_globales .topic-title a {
  font-weight: bold !important;
}

Avec le code original de l'astuce.


D'ailleurs, cela devrait même être faisable directement en CSS avec un sélecteur d'attributs, même si c'est un peu lourd et que la convention amène sans doute à passer par du JS :

Code:

dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons832.png'] .topic-title a,
dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons833.png'] .topic-title a,
dl.icon[style*='https://i.servimg.com/u/f40/19/45/80/11/icons838.png'] .topic-title a {
  font-weight: bold !important;
}

Cordialement

[Swéb2]

Merci @Bryx,

Si je comprends bien, ce que vous proposez est de modifier la couleur de fond des titres des annonces, annonces globales et notes ?
C'est une solution que je ne désire pas utiliser.

J'aimerais en fait que systématiquement, les titres des sujets postés (aussi bien annonces, annonces globales, notes que sujet "classiques") sur le forum soit en gras et écrits plus grand (ou gros) qu'actuellement.

Merci pour votre aide.

[Swéb2]

Merci @Chattigre,

Pouvez-vous développer votre réponse en me détaillant précisément les étapes que je dois suivre pour tester votre proposition ?

[chattigre]

Si vous ne voulez cibler que les annonces, annonces globales et notes, reprenez le code JavaScript de l'astuce donnée au départ par Bryx (ici, point 1.2) , et ajoutez ceci à votre feuille de style CSS :

Code:

.notes .topic-title a, .annonces .topic-title a, .annonces_globales .topic-title a {
  font-weight: bold !important;
}

Si vous voulez toucher tous les titres, pas besoin de JS, ajoutez simplement à votre CSS :

Code:

dl.icon .topic-title a {
  font-weight: bold !important;
}

Bonne journée
Cordialement

[Swéb2]

Merci @Chattigre,

Cela fonctionne parfaitement.
J'aimerais cependant que les titres apparaissent un peu plus grand.
Quel code dois-je ajouter au second CSS que vous avez proposez :

1. dl.icon .topic-title a {
2. font-weight: bold !important;
3. }

pour changer la taille de la police des titres et également modifier la police d'écriture de ces titres ?

[Swéb2]

J'ai trouvé de moi même pour la taille de la police

J'ai ajouter ceci au CSS :

1. /*Changer la taille des titres des sujets*/
2. dl.icon .topic-title a {
3. font-size: 18 !important;
4. }

Par contre,

1. /*Changer la police des titres des sujets*/
2. dl.icon .topic-title a {
3. font: Syne !important;
4. }

Semble ne pas modifier la police d'écriture.

[Bryx]

Merci chattigre, la solution sans JS est la meilleure, je n'y avais pas pensé :'(

Swéb2, voici ce que tu devrais avoir :

Code:

dl.icon .topic-title a {
  font-family: Syne, serif !important;
  font-weight: bold !important;
  font-size: 18 !important;
}

[Swéb2]

Merci à vous deux.