Aggiunte di sfondo al tema Graceful

:heart_eyes:

Vorrei condividere alcune modifiche che mi sono piaciute (sono felice di provare a inviare una PR se pensi che alcune possano essere utili come impostazioni predefinite)

Opzione senza sfondo:

In common.scss:

body {
  background-color: $primary-very-low;

  @if $no-background == "false" {

    @if $background-image != "default"  {
      background-image: url($background-image);
   } @else {
      background-image: url($default-background);
    }
    // Pattern di sfondo predefinito da Toptal Subtle Patterns
    // ♡ https://www.toptal.com/designers/subtlepatterns/japanese-sayagata/

    background-attachment: fixed;
    @if $tile-background == "true" {
      background-size: auto;
    } @else {
      background-size: cover;
      background-repeat: no-repeat;
    }

  }


}

Impostazione del tema:

Esempio:

(Il piè di pagina è un’immagine separata)

Consentire che il colore $header-background abbia effetto

In desktop.scss:

Trova .d-header e modifica da $secondary a background: rgba($header-background, 0.92);

Un altro esempio
https://gph.is/2B8yPif

^Stavo per aggiungere che pensavo fosse necessario background-repeat: no-repeat;, ma sembra di no


Puntini (stile)

https://theme-creator.discourse.org/theme/tmoko/graceful-dots

Immagine di sfondo da: https://www.toptal.com/designers/subtlepatterns/worn-dots/


"Puntini": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "888eaf",
  "quaternary": "d393a7",
  "header_background": "ffffff",
  "header_primary": "333333",
  "highlight": "d4efd8",
  "danger": "f8745c",
  "success": "41e254",
  "love": "fa6c8d"
}


Se a qualcuno piacciono le mie combinazioni di colori :)

"Cape": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "ffc500",
  "quaternary": "79d3f4",
  "header_background": "f75200",
  "header_primary": "ffffff",
  "highlight": "ffc500",
  "danger": "f75200",
  "success": "76b242",
  "love": "fa6c8d"
},

"Cielo": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "4077aa",
  "quaternary": "79d3f4",
  "header_background": "213a5a",
  "header_primary": "ffffff",
  "highlight": "ffc500",
  "danger": "f75200",
  "success": "76b242",
  "love": "fa6c8d"
}

Ispirato al prossimo gioco di tgc, Sky, ma usano tutti Facebook ecc. per le loro comunità :cry:

Un’intestazione luminosa può distrarre, usala con cautela :blush:


Piccolo problema
Quando fai clic su una scheda utente, il testo può essere difficile da leggere se c’è uno sfondo per la scheda utente:

Grazie a entrambi, awesomerobot e jsthon.

20 Mi Piace

Grazie per aver suggerito queste modifiche! Ho aggiornato il tema per includerle.

13 Mi Piace