Adições de plano de fundo ao tema Graceful

:heart_eyes:

Gostaria de compartilhar algumas personalizações que aprovei (estou feliz em tentar enviar um PR se achar que alguma pode ser boa como padrão)

Opção sem fundo:

Em 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);
    }
    // Padrão de fundo padrão do 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;
    }

  }


}

Configuração do tema:

Exemplo:

(O rodapé é uma imagem separada)

Permitir que a cor $header-background tenha efeito

Em desktop.scss:

Encontre .d-header e altere de $secondary para background: rgba($header-background, 0.92);

Outro exemplo
https://gph.is/2B8yPif

^Eu ia adicionar que pensei que precisava de background-repeat: no-repeat; mas parece que não


Pontos (estilo)

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

Imagem de fundo de: https://www.toptal.com/designers/subtlepatterns/worn-dots/


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


Se alguém gostar de algum dos meus esquemas de cores :)

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

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

Inspirado no próximo jogo do tgc, Sky, mas todos eles usam Facebook etc. para suas comunidades :cry:

Um cabeçalho brilhante pode ser distrativo, use com cuidado :blush:


Pequeno problema
Quando você clica em um cartão de usuário, o texto pode ser difícil de ver se houver um fundo de cartão de usuário:

Obrigado a ambos awesomerobot e jsthon.

20 curtidas

Obrigado por sugerir essas alterações! Atualizei o tema para incluí-las.

13 curtidas