Tema Grazioso

:discourse2: Riepilogo Graceful - Un tema elegante per Discourse
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator
:hammer_and_wrench: Link al repository https://github.com/discourse/graceful
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo tema

Caratteristiche

Mi è piaciuto molto il tema condiviso nel 2016 da @jsthon :heart_eyes:. Non sono più attivi da quando è stato pubblicato inizialmente, quindi l’ho aggiornato, ampliato e aggiunto a GitHub.

Impostazioni

Nome Descrizione
Immagine di sfondo Inserisci l’URL dell’immagine
Sfondo a mosaico
Nessuna immagine di sfondo 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:

Crediti

Il credito per il motivo di sfondo predefinito incluso va a Toptal Subtle Patterns.


:discourse2: Ospitato da noi? I temi sono disponibili per l’uso nei nostri piani Standard, Business ed Enterprise.

75 Mi Piace

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?

6 Mi Piace

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 Mi Piace

@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 Mi Piace

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 Mi Piace

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 Mi Piace

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 Mi Piace

I’m not on my computer but I know there is some margin-left to correct with the class timeline-container

1 Mi Piace

Right, for the timeline there are a few margin-lefts that need to be overridden on .timeline-container (three breakpoints):

4 Mi Piace

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 Mi Piace

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 Mi Piace

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 Mi Piace

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 Mi Piace

Just want to call out what an awesome theme this has proven to be. Absolutely love its clean look.

2 Mi Piace

Agreed! One of the best looking Discourse themes out there.

Ray

1 Mi Piace

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 Mi Piace

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 Mi Piace

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!