A Graceful theme for Discourse

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!

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