Comment dissocier les couleurs de texte ?

[ABsolument Dorothée]

Bonjour à toute l'équipe.

Je poste ce message car j'aurais besoin de votre aide pour savoir comment obtenir 2 couleurs différentes pour le texte affiché sur la page d'accueil de mon forum https://www.absolumentdorothee.com

C'est toujours plus parlant avec une image :



Afin de faire ressortir les rubriques du forum, elles ont un fond clair qui tranche avec le foncé de l'image de fond ; le texte en noir y ressort parfaitement.

En revanche, le texte hors rubriques, comme la date, l'heure, les "Qui est en ligne ?", les statistiques ou encore les liens en bas de page sont quasi illisibles avec une couleur de texte noir.

Comment faire pour que la couleur du texte , hors rubriques du forum, soit en blanc par exemple ?

Par ailleurs, lorsque je rentre dans une rubrique, la zone de saisie de la fenêtre de recherche est transparente, peut-on mettre un fond blanc ?



Enfin, pour reprendre ma première image, j'ai une ligne blanche qui est affichée sous les boutons "Accueil", "Aide"... Y a-t-il un moyen de la supprimer sans que cela ait une incidence sur le reste de l'affichage ?



Par avance, un grand merci pour votre aide et une bonne soirée à toute l'équipe  

[Toryudo]

Bonjour !

Pour le premier point, ça me parait compliqué ; on peut faire en sorte de changer la couleur de certains éléments qu'on cible précisément (par exemple, on pourrait cibler l'élément "Qui est en ligne ?" et changer la couleur de son texte en rouge), par contre, pour du texte basique/générique qu'on trouve par-ci par-là comme "La date/heure actuelle est Lun 6 Nov 2023 - 21:16", ce n'est pas vraiment possible. Le cibler revient à cibler tous les éléments textes aussi "génériques que lui", c'est à dire à peu près tous les textes du forum.
Compliqué !

Pour le deuxième point, puisqu'on peut cibler les champs de saisies "Rechercher", oui, on peut modifier ça avec le CSS suivant :

Code:

input.search {
  background: url(https://2img.net/i/fa/sprite_prosilver_navbar.png) #FFF no-repeat 0 -701px;
}

Et enfin, pour le troisième point, pour ma part, je ne vois pas cette barre en tant qu'invité ; est-ce qu'elle apparait uniquement quand vous êtes connecté ? Sur une version phpbb3, je peux deviner qu'il faut rajouter ce CSS pour la masquer, si elle correspond bien à ce que je pense :

Code:

ul.navlinks {
  border: none;
}

Je vous laisse tester !

[ABsolument Dorothée]

Bonjour !

Pour le deuxième point, puisqu'on peut cibler les champs de saisies "Rechercher", oui, on peut modifier ça avec le CSS suivant :

Code:

input.search {
  background: url(https://2img.net/i/fa/sprite_prosilver_navbar.png) #FFF no-repeat 0 -701px;
}

Et enfin, pour le troisième point, pour ma part, je ne vois pas cette barre en tant qu'invité ; est-ce qu'elle apparait uniquement quand vous êtes connecté ? Sur une version phpbb3, je peux deviner qu'il faut rajouter ce CSS pour la masquer, si elle correspond bien à ce que je pense :

Code:

ul.navlinks {
  border: none;
}

Je vous laisse tester !

Bonjour Toryudo,

Merci pour votre retour.
C'est PARFAIT pour ces 2 points. Les CSS que vous m'avez communiqués ont réglé les points évoqués  

Bonjour !

Pour le premier point, ça me parait compliqué ; on peut faire en sorte de changer la couleur de certains éléments qu'on cible précisément (par exemple, on pourrait cibler l'élément "Qui est en ligne ?" et changer la couleur de son texte en rouge), par contre, pour du texte basique/générique qu'on trouve par-ci par-là comme "La date/heure actuelle est Lun 6 Nov 2023 - 21:16", ce n'est pas vraiment possible. Le cibler revient à cibler tous les éléments textes aussi "génériques que lui", c'est à dire à peu près tous les textes du forum.
Compliqué !

Mince, mince, mince. C'est très embêtant car sans vouloir chipoter, le texte noir sur fond foncé est très difficilement lisible  

Il y aurait en effet sur la page d'accueil :

• La date/heure actuelle
  
• Dernière visite
  
• Les liens :
  
• Voir les nouveaux messages depuis votre dernière visite
  
• Voir ses messages
  
• Voir les messages sans réponses
  
• Marquer tous les forums comme lus
  
• Sujets actifs du jour
  
• Top 20 des posteurs du jour
  
• Top 20 des posteurs du forum
  
• Supprimer les cookies du forum
  
• Qui est en ligne ?
  
• Statistiques
  
• Accueil(C)phpBB
  
• Statistiques
  
• Signaler un abus
  
• FACEBOOK
  
• TWITTER
  
• YOUTUBE
  
• Panneau d'administration
  
• Le descriptif des icônes (Nouveaux messages, Pas de nouveaux messages, Pas de nouveaux messages, Forum Verrouillé)
  
• Lorsque que l'on rentre dans une rubrique, le nom de cette rubrique au dessus du bouton "Nouveau"
  
• Et enfin la fenêtre PERMISSION DE CE FORUM: Vous pouvez répondre aux sujets dans ce forum, Vous pouvez modérer ce forum.

Je pense ne rien avoir oublié.

Je ne doute pas un instant que cela soit fastidieux malheureusement. Comment pourrions-nous faire ?

Ou alors mettre tout en blanc et enregistrer des exceptions pour tout ce qui couleur de texte dans les rubriques et messages.

J'avoue ne pas trop comment procéder et regrette qu'une seule et même couleur ne soit paramétrable sur le panneau de configuration  

D'avance, un immense merci pour l'aide que vous pourrez m'apporter.

[Toryudo]

Bonjour !

Je pense qu'il y a aussi des différences dans les boites MP, peut-être dans les profils, dans les pages de recherche de messages, etc. En théorie, tout est faisable : il suffirait de modifier tous les Templates, d'identifier les endroits où il y a du texte à colorer autrement, les mettre entre balises <span class="colorHighlight"></span> par exemple, et ajouter du CSS pour modifier la couleur des éléments .colorHighlight
C'est du boulot si vous tentez cette solution

Vous pouvez aussi tenter des petites choses, comme ce CSS qui permet de mettre tous les textes un peu brillants :

Code:

body {
  text-shadow: 0 0 2px #FFF;
}

En regardant ce que ça donne, je trouve que tout est un peu plus lisible. Pas à tous les endroits, c'est sûr, mais le fond d'écran est tellement riche en couleur que c'est compliqué d'être parfait partout !

[ABsolument Dorothée]

Bonjour Toryudo,

Merci pour cette proposition de code CSS, nous l'avons testée et en effet le texte est un peu plus lisible, mais il reste parfois compliqué à lire à certains endroits.

Le mieux serait en effet de mettre ce texte en blanc.

Auriez-vous une liste du nom de tous les endroits du forum afin que je puisse modifier ceux à colorer en blanc, ainsi qu'un exemple de code à saisir dans la feuille CSS ?

Ça sera en effet du boulot, mais nous sommes motivés si cela permet d'avoir un forum au top  

[Toryudo]

Bonjour !

Alors voilà tous les éléments (je les ai organisés par groupe, et j'en ai rajouté quelques uns que j'ai vus au passage).
Quand je donne un nom de Template, il faut remplacer la variable {LAST_VISIT_DATE} que je donne par <span class="dorothee-color">{LAST_VISIT_DATE}</span> par exemple. Ça permet alors de cibler l'élément .dorothee-color en CSS, et donc de pouvoir le cibler comme on veut.
Pour tous les autres, je donne le nom de l'élément qu'il faut cibler pour changer la couleur.

• La date/heure actuelle :
  - Template index_body, {LAST_VISIT_DATE} pour la page d'accueil
  - Template viewforum_body, {LAST_VISIT_DATE} pour les autres pages
  
• Dernière visite :
  - Template index_body, {CURRENT_TIME} pour la page d'accueil
  - Template viewforum_body, {CURRENT_TIME} pour les autres pages:
  
• Utilisateurs parcourant actuellement ce forum : Template viewforum_body, {LOGGED_IN_USER_LIST}
  
  
• Voir les nouveaux messages depuis votre dernière visite : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Voir ses messages : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Voir les messages sans réponses : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Marquer tous les forums comme lus : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Sujets actifs du jour : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Top 20 des posteurs du jour : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Top 20 des posteurs du forum : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
• Supprimer les cookies du forum : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .linklist a
  
  
• Qui est en ligne ? : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .bloc_stats
  
• Statistiques : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .bloc_stats
  
• La fenêtre PERMISSION DE CE FORUM : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .bloc_stats
  
  
• Accueil(C)phpBB : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• Statistiques : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• Signaler un abus : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• FACEBOOK : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• TWITTER : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• YOUTUBE : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
• Panneau d'administration : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #page-footer a
  
  
• Lorsque que l'on rentre dans une rubrique, le nom de cette rubrique : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .page-title a
  
• Le descriptif des icônes : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #picture_legend
  
• Page 1 sur x : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .pagination a
  
• Sauter vers : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .action-box

Pour changer la couleur, il ne reste plus qu'à prendre l'élément et à lui associer une couleur, comme ceci :

Code:

#page-footer a {
  color: #fff;
}

[ABsolument Dorothée]

Bonjour cher Toryudo,

Tout d'abord, un IMMENSE MERCI pour cette liste et ces explications qui ont du vous demander beaucoup de temps  

J'ai pu mettre les éléments souhaités en blanc ce qui rend la lecture du texte beaucoup facile  

J'ai noté ces derniers irréductibles éléments qui restent écrits en noir. Avez-vous une piste pour les afficher en blanc ?

Pour les autres pages que l'accueil :

Les liens pour revenir sur les catégories précédentes


L'intitulé "Sauté vers:" en bas de la liste des sujets


Lorsque l'on rentre dans un sujet :

Le nombre de participants, les liens pour revenir sur les catégories précédentes, la page X sur Y, le numéro des pages dans les petits rectangles pour y accéder directement


Lorsque je clique sur "Plus !" la fenêtre s'affiche en transparence et n'est pas lisible. Est-il envisageable d'avoir une police noire sur fond blanc ? (ou si le choix de la couleur de la police est impossible : une police blanche sur fond foncé)


Enfin, dans la messagerie :

La date et l'heure actuelles, la date de dernière visite et le descriptif des icônes


Lorsque l'on rentre dans un message : les titres




Ultime chipotage, est-il possible selon vous de prévoir un petit espace entre l'icône et le titre du MP (en l'alignant verticalement par exemple sur le nom du membre) ?


Ça seront mes derniers souhaits sur l'apparence de mon forum. Je me répète mais tiens réellement à vous remercier pour votre grande disponibilité et l'aide que vous nous apportez.

[Toryudo]

Bonjour !

Et c'est reparti, encore une fois réorganisés par groupe :

• La date/heure actuelle : Template privmsgs_body, {LAST_VISIT_DATE}
  
• Dernière visite : Template privmsgs_body, {CURRENT_TIME}
  
• Historique des messages privés : Template privmsg_topic_review, {L_TOPIC_REVIEW}
  
  
• Les liens pour revenir sur les catégories précédentes : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .topic-actions p (pour les :: ) et .topic-actions a.nav
  
  
• Sauter vers : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .vf_jumpbox label
  
  
• Le nombre de participants : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .poster-count
  
  
• Le page X sur Y : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .pagination
  
  
• Le numéro des pages dans les petits rectangles : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #main-content .pagination span a
  
  
• Le descriptif des icônes : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #privmsgs-menu li et #privmsgs-menu li a
  
  
• Lorsque l'on rentre dans un message : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de h1.page-title
  
  
• Pour le menu plus, on a dit fond foncé (j'ai mis noir, vous pouvez juste changer la valeur de la couleur) :
  

  Code:

  #plus_menu {
  background: #000;
}

  
  
• Et enfin, pour le petit espace dans la liste des MP, on va aller dans le Template privmsgs_body, et modifier la ligne suivante :
  

  Code:

              <a href="{listrow.U_READ}" class="topictitle">{listrow.MSG_UNANSWERED}{listrow.SUBJECT}</a><br />

  Pour mettre à la place :
  

  Code:

              <a href="{listrow.U_READ}" class="topictitle" style="margin: 0 5px">{listrow.MSG_UNANSWERED}{listrow.SUBJECT}</a><br />

Je n'ai rien oublié normalement !

[Chacha]

Bonjour, Attention, cela fait 7 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 8 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.