Background additions to Graceful theme

:heart_eyes:

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:

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:

Example:

(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

^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

Background image from: https://www.toptal.com/designers/subtlepatterns/worn-dots/


"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 :)

"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 :cry:

A bright header can be distracting, use carefully :blush:


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

Thank you both awesomerobot and jsthon.

20 Likes

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

13 Likes