バナー付きカテゴリ一覧

[manuel (Manuel Kostka)]

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:

You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example you could color-code your categories:

Or add background images:

This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.

Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?

	Repository	GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists.
	Install Guide	How to install a theme or theme component

[tot (Борис Мальцев)]

Thank Nolo Very cool! Your component has improved our community

[tot (Борис Мальцев)]

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

[manuel (Manuel Kostka)]

That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.

If you actually don’t want a background color, you should state none or transparent.

If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in

Update themes and plugins to support automatic dark mode

Previously, all colors in Discourse were stored as SCSS variables. To support automatic dark mode color scheme switching, we have converted these colors in core to custom CSS properties. You can easily see the full list in the inspector now: [image] Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. In most cases, this is a simple find and replace task: - background-color: $primary-very-low; + background-color: var…

[tot (Борис Мальцев)]

Nolo, thanks, that helped!

[godgutten]

こんにちは。あなたが作り上げたものを見るのが大好きです。しかし、私の作品を盗むだけでなく、私にも功績を認めることは許されていますか…

[manuel (Manuel Kostka)]

コンポーネントを気に入っていただけて嬉しいです！ただ、あなたの作品を盗用したと非難する理由がよくわからないのですが…？

このコンポーネントの作成は、こちらのトピックに触発されました。

Creating a nicer layout

Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? [Screenshot] just a basic HTML/CSS edit or do I need to use a plugin?

OP（元の投稿者）にあなたのソリューションを紹介しましたが、その後、テンプレートをハードコーディングせずに、SCSS内の設定リストから値を取り出して解決する方法に興味を持ちました。そのため、コンポーネントコードは基本的にこのソリューションに関するものです。
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

いずれにしても、もし私の作品の一部を使用したと感じており、クレジットを記載し忘れている場合は、お知らせください。最初の投稿を更新します

[godgutten]

@manuel

しかし、いずれにしても、私の仕事の一部を使用したと感じており、クレジットを記載し忘れている場合は、お知らせください。最初の投稿を更新します

はい、ぜひ何らかのクレジットをいただけると嬉しいです。しかし、それはあなた次第です。それ以外はうまくいっており、新しいユーザーにとってより簡単になるため、このテーマコンポーネントを投稿で推奨するつもりです。

How do I add category banners?

So now I have got it fixed for my self at least [4d34f94999cfa96f6578d9b3d6d33707] So first of all download this file discourse-misc-html-css (2).zip (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem > .category-list { &:before { content: 'FiveM'; } background-image…

[Cozdabuch (cosmo)]

@ Nolo
TCで、またはテーマのCSSで、見出しテキストを左揃えにする方法はありますか（あなたの2番目の例のように）。

また、バナー画像を使用しない場合、ヘッダーをテキスト1行分の厚さにリサイズする方法はありますか。
もしあれば、テキストをそれほど大きくないサイズにリサイズすることはできますか。

[manuel (Manuel Kostka)]

はい、承知いたしました。これらのクラスを使用してバナーをスタイル設定できます。

@manuel

スタイルを追加するには、一般的なクラス、およびカテゴリIDごとの特定のバナーを選択できます。

.category list .category-list-banner {
  &.category-5 { [特定のバナーをスタイル設定] }
  &:after { [見出しをスタイル設定]}
}

一般的なクラスの既存の宣言を上書きしたい場合は、!important プロパティを使用する必要があります。たとえば、言及されたスタイルについては次のようになります。

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

これは、スタイルが実際には特定のバナーで宣言されているためです。コンポーネントで改善できるかもしれませんが、現時点では important を使用して上書きする必要があります。

[lisandro_iaffar]

このコンポーネントをありがとうございます!! 政治フォーラムを開発しており、このような分離を適用できることは非常に重要です。
すでにフォーラムにとって大きな改善ですが、ヘッダーがURLで参照できるようになれば、世界が変わるでしょう。なぜなら、それによりフォーラムのトップにボタンを作成でき、ユーザーは同じページ内で簡単に移動できるようになるからです。フォーラムが（うまくいけば）非常に大きくなった場合、これは非常に機敏な機能となるでしょう。現在可能ですか？

[manuel (Manuel Kostka)]

@lisandro_iaffar さん、提案ありがとうございます。このコンポーネントは、HTMLテンプレートを変更しない軽量なソリューションを提供するだけです。セクションを参照したい場合は、GitHub - discourse/discourse-minimal-category-boxes で提供されているようなアプローチを使用する必要があります。

[lisandro_iaffar]

お返事ありがとうございます。また、ご指導いただきありがとうございます
そして、このコンポーネントにもう一度感謝します。フォーラムのレイアウトがとても良くなりました

[cogdog (Alan Levine)]

カテゴリをいくつか作りすぎたので、グループに整理できるのは大変助かります。

試してみればわかりますが、これは古い、あまり使われていないカテゴリをフロントページから外す方法にもなり得ますよね？新しいサイドバーからアクセスできるようになります。

[manuel (Manuel Kostka)]

はい、もちろんです 実際、私はほとんどの場合、サイドバー、ヘッダー、ナビバー、カテゴリページなどのさまざまなページ要素でカテゴリを選択します。それはウェブサイトのサイト構造のようなものです。よく整理されていることは重要ですが、UIの表示方法を決定する必要はありません。

[Tiago_santos]

こんにちは、@manuelさん。この素晴らしいコンポーネントがスピーチのアップデート後も引き続き機能するかどうか知りたいです。インストールしましたが、動作しません。よろしくお願いします。

[duncanell]

背景画像を追加するにはどうすればよいですか？

[Arkshine]

こんにちは、ようこそ

テーマまたは個別のテーマコンポーネントにCSSを追加できます。

@manuel

スタイルを追加するには、一般的なクラス、およびカテゴリIDごとの特定のバナーを選択できます。

.category list .category-list-banner {
  &.category-5 { [特定のバナーをスタイル設定] }
  &:after { [見出しをスタイル設定]}
}

たとえば、カテゴリID 4に画像を追加したいと仮定すると、次のようなことを行います。

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

これは単なる例です。詳細については、background CSSプロパティを参照してください。

役立つリンクも :

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …