A graceful theme for Discourse

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.


why this is outside the container for me? :thinking:


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


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.


@awesomerobot Once more a lighting and exacting reply! :+1:

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! :wink:

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!




The theme / theme component install screens are looking a little weird currently …

Discourse version: v2.3.0.beta9 +529


@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?

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 */ 


Works fine! Thank you!

@awesomerobot Hello. This is by far the best theme we have found for our gaming forum, as it allows you to change the background. There are a few minor issues, but overall it’s very neat.

Is it possible to make the background on mobile fixed and also, we would really like to change the default green color to something else. Can we do that?

Also, is there a way to allign the login/register button on mobile? It’s a bit off.



Thanks, glad you like it.

Feel free to post any issues here, I can take a look and fix things up when I have the time.

It should be fixed like desktop, but I’ll take a look this week and fix it if it’s not

I’ll fix this at some point this week too

What you’ll need to do is create a new color scheme from /admin/customize/colors

The easiest thing to do is to click the existing “Graceful” color scheme in the list, then click copy. Give the new color scheme a recognizable name (Graceful blue, for example) and then change the green colors listed to whatever color you want.

Once the new color scheme is created and saved, you can then go to admin/customize/themes, click on Graceful, and select your newly created color scheme from the Color Palette dropdown.


Thank you for your reply! I’m definitely looking forward, as we’re launching our forum next week. It’s just some minor design issues, but mostly the scrolling background on mobile and the theme component install screens mentioned by Chris.

Pushed fixes for these issues, you just need to update the theme.

This is an issue with iOS that has been around for quite some time, not sure if they’ll ever fix it…


@awesomerobot Brilliant! Thank you very much. Just a quick question. We’ve added some components, e.g. Trust Level Avatar Flair, which don’t seem to work properly with the square avatar. Badges are weirdly placed outside the shape. Would it be possible to fix that or maybe revert to the rounded shape?

You can install also the theme component

and add it to the Graceful theme without any configuration. By default the avatar will return to being round


2 more bugs. On mobile, the name appears a bit too far from the avatar. In safe mode, disabling the theme fixed the issue, so I assume it’s not a plugin that’s causing the problem. Disabling all components did not fix it and we haven’t customized the CSS.

One more thing on mobile, images appear cutoff, until you click on them.

If you are using the Avatar size and shape component, can you try to disable it to see if something change?

@Dax Same thing. Already tried disabling all components and plugins. It occurred after the theme update a few days ago. Happened on all my forums that use Graceful.

Also, can we make images responsive? On mobile, apart from names being far from avatars, we can only see one half of the uploaded images.

And last but not least, login and sign up notices appear on the left:

Hi There
Is there any reason why a background image would start scaling to content length on mobile but not on desktop?

It was all working fine but suddenly exhibiting this behaviour, if I refresh the page on my iPad it shows the unscaled version then as the content loads it then scales.
We are hopefully going live on Sat and this is the last thing to do. (until the next round of amends ;0)

It is possible to set the background to ‘cover’ on mobile as per the desktop

This is fixed via

Once you update the theme, the background should behave the same way - on iOS devices - that it does on desktop and Android.

Thanks for reporting the issue @bifterx :+1: