Cambia il colore dello sfondo della categoria per le caselle

Don · 12 Settembre 2022, 3:45pm

Ciao,

Questo è possibile con css e una piccola modifica al template.

Su desktop, il bordo delle categorie ha una variabile di colore che puoi usare anche per lo sfondo.

Questa è la variabile --category-color che è il colore del bordo.
Screenshot 2022-09-12 at 17.25.56

Ma poiché questa variabile è un valore esadecimale non puoi renderla trasparente. Tuttavia, puoi aggiungerla a uno pseudo ::before dove puoi anche impostare l’opacità.

L’ho reso un componente in modo che tu possa installarlo o fare un fork e modificare ciò che desideri.

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

Il CSS desktop appare così:

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

Su mobile questa variabile di colore manca dal template, quindi devi aggiungere questo stile qui:

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">

Dopo questo puoi usare la variabile --category-color e fare qualcosa di simile a quanto fatto su desktop:

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

Mobile

Argomento		Risposte	Visualizzazioni
Inconsistent use of --category-color variable in Default Theme? Support	2	531	Ottobre 11, 2022
Background color in categories page (Mobile version) Support	7	580	Luglio 8, 2020
Change Color of Border Boxes on Categories UX	2	736	Luglio 11, 2020
Adding Transparent Background Image To Categories Support	2	654	Ottobre 30, 2021
Access category color in SCSS Support pr-welcome	4	709	Gennaio 7, 2022

Cambia il colore dello sfondo della categoria per le caselle

Argomenti correlati