Come sovrascrivere una variabile di colore per un solo tema?

[Queth (Q)]

(Scusa, non sono riuscito a trovare dove inserirlo al meglio, ho scelto dev)

Ho 3 temi. In un tema, il calcolo di $primary_low restituisce un colore con troppo poco contrasto rispetto al colore di sfondo. Ho provato a modificare il colore primario (il colore di sfondo non può essere cambiato perché è un colore di branding), ma senza successo. O non offre quasi alcun contrasto, oppure crea un effetto molto “evidenziato”, che è l’opposto di ciò che voglio.

La soluzione (pensavo) sarebbe stata assegnare semplicemente un valore di colore a $primary_low nel CSS di quel tema specifico. Ma non viene applicato. Anche aggiungendo !important non funziona. C’è un modo per modificare questo aspetto solo per un tema? Nota: si tratta di temi locali.

[david (David Taylor)]

Dai un’occhiata alla guida di @awesomerobot qui:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

[Queth (Q)]

Ah, grazie! Purtroppo si tratta di un tema locale e non sarà remoto. C’è un modo per farlo in qualche altro modo?

[david (David Taylor)]

Questa è considerata una funzionalità avanzata, quindi non è disponibile nell’interfaccia utente. Puoi utilizzare il theme cli sui ‘temi locali’.

[Queth (Q)]

Sono contento che si possa fare in qualche modo tutta questa roba di Ruby è comunque ancora troppo avanzata per me, spero davvero che in futuro la sovrascrittura possa essere disponibile anche per i temi locali.

Sto valutando quale opzione sia alla mia portata… Sono un completo principiante su GitHub, quindi creare un tema remoto mi sembra molto spaventoso. (sì, ho letto la guida).

[smrtey]

I temi remoti sono davvero semplici. Non avevo mai usato GitHub prima e non sapevo cosa significasse il file about.json, ma li ho già utilizzati per alcuni temi senza alcun problema. Basta creare un tema locale, caricarlo su GitHub e poi aggiungere contenuti al file about.json su GitHub; in questo modo, quando reinstalli il tema sul tuo sito da GitHub, avrai a disposizione molte opzioni personalizzate e interessanti.

Dovrei avere tempo più tardi oggi per scrivere un post che ti guidi passo dopo passo, e tutto dovrebbe diventare chiaro molto rapidamente.

eta: lol stavo pensando a settings.yml, che è un’altra grande caratteristica dei temi remoti, ma guardando il link di David sopra, about.json è ancora più semplice.

[smrtey]

Ecco le istruzioni eccessivamente dettagliate. Fatemi sapere se non funzionano come previsto.

1. Create un account GitHub se non ne avete già uno.

2. In Discourse, esportate il tema:
   Amministratore → Personalizza → Selezionate il tema che desiderate esportare
   

   
   
   Questo salverà il tema come file .zip sul vostro computer.

3. Estraiete i file sul vostro computer.

4. Andate su GitHub e create un nuovo repository:
   

   
   
   
   

5. Cliccate su “caricare un file esistente”
   

   

6. Trascinate le cartelle e i file scompattati del tema esportato (che assomiglieranno a questo):
   

   
   
   dal vostro computer al repository e cliccate su “Commit Changes”.

7. Ora potete modificare il file about.json. Cliccate sul nome del file
   
   

Il file sarà simile a questo

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. Cliccate sull’icona della matita per modificare.

Ora potete modificarlo. Consiglio di cambiare il nome dello schema dei colori; altrimenti, quando importerete il tema sul vostro sito, vi troverete con due schemi di colori diversi con lo stesso nome. Quindi qui sotto ho cambiato "blue-light": { in "blue-lite": {

Aggiungete semplicemente le vostre sovrascritture delle variabili di colore alla fine dello schema dei colori dopo love e assicuratevi di includere una virgola dopo il valore di love

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. Cliccate su “Commit Changes”

10. Cliccate sul nome del repository per tornare alla pagina principale del repository
    

    

11. Copiate il link di Clone o Download
    

    

12. In Discourse, importate il tema:
    Amministratore → Personalizza → Installa → Da un repository git: Incollate il link e installate
    

    

13. Ora potete modificare questo tema esattamente come fareste con un tema locale, utilizzando i vostri valori personalizzati $primary-high, $primary-medium, $primary-low-mid e $primary-low.

[Queth (Q)]

Grazie mille @smrtey per aver creato questa guida passo dopo passo! Oggi finalmente ho avuto il tempo di sedermi e seguirla. Ha funzionato alla perfezione!
Questi sono stati anche i miei primi passi su GitHub: non avevo mai creato un account o un repository. Quindi, grazie ancora.

Forse questo potrebbe essere incluso nella guida alla creazione del tema? O magari inserito come collegamento?

[smrtey]

Anche le impostazioni personalizzate sono una grande scoperta. Devi aggiungere un file settings.yml al repository GitHub del tuo tema o componente. Ecco un esempio di componente con impostazioni personalizzabili:

GitHub - oerog/CustomSettings

Questo è il file settings.yml che definisce le variabili $header_text, $header_text_color e $header_bg:

header_text: 
  type: bool
  default: false
  description:
    en: 'Seleziona per aggiungere testo nell'intestazione accanto al logo.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Colore del testo (predefinito è "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Colore dello sfondo (predefinito è "header background")'

Questo ti offre le seguenti opzioni di configurazione quando installi il componente:

Che generano questo CSS:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

Puoi installare lo stesso componente più volte (basta rinominarlo dopo l’installazione per facilitarne il tracciamento), così da poterlo aggiungere a temi diversi con impostazioni diverse per ciascuno.

Ecco come creare il file settings.yml. Crea un nuovo file:

Inserisci il codice (lo scrivo in un file di testo e poi lo copio e incolla):

Salvalo con “Commit new file”:

Quindi installa il componente sul tuo sito e modifica le impostazioni.