# Graceful Theme
**URL:** https://meta.discourse.org/t/graceful-theme/93040
**Category:** Theme
**Tags:** official, graceful-theme
**Created:** [July 24, 2018, 8:09pm UTC](https://meta.discourse.org/t/graceful-theme/93040 "2018-07-24T20:09:12Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 24, 2018, 8:09pm UTC](https://meta.discourse.org/t/graceful-theme/93040/1 "2018-07-24T20:09:12Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Graceful** - A graceful theme for Discourse |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/graceful-theme) |
| š | **Repository Link** | [https://github.com/discourse/graceful](https://github.com/discourse/graceful) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme
> [@](#):
>
> :discourse2: As this is an #official theme maintained by the Discourse team, #Support issues, #Contribute > Bug reports, #Contribute > UX suggestions, and requests for #Development advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=graceful-theme "Ask for support on configuring and using the Graceful Theme") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=graceful-theme "A bug report means something is broken, preventing normal/typical use of the theme") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=graceful-theme "Discussion about the user interface of the Graceful Theme, and how features are presented (including language and UI elements)") [š§āšØ **Dev**](https://meta.discourse.org/new-topic?category_id=7&tags=graceful-theme "Advice on how to customise this theme for your site")
### Features
I really liked the [theme shared way back in 2016](https://meta.discourse.org/t/a-graceful-style-for-discourse/43429) by @jsthon š. 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](https://www.toptal.com/designers/subtlepatterns/japanese-sayagata/).
> :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 document**
> >
> > Perform check on document:
---
### Author:  [@eextra](https://meta.discourse.org/u/eextra)
#### Post date: [January 18, 2020, 2:00pm UTC](https://meta.discourse.org/t/graceful-theme/93040/54 "2020-01-18T14:00:32Z")
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?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [January 23, 2020, 8:52pm UTC](https://meta.discourse.org/t/graceful-theme/93040/55 "2020-01-23T20:52:17Z")
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.
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [March 22, 2020, 4:41am UTC](https://meta.discourse.org/t/graceful-theme/93040/70 "2020-03-22T04:41:20Z")
@awesomerobot
Very nice theme.
Iām trying to make Graceful much wider on desktop. Tried this:
```plaintext
#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:
```plaintext
#main-outlet {
width: auto;
max-width: 80%;
}
```
But cannot the the posts width to match the container width:
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 22, 2020, 8:20pm UTC](https://meta.discourse.org/t/graceful-theme/93040/71 "2020-03-22T20:20:14Z")
topic-body has his own width setting.
Default:
```css
.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)
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [March 23, 2020, 7:32am UTC](https://meta.discourse.org/t/graceful-theme/93040/72 "2020-03-23T07:32:14Z")
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
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [March 23, 2020, 11:20am UTC](https://meta.discourse.org/t/graceful-theme/93040/73 "2020-03-23T11:20:45Z")
> [@Steven](#):
>
> ```plaintext
> .topic-body {
> width: calc(690px + (11px * 2));
> }
>
> ```
>
> Change
Hi @Steven,
Added the following to the desktop CSS:
```plaintext
#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:
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 23, 2020, 12:10pm UTC](https://meta.discourse.org/t/graceful-theme/93040/74 "2020-03-23T12:10:41Z")
Iām not on my computer but I know there is some margin-left to correct with the class timeline-container
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 23, 2020, 12:14pm UTC](https://meta.discourse.org/t/graceful-theme/93040/75 "2020-03-23T12:14:35Z")
Right, for the timeline there are a few margin-lefts that need to be overridden on `.timeline-container ` (three breakpoints):
>
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [March 24, 2020, 9:11am UTC](https://meta.discourse.org/t/graceful-theme/93040/76 "2020-03-24T09:11:28Z")
Hi @awesomerobot
Kris,
The way we got the `wide look` we wanted was to be less `graceful` and hide the `.timeline-container`.
```plaintext
#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.
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [August 8, 2020, 3:09pm UTC](https://meta.discourse.org/t/graceful-theme/93040/80 "2020-08-08T15:09:52Z")
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
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [August 20, 2020, 8:00pm UTC](https://meta.discourse.org/t/graceful-theme/93040/81 "2020-08-20T20:00:46Z")
> [@Solari](#):
>
> Iāve noticed on mobile view the category color bars disappear. Is this on purpose and is there a way to restore it?
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
---
### Author:  [@IAmGav](https://meta.discourse.org/u/IAmGav)
#### Post date: [November 29, 2020, 6:04pm UTC](https://meta.discourse.org/t/graceful-theme/93040/91 "2020-11-29T18:04:39Z")
Have issue with the header colors.
Changed the header backgroup colour and the header Text, but itās not not honoring the settings
The icons stays grey
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 30, 2020, 10:51am UTC](https://meta.discourse.org/t/graceful-theme/93040/92 "2020-11-30T10:51:39Z")
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? - #2 by awesomerobot](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/2)
---
### Author:  [@Jack51](https://meta.discourse.org/u/Jack51)
#### Post date: [January 17, 2021, 4:39am UTC](https://meta.discourse.org/t/graceful-theme/93040/100 "2021-01-17T04:39:36Z")
Just want to call out what an awesome theme this has proven to be. Absolutely love its clean look.
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [January 20, 2021, 4:01am UTC](https://meta.discourse.org/t/graceful-theme/93040/101 "2021-01-20T04:01:40Z")
Agreed! One of the best looking Discourse themes out there.
Ray
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [February 12, 2021, 2:06am UTC](https://meta.discourse.org/t/graceful-theme/93040/102 "2021-02-12T02:06:07Z")
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ā¦
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 12, 2021, 4:31am UTC](https://meta.discourse.org/t/graceful-theme/93040/103 "2021-02-12T04:31:50Z")
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?
```scss
.d-header #site-logo {
max-height: 50px !important; // <-- your custom height here
}
```
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [February 12, 2021, 6:13am UTC](https://meta.discourse.org/t/graceful-theme/93040/104 "2021-02-12T06:13:50Z")
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:
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!
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [February 13, 2021, 1:49am UTC](https://meta.discourse.org/t/graceful-theme/93040/105 "2021-02-13T01:49:48Z")
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. š
Things Iāve tried:
- Advice in [How to hide users column on latest?](https://meta.discourse.org/t/how-to-hide-users-column-on-latest/64229)
- Advice in [Removing avatars in category view](https://meta.discourse.org/t/removing-avatars-in-category-view/29036)
- [MD Topic List component](https://meta.discourse.org/t/md-topic-list-component/117694) (does not appear to be compatible with theme)
- Using Chrome dev tools to find the classes/IDs and attempt to hide them (note to self: do not hide ember-view š¬š )
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!
[Next page](https://meta.discourse.org/t/graceful-theme/93040.md?page=2)