A graceful theme for Discourse

theme-full

(Kris) #1

I really liked the theme shared way back in 2016 by @jsthon :heart_eyes:. They haven’t been around since it was initially posted, so I’ve updated it, expanded it, and added it to github.

:microscope: Preview it on the theme creator

:link: Github repo link: https://github.com/awesomerobot/graceful

:man_shrugging: How do I install a theme?

This theme has two settings:

  • A field to add your own background image
  • and the option to tile it

If you disable the tile option, the image will be set to background-size: cover, and your browser will scale your image to proportionately cover the full background. For example:

Credit for the default background pattern included goes to Toptal Subtle Patterns.


Babble - A Chat Plugin
A graceful style for Discourse
(Sam Saffron) #2

3 posts were split to a new topic: How do I create dynamic pages on my site


#4

: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

^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: Worn Dots - Subtle Patterns | Free textures for your next web project


"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.


(Kris) #5

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


(MinkyTung) #9

Wow :slight_smile: :slight_smile: :slight_smile:


(Stephen) #10