# Ajouts de fond au thème Graceful

**URL:** <https://meta.discourse.org/t/background-additions-to-graceful-theme/314567>\
**Category:** UX\
**Tags:** completed, graceful-theme\
**Created:** [Août 14, 2018, 5:12 UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567 "2018-08-14T05:12:42Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![tmoko](https://avatars.discourse-cdn.com/v4/letter/t/da6949/32.png) [@tmoko](https://meta.discourse.org/u/tmoko)\
**Post date:** [Août 14, 2018, 5:12 UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567/1 "2018-08-14T05:12:42Z")

</div>

😍

Je souhaiterais partager quelques ajustements que j’ai appréciés (je suis heureux de proposer une PR si vous pensez que l’un d’eux pourrait être utile par défaut)

## Option sans arrière-plan :

Sous **common.scss** :

```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);
    }
    // Motif d'arrière-plan par défaut de 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;
    }

  }

}

```

Paramètre du thème :

 ![no_background%20theme%20setting](https://global.discourse-cdn.com/meta/original/3X/7/f/7f2a49fd632d21442bc9ab726e4769e85bed9aaa.png)

Exemple :

 ![cape-theme](https://global.discourse-cdn.com/meta/original/3X/f/d/fd89db32123287dcfa4ee49f0695f02cbb9bce18.png)

(Pied de page est une image séparée)

## Permettre à la couleur $header-background de prendre effet

Sous **desktop.scss** :

Trouvez `.d-header` et changez `$secondary` en `background: rgba($header-background, 0.92);`

Un autre exemple  
[https://gph.is/2B8yPif](https://gph.is/2B8yPif)

^J’allais ajouter que je pensais avoir besoin de `background-repeat: no-repeat;` mais il semble que non

* * *

### Points (style)

[https://theme-creator.discourse.org/theme/tmoko/graceful-dots](https://theme-creator.discourse.org/theme/tmoko/graceful-dots)

 ![dots-screenshot-theme](https://global.discourse-cdn.com/meta/original/3X/4/5/4508aeec0bc99aca4f3fec61d1cb95bcc49d75bd.png)

Image d’arrière-plan de : [https://www.toptal.com/designers/subtlepatterns/worn-dots/](https://www.toptal.com/designers/subtlepatterns/worn-dots/)

```json

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

```

* * *

> **Si quelqu'un aime l'un de mes schémas de couleurs :)**
>
> ```json
> 
> "Capes": {
> "primary": "222222",
> "secondary": "ffffff",
> "tertiary": "ffc500",
> "quaternary": "79d3f4",
> "header_background": "f75200",
> "header_primary": "ffffff",
> "highlight": "ffc500",
> "danger": "f75200",
> "success": "76b242",
> "love": "fa6c8d"
> },
> 
> "Sky": {
> "primary": "222222",
> "secondary": "ffffff",
> "tertiary": "4077aa",
> "quaternary": "79d3f4",
> "header_background": "213a5a",
> "header_primary": "ffffff",
> "highlight": "ffc500",
> "danger": "f75200",
> "success": "76b242",
> "love": "fa6c8d"
> }
> 
> ```
> 
> Inspiré par le prochain jeu de tgc, Sky, mais ils utilisent tous Facebook, etc. pour leurs communautés 😢
> 
> Un en-tête lumineux peut être distrayant, utilisez-le avec précaution 😊

* * *

**Petit problème**  
Lorsque vous cliquez sur une carte d’utilisateur, le texte peut être difficile à voir s’il y a un arrière-plan de carte d’utilisateur :

 ![user-card-bg-graceful](https://global.discourse-cdn.com/meta/original/3X/4/6/468dd8b2930bee570f6cf3c839ae9489348a947e.png)

Merci à tous les deux, awesomerobot et jsthon.

---

_[View the full topic](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567)._