I really liked the theme shared way back in 2016 by @jsthon. They havenāt been around since it was initially posted, so Iāve updated it, expanded it, and added it to github.
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:
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?
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.
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:
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:
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.
ā¦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.
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ā¦
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
}
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!
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:
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.
. They havenāt been around since it was initially posted, so Iāve updated it, expanded it, and added it to github.
)