# Background additions to Graceful theme

**URL:** https://meta.discourse.org/t/background-additions-to-graceful-theme/314567
**Category:** UX
**Tags:** completed, graceful-theme
**Created:** [August 14, 2018, 5:12am UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567 "2018-08-14T05:12:42Z")
**Posts on this page:** 3
**Page:** 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: [August 14, 2018, 5:12am UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567/1 "2018-08-14T05:12:42Z")

</div>

😍

I’d like to share some tweaks that I enjoyed (I’m happy to try submit PR if you think any might be good as default)

## No background option:

Under **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);
    }
    // Default background pattern from 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;
    }

  }

}

```

Theme setting:

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

Example:

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

(Footer is a separate image)

## Allow $header-background color to take effect

Under **desktop.scss:**

Find `.d-header` and change from `$secondary` to `background: rgba($header-background, 0.92);`

Another example  
[https://gph.is/2B8yPif](https://gph.is/2B8yPif)

^I was going to add that I thought I needed `background-repeat: no-repeat;` but it seems no

* * *

### Dots (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)

Background image from: [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"
}

```

* * *

> **If anyone like any of my color schemes :)**
>
> ```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"
> }
> 
> ```
> 
> Inspired for tgc’s next game, Sky, but they all use facebook etc. for their communities 😢
> 
> A bright header can be distracting, use carefully 😊

* * *

**Small issue**  
When you click on a user card, the text can be difficult to see if there’s a user card background:

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

Thank you both awesomerobot and jsthon.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 14, 2018, 2:25pm UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567/2 "2018-08-14T14:25:45Z")

</div>

Thanks for suggesting these changes! I’ve updated the theme to include them.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [July 2, 2024, 7:34am UTC](https://meta.discourse.org/t/background-additions-to-graceful-theme/314567/3 "2024-07-02T07:34:29Z")

</div>