Boutons New message, No message, verrouillé en mode Dark

[sueki]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://testlvr.forumactif.com/

Description du problème

Bonjour, je reviens vers vous pour savoir comment mettre les boutons nouveaux message, message verrouillé et pas de nouveau message en mode Dark.

J'ai testé plusieurs choses mais je n'y arrive pas.

Merci à vous pour votre aide

[Fallen Leaves]

Bonjour Sueki

Ayant dû faire face au même souci, je viens t'expliquer comment j'ai contourné le problème chez moi

Je me suis vite rendue compte que les boutons nouveaux message, message verrouillé et pas de nouveau message allaient être problématiques parce que la variable {catrow.forumrow.FORUM_FOLDER_IMG} va chercher une image bien précise et que du coup on doit avoir la même pour les deux thèmes. (et ça c'est une notion à prendre en compte très sérieusement parce que si tu comptais avoir un texte "Pas de nouveau message" qui s'affiche en blanc sur un fond sombre et en noir sur un fond clair, eh bien ça ne va pas être possible du tout vu qu'on est obligé d'utiliser la même image, peu importe la version)

Voilà du coup comment j'ai fait :

Sur mon forum (lien dans mon profil), tu verras que les forums sans nouveau message sont comme ceci en mode light :

et comme cela en mode dark :

En gros j'ai créé un png avec juste le texte "rien à voir" en blanc légèrement transparent. C'est donc l'image que je vais mettre dans mon panneau d'admin > Affichage > Images et Couleurs > Gestion des Images > Icônes du forum et qui me servira peu importe la version, light ou dark.

La chose sur laquelle j'ai joué donc, c'est le fond :
Cette image va venir se superposer sur un fond de couleur, couleur que je gère grâce au CSS selon si je suis en mode light ou dark.

Dans mon template (j'ai un forum en ModernBB) ça rend comme ceci :

Code:

<dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}); background-color: var(--no-new);">

Dans ma feuille de style CSS :

Code:

:root {
  --no-new: #aec6b4;
}

[data-theme="dark"]{ /* root de la version sombre*/
  --no-new: #202020;
}

Alors moi c'est une méthode qui me convient (on ne fait que toucher aux templates et au CSS) et parce que je voulais du texte sur un fond de couleur unie. Après je peux comprendre qu'elle puisse ne pas te convenir si tu voulais par exemple mettre deux images totalement différentes avec des textes dont tu aurais pu gérer la couleur.
Alors peut-être qu'en passant par du javascript, c'est possible ? (en disant si theme=dark alors on utilise cette image ci pour la variable {catrow.forumrow.FORUM_FOLDER_IMG} en fonction de si c'est un nouveau message, si c'est un message verrouillé etc etc...) Pour ça malheureusement, je ne pourrais pas t'aider, je n'ai pas les compétences requises  (si jamais un expert JS passe par là et a la solution, je suis preneuse également   )

Voilà, ça a été ma façon de contourner le problème, j'espère que ça t'aiguille tout de même un peu

[sueki]

Merci à toi pour ton aide mais mes co admins voulait vraiment une image différente pour les deux thèmes. Je vais quand même voir tout ça avec tes idées et voir si quelqu'un a quelque chose d'autres.

En tout cas merci beaucoup pour ton message

[Fallen Leaves]

Oui je me doutais que la solution ne conviendrait peut-être pas à ce que tu souhaitais. Je t'avoue que si quelqu'un a la solution, la vraie lol, ça m'aiderait aussi beaucoup pour la création de mon prochain thème !
J'espère qu'un(e) pro des codes va passer dans le coin et nous dire si c'est faisable ou non

Bon courage pour la suite de ton fofo et bonne soirée

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[sueki]

Bonjour toujours d’actualité. Je n’ai pas trouvé la solution

[Toryudo]

Bonjour !
Vous avez une propriété CSS qui s'appelle content: url(); et qui, notamment, permet de modifier le lien d'une image.
Pour du phpbb2, on peut partir sur la manière la plus simple de cibler les images, en passant par leur attribut alt, dont voici la liste :

• Nouveaux messages
  
• Nouveaux messages [ Populaire ]
  
• Nouveaux messages [ Verrouillé ]
  
• Pas de nouveaux messages
  
• Pas de nouveaux messages [ Populaire ]
  
• Pas de nouveaux messages [ Verrouillé ]
  
• Annonce
  
• Annonce globale
  
• Note

En combinant avec [data-theme="dark"] ou [data-theme="light"] que vous utilisez actuellement, vous pouvez modifier les images en procédant de cette manière.
Thème dark :

Code:

[data-theme="dark"] img[alt="Nouveaux messages"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Nouveaux messages [ Populaire ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Nouveaux messages [ Verrouillé ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Pas de nouveaux messages"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Pas de nouveaux messages [ Populaire ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Pas de nouveaux messages [ Verrouillé ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Annonce"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Annonce globale"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="dark"] img[alt="Note"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}

Thème light :

Code:

[data-theme="light"] img[alt="Nouveaux messages"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Nouveaux messages [ Populaire ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Nouveaux messages [ Verrouillé ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Pas de nouveaux messages"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Pas de nouveaux messages [ Populaire ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Pas de nouveaux messages [ Verrouillé ]"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Annonce"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Annonce globale"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}
[data-theme="light"] img[alt="Note"] {
   content: url("https://2img.net/i.imgur.com/D5r1lyx.png");
}

J'espère avoir bien compris ce que vous vouliez faire, et que ça correspond bien à votre demande !

[sueki]

Merci je vais tester cela

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.