機能
@jsthon さんが 2016 年に共有した テーマ が本当に気に入りました。
。投稿当初から彼らは活動していませんでしたが、私はそれを更新し、拡張し、GitHub に追加しました。
設定
| 名前 |
説明 |
| 背景画像 |
画像の URL を入力 |
| 背景をタイル表示 |
|
| 背景画像なし |
上記の背景画像とタイル表示の設定を無効にします。 |
このテーマには 3 つの設定があります：
- 独自の背景画像を追加するフィールド
- タイル表示するオプション
- 上記の両方のオプションを削除するオプション
タイル表示オプションを無効にすると、画像は background-size: cover に設定され、ブラウザが画像を背景全体に比例して拡大縮小します。例えば：
クレジット
デフォルトの背景パターンは、Toptal Subtle Patterns によるものです。
当方でホストされていますか？ テーマは、Standard、Business、Enterprise プランで利用可能です。
「いいね！」 75
eextra
(Sylwia)
54
このテーマを使っていて、私だけこんな問題を抱えているのでしょうか？Google PageSpeed でテストすると99%のスコアが出るのですが、ページ自体が読み込まれないため、結果が誤解を招くものになっています。
Google がページを読み込めないのはなぜなのでしょうか？
「いいね！」 6
うーん、私も同じ問題を確認しています…どうやらテーマの何かが、Google に提供する Discourse のバージョンと干渉しているようです。調査します。おそらく、上記で報告された印刷ビューを妨害しているのと同じ問題のようです。
「いいね！」 3
neounix
(Dark Matter)
70
@awesomerobot
とても素敵なテーマですね。
デスクトップ版で Graceful をより広くしたいと考えています。以下を試してみました。
#main-outlet {
width: auto;
max-width: 1210px; /* これによりコンテナがロゴ/ヘッダー制御と同じ幅になります */
}
この CSS で全体のコンテナは広がりましたが、下部の推奨トピックはページ全体にきれいに広がっています。しかし、トピック内の投稿全体の幅が（私の広幅版としては）狭すぎます。
インスペクターで多くの要素を試してみましたが、専門家ではないため、トピック/投稿の幅を #main-outlet の幅に一致させることができませんでした。
お手伝いいただけないでしょうか？
ありがとうございます。
また、以下も試しました。
#main-outlet {
width: auto;
max-width: 80%;
}
しかし、投稿の幅をコンテナの幅に一致させることができません。
「いいね！」 1
Steven
71
topic-body には独自の幅設定があります。
デフォルト:
.topic-body {
width: calc(690px + (11px * 2));
}
690px の部分のみを変更し、それ以外はそのままにしてください（トピック投稿のパディングに関連しているため）
「いいね！」 6
neounix
(Dark Matter)
72
ありがとうございます！後で試して、結果を報告します。
昨日は .topic-body を変更してみましたが、@Steven さんの提案に基づいて再度試してみます。
「いいね！」 1
neounix
(Dark Matter)
73
こんにちは @Steven さん、
デスクトップ用 CSS に以下を追加しました。
#main-outlet {
width: auto;
max-width: 80%;
}
.topic-body {
width: calc(1020px + (11px * 2));
}
部分的に機能しましたが、いくつか問題があります。これを修正する CSS のテクニックをご存知でしょうか？
画像をご覧ください:
「いいね！」 1
Steven
74
パソコンの前にいませんが、timeline-container クラスで margin-left を修正する必要があることは知っています。
「いいね！」 1
はい、タイムラインについては、.timeline-container でオーバーライドする必要がある margin-left がいくつかあります（3 つのブレークポイント）：
「いいね！」 4
neounix
(Dark Matter)
76
こんにちは @awesomerobot
クリス、
私たちが望んでいた「広い見た目」を実現する方法は、少し「優雅さ」を犠牲にして、.timeline-container を非表示にすることでした。
#main-outlet {
width: auto;
max-width: 70%;
}
.topic-body {
width: 100%;
}
.timeline-container .topic-timeline {
display: none;
}
あまり「優雅」ではありませんが、少なくとも大きなコードブロックでは「まあまあ」動作しており、大画面の開発者にとって読みやすくなっています。
.timeline-container を表示できると良いのですが、提案されたようにクラスを上書きしても動作しませんでした。おそらく私の CSS スキルがまだ未熟なためでしょう。
この素晴らしいテーマとご支援に感謝いたします。
「いいね！」 1
Solari
80
このテーマ、とても気に入っています。共有してくださり、ありがとうございます！
モバイルビューでは、カテゴリの色付きバーが消えてしまうことに気づきました。これは意図的なものでしょうか？もしそうなら、元に戻す方法はありますか？
また、カテゴリに背景が設定されている場合、その背景をオフにする方法はありますか？一見問題なさそうですが、長い投稿をスクロールすると画面がカクつき、テーマの背景が一瞬見えてしまいます。
よろしくお願いいたします。
レイ
「いいね！」 1
Solari
81
モバイル用の CSS を調べてみると、その部分が除外されていることがわかりました。「left-border」の部分をコメントアウトすると、色付きの境界線が復活しました：
.category-list-item {
// border-left: none;
border-top: 2px solid;
.category-name {
font-weight: normal;
}
}
ただし、テーマが更新されるたびにこの変更が上書きされてしまうことは理解しています。そのような場合、変更を保持するための最良の方法は何でしょうか？
カスタムテーマコンポーネントを持っており、そこにはカスタム CSS の変更をまとめています。モバイル CSS の部分には以下のような記述があります：
.category-list-item {
border-left: 4px !important;
}
しかし、これでは特定のカテゴリの色は表示されず、白いバーだけが表示されてしまいます。正しいカテゴリの色を表示するにはどうすればよいでしょうか？カテゴリの色に関連する変数と何か関係があることはわかっていますが、その参照先を見つけられずにいます。
CSS については初心者なので、何か間違ったことをしている可能性もあります。
よろしくお願いいたします、
レイ
「いいね！」 2
IAmGav
(Gavin Perch)
91
ヘッダーの色に問題があります。
ヘッダーの背景色とヘッダーのテキストを変更しましたが、設定が反映されていません。
アイコンが灰色のままです。
dax
(Daniela)
92
これはデフォルトの動作です。色は純粋な色ではなく、#ffffff の「低中」変数であるためです。
この色を上書きするには、こちらをご覧ください: How to Change Header Icon Color? - #2 by awesomerobot
「いいね！」 3
Jack51
(Jack)
100
本当に素晴らしいテーマだと称賛したくて投稿しました。その洗練された見た目が大好きです。
「いいね！」 2
Solari
101
同意します！Discourseのテーマの中でも最も見た目が美しいものの一つですね。
レイ
「いいね！」 1
oshyan
(Oshyan Greene)
102
どうも私がおかしいのか、テーマコンポーネントで CSS を調整してロゴのサイズを変えられないのです。ヘッダー全体の高さは変更できるのに、ロゴだけは頑なに変わらないのです。この CSS が、私が試みた変更をすべて無効にしているようです：
.d-header #site-logo {
max-height: 35px !important;
}
Chrome のインスペクタによると、これは desktop-scss-graceful.scss から来ているようです。
デフォルトのテーマではロゴサイズの変更は問題なく機能しますし、前述の通り Graceful でもヘッダーの高さ変更は可能ですが、ロゴだけはダメなのです…
「いいね！」 2
はい、!important は !important を含まない他の CSS を上書きします。なぜそれが含まれているのかは覚えていませんが、削除を検討すべきでしょう。ご自身の CSS に important を含めると動作しますか？
.d-header #site-logo {
max-height: 50px !important; // <-- ここにカスタムの高さを指定
}
「いいね！」 3
oshyan
(Oshyan Greene)
104
迅速な返信ありがとうございます！実は !important にも気づいていて、自分の方にも追加してみたのですが、効果はありませんでした。奇妙なことに、今試してみると、その変更を保存してリフレッシュすると、一瞬だけ正しいサイズが表示され、その後また小さくなってしまいます。そしてインスペクターを見ると、正しい動作をしているように見えます：
少なくとも 35px が無効になっているという意味ではそうです。しかし、少なくとも順序がおかしいようです。いずれにせよ、まだ動作していません。不思議ですね。
参考までに、これは Common CSS に記述しています。
更新：解決しました！問題は header.scss 内の以下の部分でした：
.d-header #site-logo {
height: 2.667em;
}
そして、自分の側で !important を付けて height: を追加すると、動作します！
oshyan
(Oshyan Greene)
105
OK、次の質問です。これはおそらくこのテーマ固有のものだと思います。私はこれをベースに、一種の個人用「ブログ」（実際には「デジタルガーデン」ですが、これはあまり知られていない用語です）を作成しています。ほぼすべての投稿が私によって書かれるため、特定の著者関連の視覚要素、特にアバターを目立たなくするか、削除したいと考えています。特に、フロントページやカテゴリのトピックリストにおいてです。赤枠で囲んだ部分が、可能であれば非表示にしたい部分です：
理由はお分かりいただけるかと思います。
私が試したこと：
また、トピック内の最初の画像をサムネイルとして表示するための様々なコンポーネントについても調査・実験中です。もし、これらのアバターをトピック内の最初の画像の小さなサムネイルに置き換えられるなら、それも素晴らしいのですが。とりあえず非表示にすることから始めましょう。
ご協力ありがとうございます！
）