Mi è piaciuto molto il tema condiviso nel 2016 da @jsthon. Non sono piĂš attivi da quando è stato pubblicato inizialmente, quindi lâho aggiornato, ampliato e aggiunto a GitHub.
Disattiva lâimmagine di sfondo e le impostazioni di mosaico sopra.
Questo tema dispone di tre impostazioni:
Un campo per aggiungere la tua immagine di sfondo
Unâopzione per creare un mosaico
Unâopzione per rimuovere entrambe le opzioni precedenti
Se disattivi lâopzione mosaico, lâimmagine verrĂ impostata su background-size: cover e il browser ridimensionerĂ lâimmagine per coprire proporzionalmente lâintero sfondo. Ad esempio:
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.