Greg11
(It Craftsmen Club)
2016 年 7 月 3 日午前 10:52
1
How do you set alternating colors in the list of topics? It helps usability a lot, but it is all white by default.
example:
fefrei
(Felix Freiberger)
2016 年 7 月 3 日午前 11:07
2
You can achieve this with a CSS customization. Here’s an example to get you started:
.topic-list-item:nth-child(even) {
background-color: #EEE;
}
.topic-list-item:nth-child(odd) {
background-color: #FFF;
}
Here’s how this looks on Meta:
And for those who are looking to change the background of topics, here’s the solution:
div.topic-post:nth-child(odd), div.small-action:nth-child(odd) { background-color: #FAFBFF; } div.topic-post:nth-child(even), div.small-action:nth-child(even) { background-color: #F6F6FF; }
Falco
(Falco)
2016 年 8 月 3 日午後 5:54
4
erlend_sh
(Erlend Sogge Heggen)
2018 年 3 月 22 日午前 4:50
5
@fefrei Care to extract this into a super simple theme component?
@Silvanus same for your topic tweak. I was thinking maybe we’d just include it in the “tiger striping component” but commented out by default, but we might as well make it a component of its own as they really are two completely separate pieces of styling.
fefrei
(Felix Freiberger)
2018 年 3 月 22 日午前 8:44
6
Sure!
Can you tell me why I cannot use $primary-low in the theme component? It’s used all over the place in core (e.g. as the background color of buttons), and I think it’s a good color for the darkened rows, but it’s undefined:
Error: Undefined variable: "$primary-low".
on line 2 of theme_field.scss
>> background-color: $primary-low;
----------------------^
Johani
(Joe)
2018 年 3 月 22 日午後 12:45
7
I’ve run into the same problem. What solved it for me was adding this at the top:
@import "common/foundation/variables";
And then you can use those colors.
That’s the short story, the long story is here:
Discourse is incredibly customizable!
The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel
Variables? What variables?
Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor.
Colors
There are many colors available for you to use or override in your them…
Why not stripes? I guess stripes are less… black and white?
fefrei
(Felix Freiberger)
2018 年 3 月 23 日午前 9:28
10
Sorry, I don’t follow. Can you elaborate?
pqMMA
(Chris Palmquist)
2020 年 4 月 15 日午後 10:22
11
トピック詳細ページで返信を交互に表示するには、どのように実装しますか?
fefrei
(Felix Freiberger)
2020 年 5 月 14 日午前 8:39
12
それは少し複雑です。post-stream クラスにも同じ原則を適用してみることができますが、これには返信だけでなく、あなたの投稿の上にある「2年後」のような「ギャップ」も含まれているため、それらもカウントされ、影響を受ける可能性があります。
ライトテーマとダークテーマの使用状況に応じて異なる色で実装する最善の方法は何でしょうか?
Canapin
(Coin-coin le Canapin)
2023 年 2 月 14 日午後 4:22
15
このトピックがあなたの質問に答えるかもしれません :
Continuing the discussion from How to add a specific body class for the dark (or light) mode? :
Is this still the case?
I’d like to add specific CSS for an external widget (a leaflet map) when dealing with a dark theme, is it still not possible to identify using just a CSS selector?
Of course I can just create a Theme Component to apply the changes and assume the admin just adds that to the Dark Scheme, but that won’t switch automatically … (which is the current solution )
機能する少なくとも2つの方法があります。
テーマごとに異なる色を使用する。
行を半透明のミディアムグレーでシェーディングすると、ライトとダークの両方の背景で機能します。たとえば、nth-child(odd) 行に background: #80808040; のような色を付けます。
参考になれば、最初の方法(テーマごとに色を設定する)を示すスタイルシートオーバーライドを公開しました。詳細は、style.css で nth-child を含む部分を確認してください。
Hello!
Last month, my favorite forum switched to Discourse. This was mostly an upgrade, but people complained* about the look and feel. So I decided to fix it, and ended up doing a major style revamp. Now I’m trying to decide if I should put in the effort to turn it into a proper theme and merge it upstream, or if that’s unrealistic.
I think people on other forums might also appreciate it as an alternative theme, but I don’t know how difficult it would be to get things merged. What I did d…
ライトテーマでの表示例を次に示します。
…各テーマには独自の色定義があるため、テーブルの行は各テーマに適合します。