背景コンテナにダークモードの背景色に影響を与えずに特定の色を定義することは可能ですか?
Gracefulテーマ設定から「背景画像とタイリング設定を無効にする」を選択し、このCSSを追加しました。
// Gracefulの背景画像の代わりに背景色を使用
.background-container {
background-color: #FAF0FC;
}
この薄い紫色はデフォルトのカラーパレットでは見栄えが良いですが、ダークパレットでもダークグレーの代わりに表示されてしまい、良くありません。
元のCSSには変数がありますが、ライトまたはダークで異なる色を提供するように使用する方法がわかりません。
background-color: var(--gf-primary-very-low-or-primary-low, #f8f8f8);
重要な詳細ですが、テキスト領域の背景ではなく、メインの背景色のみを変更したいと考えています。そのため、カラーパレットの値を直接使用することはできません(何か見落としている場合は別ですが)。
デフォルト(ライト)モードの背景を変更しようとしていますが、ダークモードのダーク背景はそのままにしたいと考えています。
ライトの背景に無地の色を設定しようとしても、CSSで試したことはすべてダークモードの背景にも同じ色が追加されてしまいます。
そのため、代わりに画像を使用しようとしています。背景画像をデフォルトに設定すると、ライトの背景にはストックのGraceful画像背景が使用されますが、ダークモードにはダーク背景が使用されます。ライトモード専用のカスタム画像を追加できれば素晴らしいのですが、試してみると、ダークモードでも同じ画像が使用されてしまいます。背景画像は明るくライトモードに適しているため、ダークモードが台無しになります。
どなたかこれを解決する方法を教えていただけますでしょうか?
piffy
142
一時的な回避策として、背景色を20〜50%の不透明度にして、明るい背景と暗い背景の両方で背景色を拾うようにします。
「いいね!」 1
@piffy ありがとうございます。これは確かにまともな回避策です。
20%の不透明度で#FAF0FCになるSVGの数値を計算する数学に迷ってしまいましたが、私の目にはこれで十分近く、ダークモードは暗いです。ふう!
// Graceful background imageの代わりに背景色
.background-container {
background: rgb(200 190 192 / 20%);
}
報告ありがとうございます。このアップデートで修正されます。
「いいね!」 1
テーマオプションで「パラメーターを編集」をクリックすると、これを次のように変更できます。
[
{
"setting": "background_image",
"value": "false"
},
{
"setting": "tile_background",
"value": false
},
{
"setting": "no_background_image",
"value": false
}
]
これにより、背景のSVGが削除されます。
「いいね!」 2
このテーマでフォーラムの幅を適切に調整する方法を見つけた人はいますか?
CSSを変更しても効果がないようで、Canapin’s custom width component はデフォルトのテーマでは正常に動作しますが、Graceful では効果がないようです。
デフォルトではフォーラムは非常に狭く、これを変更できると素晴らしいのですが。
Canapin の TC は、このテーマで機能します。
この TC は、--d-max-width および --topic-body-width CSS 変数を設定します。
これらの値を上書きする別の TC やカスタマイズがある可能性があります。
たとえば、手動で試すことができます。
body {
--d-max-width: 1500px;
--topic-body-width: 1500px;
}
デスクトップの幅の問題は解決しましたが、現在3つの問題が発生しています。
- CSSでユーザータイトルの色を変更できません。
以下のようなコードを使用しています。
.user-title{
background: #F55;
border-radius: 3px;
color: #FFF !important;
font-size: 12px!important;
padding-left: 7px;
}
例として、パディングや背景などの変更は正しく適用されますが、テキスト自体の色は無視され、デフォルトの黄色が維持されます。これを変更するには、別の要素を対象にする必要がありますか?デフォルトでは、黄色は白い背景に対して非常に読みにくいです。
-
モバイルでは、フォーラムの幅が画面よりもわずかに広くなっています。デスクトップユーザーの幅の増加を元に戻すことなく、モバイルで最大100%の幅に収まるようにする方法はありますか?
-
上記の@Solariと同じ問題で、モバイルでのカラーバーが表示されません。提案されたCSSコードを試しましたが、問題は解決しないようです。カテゴリのカラーバーをモバイルで復活させる方法を見つけた人はいますか?
「いいね!」 2
テーマに既にユーザータイトルの色に !important タグが付いていることが、問題1の原因のようです。
このテーマのHTML/CSSを編集できない場合、これを変更または上書きする方法はありますか?
danvanmoll
(Dan van Moll)
152
こんにちは!
フォーラムのモバイル版で縦のカラーバーがまだ表示されません。何か見落としていることはありますか?
https://forum.twogeeksonecup.wtf
よろしくお願いします!
ダン
「いいね!」 1
Heliosurge
(Dan DeMontmorency)
153
これらの縦棒がどこにあるかを示す画像を提供していただけますか?
素敵なフォーラムですね。
「いいね!」 1
danvanmoll
(Dan van Moll)
154
ありがとうございます!
こちらには、これらのバーが表示されている別のフォーラムのスクリーンショットを添付しました。
基本的に、デスクトップバージョンに表示されるバーと同じです。
「いいね!」 1
Heliosurge
(Dan DeMontmorency)
155
どういたしまして。
MetaでGracefulテーマを選択して確認していました。モバイルでは、なぜかデスクトップのような色のバーが表示されません。私自身もその理由はよくわかりません。
デスクトップでサイドバーをモバイルビューに切り替えて、インスペクト要素を使用できるはずです。デスクトップモードでも確認して、CSSがどのように異なるかを確認することをお勧めします。必要であれば、モバイルでカスタムコンポーネントを作成し、オーバーライドすることで、色のバーが期待どおりに機能するようにできる可能性があります。
danvanmoll
(Dan van Moll)
156
ありがとうございます。感謝します。他のユーザーがこのスレッドで以前に問題を報告していたので、Graceの将来のアップデート後も有効な、より恒久的な修正を期待していました。
「いいね!」 2
Heliosurge
(Dan DeMontmorency)
157
これを Bug タグと ux および graceful-theme タグを使用して投稿すると、可視性が向上する可能性があります。
あるいは、このテーマコンポーネントは、素敵なカテゴリビューを追加します。これは Air Theme で使用されています。
「いいね!」 1
PatrickH
(Patrick)
159
素晴らしいテーマですね!
(C) 人の名前 のように、背景にテキストを追加することは可能ですか?
毎月、ユーザーからの写真を背景に表示したいです。