Cibler un sous-forum avec du CSS

[MlleSnake]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !
Je cherche à savoir s'il a moyen de cibler et personnaliser un lien vers un sous-forum. Ce que je cherche à faire c'est que chaque sous-forum soit représenté par une image différente sur la page d'accueil, et non seulement lorsqu'on ouvre le forum. J'ai fait une maquette, ce sera sûrement plus clair.

J'ai essayé de cibler les liens directement de cette façon (sans succès) :
.subforumrps a.gensmall[href^="/f16-"]{background-color:green}

Question supplémentaire : Comme j'essaie de simplifier le plus possible mon css puisqu'il y a un nombre de lignes limitées, est-ce qu'il y aurait moyen que je mette les images via général→ catégories et forums→ modifier un forum → adresse de l'image et que je puisse récupérer cette image pour qu'elle s'applique comme je le demande ci-haut? Via du javascript j'imagine, mais je n'y comprends vraiment rien en js haha...

Merci d'avance!

[Toryudo]

Bonjour !

Alors, je suppose que c'est pour le forum https://pkmn-lumiatest.forumactif.com/ mais avec ce que je vois dans la page, je n'en suis pas sûr.
Pour commencer, j'ai l'impression que ".subforumrps" n'existe pas.
La structure des lien vers les sous-forums ressemble plutôt à ceci :

Code:

<div id="subforum"><span><a href="/f12-questions" title="" class="gensmall">Questions</a>, <a href="/f13-absences" title="" class="gensmall">Absences</a></span></div>

Donc pour cibler le f12 par exemple, il faudrait plutôt faire comme ceci :

Code:

#subforum a.gensmall[href^="/f12-"]{
  background-color: green;
}

Par contre, petite remarque : normalement, un id est unique sur une page. Ici, tel que c'est écrit, vous avez plusieurs fois l'id "subforum", ça pourrait poser problème (notamment si vous voulez le cibler avec du JavaScript). Je vous propose de plutôt remplacer ça par class="subforum" et donc changer #subforum par .subforum dans le CSS que je vous ai donné (et partout sur vos autres CSS qui cibleraient #subforum).


Après, potentiellement, il est possible de faire la même chose en JavaScript.
Comme je disais, il faudrait d'abord changer l'id en class pour être plus propre, puis on pourrait cibler chaque élément comme ceci :

Code:

$('.subforum a.gensmall[href^="/f12-"]').css('background-color', 'green');

Ne pas oublier de rajouter $(function(){ avant et }); après sur le script final, et ça pourrait donner ceci :

Code:

$(function(){
  $('.subforum a.gensmall[href^="/f12-"]').css('background-color', 'green');
  $('.subforum a.gensmall[href^="/f13-"]').css('background-color', 'red');
  $('.subforum a.gensmall[href^="/f15-"]').css('background-color', 'blue');
});


Comme ça, plus de CSS dans la feuille de style et vous évitez même de passer par la gestion des images.
Mais on pourrait faire encore mieux, il y a plein de façons de faire, je vous laisse me dire si vous en voulez d'autres !

[MlleSnake]

Bonjour ! Déjà, merci beaucoup de m'aider.
C'est effectivement la bonne adresse, la maquette fournie plus haut était pour exemplifier ce dont je parlais, et pas vraiment la maquette de mon code (:

J'ai deux codes différents pour mes catégories, celui que vous avez vu est pour mes catégories "de base", mais j'ai aussi ma section plus bas sur le forum avec un code différent pour la section RP. La structure des liens est comme ceci :

Code:

<!-- Liens de sous-forum -->
<div class="subforumsrp">
   <span>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>

Le « # subforum a.gensmall[href^="/f12-"]{ background-color: green;} » fonctionne bien pour mon code catégorie de base, mais pas pour la catégorie RP, pourtant c'est seulement la class qui est changée, donc je suis d'autant plus confuse haha.

La méthode javascript pourrait me convenir, mais si vous avez d'autres propositions aussi, n'hésitez pas à proposer !

Merci beaucoup (:
ps. j'ai changé le ID ou une class tel que suggéré, merci.
pps. Je voulais aussi préciser que mon code est construit sur la base du blankthemerpg, j'ai oublié de le mentionner dans mon premier message.

[Toryudo]

Ah oui, d'accord, je viens de comprendre comment ça se goupillait !
... mais attendez, vous avez écrit :

Code:

.subforumrps a.gensmall[href^="/f16-"]{background-color:green}

Alors que ce serait plutôt comme ceci :

Code:

.subforumsrp a.gensmall[href^="/f16-"]{background-color:green}

subforumsrp à la place de subforumrps ?
Ça marche de mon côté en tout cas

[MlleSnake]

oh bon sang, oui c'était ça .. j'étais certaine d'avoir triplement et même quadruplement vérifié que j'avais bien retranscrit la class

Ça fonctionne impeccablement, j'ai passé par javascript aussi et tout fonctionne bien là aussi ! Un énorme merci