Thème Élégant

Est-il possible de définir une couleur spécifique pour le conteneur d’arrière-plan sans affecter la couleur d’arrière-plan du mode sombre ?

Nous avons sélectionné Désactiver l'image d'arrière-plan et les paramètres de répétition ci-dessus dans les paramètres du thème Graceful et avons ajouté ce CSS :

// Couleur d'arrière-plan au lieu de l'image d'arrière-plan Graceful
.background-container {
  background-color: #FAF0FC;
}

Ce violet clair est superbe dans la palette de couleurs par défaut, mais il apparaît également dans le mode sombre au lieu du gris foncé, ce qui n’est pas idéal.

Le CSS d’origine mentionne une variable, mais je ne sais pas comment l’utiliser de manière à fournir des couleurs différentes pour le mode clair ou sombre :

background-color: var(--gf-primary-very-low-or-primary-low, #f8f8f8);

Détail important, nous voulons seulement changer la couleur de l’arrière-plan principal, pas l’arrière-plan des zones avec du texte. C’est pourquoi nous ne pouvons pas utiliser directement les valeurs de la palette de couleurs (sauf si j’ai manqué quelque chose).

J’essaie toujours de changer l’arrière-plan pour le mode par défaut (clair) tout en conservant l’arrière-plan sombre pour le mode sombre.

Même si nous voulons une couleur unie pour l’arrière-plan clair, tout ce que nous avons essayé avec CSS ajoute la même couleur à l’arrière-plan en mode sombre.

C’est pourquoi nous essayons avec une image à la place. Lorsque l’image d’arrière-plan est définie sur défaut, l’image d’arrière-plan Graceful par défaut est utilisée pour le mode clair, mais pour le mode sombre, il y a un arrière-plan sombre. Ce serait formidable si nous pouvions ajouter une image personnalisée qui ne serait utilisée qu’en mode clair également, mais lorsque nous essayons, la même image est utilisée en mode sombre. Parce que l’image d’arrière-plan est lumineuse et convient au mode clair, elle ruine le mode sombre.

Quelqu’un peut-il m’aider à comprendre cela, s’il vous plaît ?

Une solution de contournement rapide et temporaire consiste à utiliser un arrière-plan avec une opacité de 20 à 50 % afin qu’il reprenne la couleur d’arrière-plan sur le clair et le foncé.

1 « J'aime »

@piffy Merci beaucoup. C’est en effet un bon contournement.

Je me suis perdu dans les calculs d’un nombre SVG qui, avec une opacité de 20 %, donnerait #FAF0FC, mais cela s’en rapproche suffisamment à mes yeux, et le mode sombre est sombre. Ouf !

// Couleur d'arrière-plan au lieu d'une image d'arrière-plan Graceful
.background-container {
  background: rgb(200 190 192 / 20%);
}

Merci de l’avoir signalé, cette mise à jour le corrigera

1 « J'aime »

Dans l’option de thème, si vous cliquez sur « modifier les paramètres »
Vous pouvez changer le json pour ceci :

[
	{
		"setting": "background_image",
		"value": "false"
	},
	{
		"setting": "tile_background",
		"value": false
	},
	{
		"setting": "no_background_image",
		"value": false
	}
]

Et cela supprime le svg d’arrière-plan

2 « J'aime »

Quelqu’un a-t-il trouvé un moyen d’ajuster correctement la largeur du forum avec ce thème ?

Mes modifications CSS ne semblent avoir aucun effet, et le composant de largeur personnalisée de Canapin fonctionne bien sur le thème par défaut mais semble n’avoir aucun effet sur Graceful.

Par défaut, le forum est très étroit et il serait formidable de pouvoir changer cela.

Le TC de Canapin fonctionne pour moi sur ce thème.
Ce TC définit les variables CSS --d-max-width et --topic-body-width.
Vous avez peut-être un autre TC ou des personnalisations qui écrasent ces valeurs.

Vous pouvez essayer manuellement, par exemple :

body {
    --d-max-width: 1500px;
    --topic-body-width: 1500px;
}

Cela a fonctionné, merci !

Le problème de largeur est résolu pour le bureau, bien que je rencontre maintenant trois problèmes :

  1. Je n’arrive pas à changer la couleur des titres d’utilisateur avec CSS.

en utilisant :

.user-title{
background: #F55;
border-radius: 3px;
color: #FFF !important;
font-size: 12px!important;
padding-left: 7px;
}

comme exemple, le changement de rembourrage, d’arrière-plan, etc. sont appliqués correctement, mais la couleur du texte elle-même est ignorée et reste le jaune par défaut. Y a-t-il une chose différente que je devrais aborder pour changer cela ? Le jaune est extrêmement difficile à lire sur un fond blanc par défaut.

  1. Sur mobile, la largeur du forum est maintenant légèrement supérieure à ce que l’écran devrait être. Y a-t-il un moyen de faire en sorte qu’il reste à une largeur maximale de 100 % sur mobile et qu’il ne dépasse pas, mais sans annuler l’augmentation de largeur pour les utilisateurs de bureau ?

  2. Je rencontre le même problème que @Solari ci-dessus, à savoir que les barres de couleur sur mobile ne sont pas présentes. J’ai essayé d’utiliser le code CSS suggéré en réponse, mais cela n’a pas semblé résoudre le problème. Quelqu’un a-t-il trouvé comment rétablir les barres de couleur de catégorie sur mobile ?

2 « J'aime »

Il semble que la raison du problème 1 soit que le thème possède déjà une balise !important sur la couleur du titre utilisateur

Étant donné que nous ne pouvons pas modifier le HTML/CSS de ce thème, existe-t-il un moyen de le changer ou de le remplacer ?

Bonjour !

Les barres de couleur verticales n’apparaissent toujours pas sur la version mobile de mon forum. Est-ce que j’oublie quelque chose ?

https://forum.twogeeksonecup.wtf

Merci !
Dan

1 « J'aime »

Pouvez-vous fournir une image détaillant où se trouveraient ces barres verticales ?

Beau forum au passage

1 « J'aime »

Merci !

J’ai joint une capture d’écran d’un autre forum qui a effectivement ces barres.

Essentiellement les mêmes barres que celles qui s’affichent sur la version de bureau.

1 « J'aime »

De rien.

Ok, je regardais ici sur Meta avec le thème Graceful sélectionné. Sur mobile, pour une raison quelconque, il n’y a pas de barres colorées comme sur le bureau. Je ne sais pas pourquoi moi-même.

Cependant, sur le bureau, dans la barre latérale, passez en vue mobile et vous devriez pouvoir utiliser l’inspecteur d’éléments. Je vérifierais également en mode bureau et verrais comment le CSS diffère. Si nécessaire, je pourrais probablement créer un composant personnalisé avec des remplacements en Mobile pour que les barres colorées fonctionnent comme prévu.

Merci ! J’apprécie. Comme d’autres utilisateurs avaient déjà signalé le problème plus tôt dans ce fil de discussion, j’espérais une solution plus permanente qui tiendrait même après les futures mises à jour de Grace.

2 « J'aime »

La plupart des ghr seraient une idée de publier ceci comme un Bug en utilisant les balises ux et graceful-theme.
Cela pourrait aider à la visibilité.
Alternativement, ce composant de thème ajoute une belle vue de catégorie. Il est utilisé dans le thème Air.

1 « J'aime »

Merci !! Je vais certainement regarder !

1 « J'aime »

Super thème !
Est-il possible d’ajouter un texte en arrière-plan comme (C) Nom Personne
Je souhaite avoir chaque mois une photo d’un utilisateur en arrière-plan