A Graceful theme for Discourse

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!

I would like to start by saying thanks for such a great theme. and Special thanks for giving us the option to add a custom background image that was very important for us.

I am however running into a bit of a bump while trying to properly set up the header for the forums.

a- I am trying to increase the size of the logo top left corner.
b- I am trying to change the header color to match with the logo background as for some reason I am not sure how to get discourse to accept a .png image that will go along any header color. Without discourse changing it to a jpg and adding automatically adding the background.

The image below will show what I have now

I know there were a few mentions above about this and creating a custom component to override the CSS however I am not very familiar with CSS and I am not sure what lines to add where in my custom component I created.

any help with this will be greatly appreciated!

I’ve just made an update that should fix the recently mentioned color issues (mismatched background, dark mode), thanks for reporting the issues everyone!

1 Like

How do I edit the CSS for this theme?

[image]

I am having issue with page width, which shows narrow from right side. attached screenshot for reference.

is anyone else having same issue with this theme and any idea how can we fix this?

1 Like

There is some issue with avatars - placing on top of names

2 Likes

We’re seeing this issue, as well.

3 Likes

Thanks for reporting! I’ve just made another update — take another look and let me know if there are any issues.

5 Likes

@awesomerobot thanks for the update, I think you may need to look mobile view, looks bit extra space on both side?

I’m not certain this is a theme change/issue, but recently when I updated Discourse and all my plugins, my front page with Topic List Thumbnails Theme Component installed went from being 3 columns to 2 columns:

If I use Chrome Inspector and slightly increase the width of the main container, it fixes it. So I’m guessing it may have to do with this recent commit which has some width changes in it:

For now I am addressing it by overriding the width in CSS with main-outlet, but I’m not sure if there are any unintended consequences, or if this is the best way to address it. So this is not necessarily to say that anything needs to be changed, but to mention it did affect layout on my site in this scenario, and to ask if there is any other approach I should be taking to get my desired result (3 column masonry layout). I’ve already fixed the issue so if that should take care of it long-term I’m happy to leave it. :slight_smile:

Is this going to support the new sidebar being integrated into Discourse?

2 Likes

Yes, we plan on updating all of our themes to support it.

2 Likes

Small bug report: the latest version of this theme seems to truncate the forum title when viewed on a small mobile device like an iPhone, as can be seen on https://forums.ankiweb.net/

1 Like

Full-screen chat appears to be semi-broken on the Graceful theme, with both the main window and chat window having a scrollbar. I haven’t been able to recreate this issue with other themes, so it appears to be specific to Graceful.

2 Likes

Why does this theme force the cards to be legacy-style? (the old style before the new Usercard Redesign Experiment) Otherwise, great theme.
Image:
image

1 Like

The updated usercards are an experimental theme component, and it looks like it just wasn’t added to all themes here on Meta… I added it to that one if you’re curious.

3 Likes

IPhone 11, Safari Browser, there are two Problems


1 Like

It is the same on Android. The other sign-in options’ texts are invisible, and the first column of the theme component table is distorted.

2 Likes