A graceful theme for Discourse

A small issue with github login button!



Has anyone also noticed this issue?

The title spreads to the entire width and looks off.


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


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.

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

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


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?

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

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.

1 Like

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>;

Now I just feel silly lol.


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

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


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

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