Ändern Sie die Hintergrundfarbe der Kategorie für Boxen

MarcP · 12. September 2022 um 08:49

Ich habe Schwierigkeiten herauszufinden, wie ich die Hintergrundfarbe der Kategorie für Kategorie-Boxen ändern kann:

Das Ziel ist es, die Hauptkategoriefarbe zu übernehmen und dem Hintergrund Transparenz zu verleihen:

Weiß jemand, wie ich das erreichen kann?

Don · 12. September 2022 um 15:45

Hallo,

Das ist mit CSS und ein wenig Template-Anpassung möglich.

Auf dem Desktop hat der Kategorienrand eine Farbvariable, die Sie auch für den Hintergrund verwenden können.

Dies ist die Variable --category-color, die die Randfarbe ist.
Screenshot 2022-09-12 at 17.25.56

Da diese Variable jedoch ein Hex-Wert ist, können Sie keine Transparenz einstellen. Sie können dies jedoch zu einem ::before-Pseudo hinzufügen, bei dem Sie auch die Deckkraft einstellen können.

Ich habe dies als Komponente erstellt, damit Sie sie installieren oder forken und nach Belieben ändern können.

Komponente: GitHub - VaperinaDEV/discourse-category-background-color

Desktop CSS sieht so aus:

github.com/VaperinaDEV/discourse-category-background-color

desktop/desktop.scss

main

@import "category-background-mixin";

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            @include category-before-style;
          }
        }
      }
    }
  }

This file has been truncated. show original

Auf Mobilgeräten fehlt diese Farbvariable im Template, daher müssen Sie diesen Stil hier hinzufügen:

github.com/VaperinaDEV/discourse-category-background-color

javascripts/discourse/templates/mobile/components/parent-category-row.hbs

22c37769c


      
          {{#unless this.isHidden}}
            <PluginOutlet @name="category-list-above-each-category" @args={{hash category=this.category}} />
            <div data-category-id={{this.category.id}} data-notification-level={{this.category.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}} class="category-list-item category {{if this.isMuted "muted"}}">
              <table class="topic-list">
                <tbody>
                  <tr>
                    <th class="main-link">
                      <CategoryTitleLink @category={{this.category}} />
                    </th>
                  </tr>
                  {{#if this.category.description_excerpt}}
                    <tr class="category-description">
                      <td colspan="3">

Danach können Sie die Variable --category-color verwenden und ähnlich wie auf dem Desktop vorgehen:

github.com/VaperinaDEV/discourse-category-background-color

mobile/mobile.scss

main

@import "category-background-mixin";

.categories-list {
  
  // Category Lists
  .category-list {
    .category-list-item.category {
      position: relative;
      z-index: 0;
      &:before {
        @include category-before-style;
      }
    }
  }
  
  // Category Boxes
  .category-boxes-with-topics,
  .category-boxes {
    .category-box {
      position: relative;

This file has been truncated. show original

Desktop

Mobil

MarcP · 12. September 2022 um 15:55

Du bist der/die Beste!

Danke für die Erklärung, ich werde damit eine Weile spielen!

Don · 12. September 2022 um 16:21

Hallo @MarcP, Entschuldigung, ich habe total verpasst, dass du das für Kategorie-Boxen wolltest. Ich habe das Desktop-CSS aktualisiert, damit es auch mit Kategorie-Boxen funktioniert.

MarcP · 12. September 2022 um 16:31

Ah, danke, ich habe bereits herausgefunden, wie ich die Boxen zum Laufen bringe! Das war komplizierter als ich dachte. Sehr geschätzt!

Thema		Antworten	Aufrufe
Inconsistent use of --category-color variable in Default Theme? Support	2	526	11. Oktober 2022
Background color in categories page (Mobile version) Support	7	578	8. Juli 2020
Change Color of Border Boxes on Categories UX	2	735	11. Juli 2020
Adding Transparent Background Image To Categories Support	2	644	30. Oktober 2021
Access category color in SCSS Support pr-welcome	4	707	7. Januar 2022

Ändern Sie die Hintergrundfarbe der Kategorie für Boxen

Verwandte Themen