A graceful theme for Discourse

[awesomerobot (Kris)]

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

Preview it on the theme creator

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

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.

[tmoko]

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: Worn Dots Texture - Free Subtle Patterns | Toptal

"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

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:

Thank you both awesomerobot and jsthon.

[awesomerobot (Kris)]

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

[minkytung]

Wow

[Stephen]

Graceful theme - topic progress indicator anchors on top of reply button

iOS12/Discourse App/ here on meta: [image] After the last post where the topic progress indicator is meant to anchor below the last post it actually sits on top of the reply button.

[itsbhanusharma (Bhanu Sharma)]

A small issue with github login button!

[masterakay (Aekansh Dixit)]

Has anyone also noticed this issue?

The title spreads to the entire width and looks off.

[awesomerobot (Kris)]

If you update the theme the title issue should be fixed now.

[masterakay (Aekansh Dixit)]

Yes. This is fixed. Thanks a lot for the quick action! Awesome work on this theme. Just one last thing, can the size of the container be made a little more wider because most of our users are seeing pretty thin containers.

[Jansither (Heather)]

Silly question, how would I go about making the profile icons display larger on topic view?

For example, this forum has larger icons: https://community.landoflouloudia.com/t/accessing-louloudias-chat/126

[Dax (Daniela)]

how would I go about making the profile icons display larger on topic view?

There is another theme component for that, Avatar size and shape

[LlamaSensei]

We’ve been modifying the CSS from this theme a bit, & we’re trying to identify how to increase the banner at the top of the screen. Any tips on how to do this?

[Stephen]

Can you show us a mock-up of how you want to change it?

[LlamaSensei]

So currently this is how the banner at the top of the site looks:

We’re just trying to increase the height to something like this:

So far we’ve only been able to increase the logo image size. No success with the banner.

[Dax (Daniela)]

It’s the header, not a banner. You can take a look to this component Big Header - Little Header, however the CSS target is

.d-header {
    height: <value>;
}

[LlamaSensei]

Now I just feel silly lol.

Thanks!

[1world279]

@Dax, I’m on the same team with @LlamaSensei. What we really want to do is the increase the navbar height. I did not find the relevant code in CSS. Should we add a code to achieve this?

[awesomerobot (Kris)]

Are you talking about this bar at the top of the site? (if not please provide a screenshot)

That’s .d-header as shown in the example CSS above

[1world279]

Yes that one and I tried the editing the height in .d-header but it didn’t* work.