Graceful Theme

:discourse2: Summary Graceful - A graceful theme for Discourse
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/graceful
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Features

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.

Settings

Name Description
background image Enter image url
tile background
no background image Disable the background image and tiling settings above.

This theme has three settings:

  • A field to add your own background image
  • An option to tile it
  • And an option to remove both of the above options

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:

Credits

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


:discourse2: Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-17T11:28:20Z

Check documentPerform check on document:
74 Likes

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?

6 Likes

Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.

3 Likes

@awesomerobot

Very nice theme.

I’m trying to make Graceful much wider on desktop. Tried this:

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

and this CSS made the overall container wider; and the suggested topics at the bottom span the page nicely but the overall width of the posts in the topics are too narrow (for my wide version).

Tried inspector, and a number of elements but not being a expert, could not get the width of the topics / posts to match the width of #main-outlet .

Do you mind to help me out?

Thanks

Also, tried this:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

But cannot the the posts width to match the container width:

1 Like

topic-body has his own width setting.

Default:

.topic-body {
    width: calc(690px + (11px * 2));
}

Change only the 690px and keep the rest (it’s linked to the padding of the topic post)

6 Likes

Thanks! Will give it a go later and post back the results.

I tried changing .topic-body yesterday, but I’ll try again based on your suggestion @Steven

1 Like

Hi @Steven,

Added the following to the desktop CSS:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

.topic-body {
    width: calc(1020px + (11px * 2));
}

It worked partially, but there is some issue. Perhaps you know the CSS trick to fix it?

See Image:

1 Like

I’m not on my computer but I know there is some margin-left to correct with the class timeline-container

1 Like

Right, for the timeline there are a few margin-lefts that need to be overridden on .timeline-container (three breakpoints):

https://github.com/discourse/discourse/blob/cd5b7109d04722df5c39b2ded9fa4ead6c290ce4/app/assets/stylesheets/common/topic-timeline.scss#L8

4 Likes

Hi @awesomerobot

Kris,

The way we got the wide look we wanted was to be less graceful and hide the .timeline-container.

#main-outlet {
  width: auto;
  max-width: 70%; 
}

.topic-body {
    width: 100%;
}

.timeline-container .topic-timeline {
      display: none;
 }

Not very graceful but at least it’s working ‘ok’ with large blocks of code, it is easier to read on the big developers screen.

Would be nice to show the .timeline-container but I could not get it to work overriding the class as suggested, surely because of my not well-developed CSS skills:

Thank you for your help and for this nice theme.

1 Like

I am loving this theme so far. Many thanks for sharing it with us!

I’ve noticed on mobile view the category color bars disappear. Is this on purpose and is there a way to restore it?

Also, is there a way to turn off the background if a category has a background set? It seems to work okay but when scrolling on long posts the screen gets jerky and you can glimpse the theme set background.

Thanks!
Ray

1 Like

I dug into mobile CSS and saw it was being excluded; commenting out the “left-border” portion turned the colored borders back on:

.category-list-item {
//  border-left: none;
  border-top: 2px solid;
  .category-name {
    font-weight: normal;
  }
}

However, I know this will be overwritten whenever the theme is updated. What’s the best way to keep modifications in those situations?

I do have a custom theme component where I keep custom CSS changes, this in the mobile CSS portion:

.category-list-item {
  border-left: 4px !important; 
}

…but it doesn’t show the specific category color, just a white bar. How do I get it to show the proper category color? I know it has something to do with category color variables but I can’t seem to find reference to it.

I’m a newb when it comes to CSS and such so I may be doing something wrong.

Thanks,
Ray

2 Likes

Have issue with the header colors.

Changed the header backgroup colour and the header Text, but it’s not not honoring the settings

image

The icons stays grey

image

image

It’s the default behavior since the color is a “low-mid” variable of #ffffff and not the pure color.

See here to overwrite that color, How to Change Header Icon Color?

3 Likes

Just want to call out what an awesome theme this has proven to be. Absolutely love its clean look.

2 Likes

Agreed! One of the best looking Discourse themes out there.

Ray

1 Like

I must be dense, but I can’t get the logo to change size with a theme component created to adjust CSS. I can change the overall header height, but the logo remains stubbornly the same. This CSS seems to knock out any changes I attempt to make:

.d-header #site-logo {
max-height: 35px !important;
}

According to Chrome Inspector it’s coming from: desktop-scss-graceful.scss

Changing logo size works fine with the default theme and, as I said, changing header height works with Graceful, just not the logo…

2 Likes

Yeah the !important overrides any other CSS without an !important… I don’t recall why it’s there but I should look into removing it. Does it work if you include an important with your own CSS?

.d-header #site-logo {
max-height: 50px !important; // <-- your custom height here
}
3 Likes

Thanks for the quick reply! I had actually noticed the !important and tried adding it to mine, to no avail. The odd thing is, trying it now, when I save that change and it refreshes, for a moment it appears the right size, then it shrinks down again. And in the Inspector it appears to be doing the right thing:

image

At least in the sense that the 35px is disabled. But the order seems funny, at the least. And in any case it’s still not working. Strange.

I’m putting this in Common CSS for what it’s worth…

Update: found it! It’s :

.d-header #site-logo {
     height: 2.667em;
 }

in header.scss!

And if I add my own height: with !important it works!

OK, next question, which I think is specific to this theme. I’m using it as a basis to make a sort of personal “blog” (actually a digital garden, but that’s kind of an obscure term). Since basically every post will be authored by me, I want to remove or reduce the prominence of certain authorial visual elements, mainly avatars, and especially in the topic lists on the front page and in categories. Outlined in red is what I want to hide, if possible:

You can probably see why. :grinning_face_with_smiling_eyes:

Things I’ve tried:

I am also looking into and experimenting with various components to show the first image in a topic as a thumbnail. If I could replace those avatars with little thumbnails of first image in the topic, that’d be great too. But hiding them is a good start.

Thanks in advance!