A Graceful theme for Discourse

[awesomerobot (Kris)]

	Summary	Graceful - A graceful theme for Discourse
	Preview	Preview on theme-creator.discourse.org
	Repository Link	https://github.com/discourse/graceful
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme

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.

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.

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

[awesomerobot (Kris)]

Where/how are you editing it? I’m assuming you’re editing the theme directly?

If you’re editing the theme and adding it to common it won’t work, because it’s defined in desktop (and you’d need to add it to the end of desktop). The C in CSS stands for Cascade, so you need to be sure that you’re making changes to .d-header after where it exists in the theme.

I highly recommend creating a new theme component, adding your custom CSS there, and then add the component to the theme (rather than editing the theme directly). It would avoid this problem, and ensure your edits aren’t overwritten when the theme is updated.

[agemo]

This is a very inspiring theme. I like it a lot. Many elements are highly adaptable within other themes.

One thing I’m trying to replicate, is how the page load/transition has been handled.

I need to remove the white flash, that is in the standard theme - it goes completely unnoticed due to white being universal colour.

In graceful however the background is viewable as if that white transition is transparent. Is this how it was achieved and if so what part of the CSS is controlling this behaviour?.

[awesomerobot (Kris)]

Here’s the CSS for how the background is applied in this theme, I think this is what you’re looking for?

body {
    background-color: #f8f8f8;
    background-image: url(https://community.example.com/example.jpg);
    background-attachment: fixed;
    background-size: auto;
}

By default in Discourse the background color is applied to the HTML tag, so this just covers that up entirely.

[agemo]

@awesomerobot Once more a lighting and exacting reply!

This has me sorted for now, so again much thanks.

It more than just feels like this theme has it’s own rapid repose unit!

It’s inspiring themes and the work that goes into them, helps newbies like me wrap our semi-baked noodles around such fine cloth, by finding some direction and then pitching the right and wrong questions as we go on our journey forth!

[Jugger]

@awesomerobot I can’t seem to figure out the right way to make the container a bit wider (as wide as the default discourse theme) https://i.imgur.com/G4EebE1.png

Any suggestions?

[awesomerobot (Kris)]

You’ll want to add some CSS to edit the max-width of the #main-outlet div… that would look something like this

#main-outlet {
  width: auto;
  max-width: 1010px; /* This makes the container as wide as the logo/header controls */ 
}

[Jugger]

Works fine! Thank you!

[eextra (Sylwia)]

Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.

What is it because google can’t see - it doesn’t load this page?