Thème Élégant

:discourse2: Résumé Graceful - Un thème élégant pour Discourse
:eyeglasses: Aperçu Aperçu sur le Créateur de thèmes Discourse
:hammer_and_wrench: Lien vers le dépôt https://github.com/discourse/graceful
:open_book: Nouveau sur les thèmes Discourse ? Guide de démarrage pour l’utilisation des thèmes Discourse

Installer ce thème

Fonctionnalités

J’ai vraiment aimé le thème partagé il y a longtemps en 2016 par @jsthon :heart_eyes:. Ils ne sont plus actifs depuis sa publication initiale, alors je l’ai mis à jour, étendu et ajouté à GitHub.

Paramètres

Nom Description
image d’arrière-plan Entrez l’URL de l’image
motif en tuiles de l’arrière-plan
aucune image d’arrière-plan Désactive l’image d’arrière-plan et les paramètres de tuiles ci-dessus.

Ce thème dispose de trois paramètres :

  • Un champ pour ajouter votre propre image d’arrière-plan
  • Une option pour créer un motif en tuiles
  • Et une option pour supprimer les deux options ci-dessus

Si vous désactivez l’option de tuiles, l’image sera définie sur background-size: cover, et votre navigateur ajustera votre image pour couvrir proportionnellement tout l’arrière-plan. Par exemple :

Crédits

Le crédit pour le motif d’arrière-plan par défaut inclus revient à Toptal Subtle Patterns.


:discourse2: Hébergé par nous ? Les thèmes sont disponibles pour une utilisation sur nos plans Standard, Business et Entreprise.

75 « J'aime »

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 « J'aime »

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 « J'aime »

@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 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

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

1 « J'aime »

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

4 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

Je tenais simplement à souligner à quel point ce thème s’est avéré génial. J’adore absolument son look épuré.

2 « J'aime »

D’accord ! L’un des thèmes Discourse les plus élégants qui existent.

Ray

1 « J'aime »

Je dois être lent, mais je n’arrive pas à modifier la taille du logo avec un composant de thème conçu pour ajuster le CSS. Je peux changer la hauteur globale de l’en-tête, mais le logo reste obstinément identique. Ce CSS semble annuler tous les changements que j’essaie d’apporter :

.d-header #site-logo {
max-height: 35px !important;
}

Selon l’inspecteur Chrome, cela provient de : desktop-scss-graceful.scss

La modification de la taille du logo fonctionne parfaitement avec le thème par défaut et, comme je l’ai dit, le changement de la hauteur de l’en-tête fonctionne avec Graceful, mais pas pour le logo…

2 « J'aime »

Oui, le !important annule tout autre CSS sans !important… Je ne me souviens plus pourquoi il est là, mais je devrais vérifier pour le supprimer. Est-ce que cela fonctionne si vous incluez un !important dans votre propre CSS ?

.d-header #site-logo {
max-height: 50px !important; // <-- votre hauteur personnalisée ici
}
3 « J'aime »

Merci pour cette réponse rapide ! J’avais en fait remarqué le !important et essayé de l’ajouter dans mon code, mais sans succès. L’étrange, c’est que quand j’essaie maintenant, en sauvegardant ce changement et que la page se rafraîchit, pendant un instant l’élément semble avoir la bonne taille, puis il rétrécit à nouveau. Et dans l’inspecteur, il semble se comporter correctement :

Du moins dans le sens où le 35px est désactivé. Mais l’ordre semble bizarre, en tout cas. Et de toute façon, cela ne fonctionne toujours pas. Étrange.

Je mets cela dans le CSS commun, pour ce que ça vaut…

Mise à jour : j’ai trouvé ! C’est :

.d-header #site-logo {
     height: 2.667em;
 }

dans header.scss !

Et si j’ajoute ma propre propriété height: avec !important, cela fonctionne !

OK, prochaine question, que je pense être spécifique à ce thème. Je l’utilise comme base pour créer une sorte de « blog » personnel (en réalité un jardin numérique, mais c’est un terme assez obscur). Comme pratiquement chaque publication sera rédigée par moi-même, je souhaite supprimer ou réduire la visibilité de certains éléments visuels liés à l’auteur, principalement les avatars, et surtout dans les listes de sujets sur la page d’accueil et dans les catégories. Ce que je souhaite masquer, si possible, est entouré en rouge :

Vous voyez probablement pourquoi. :grinning_face_with_smiling_eyes:

Ce que j’ai essayé :

Je suis également en train d’étudier et d’expérimenter divers composants afin d’afficher la première image d’un sujet sous forme de miniature. Si je pouvais remplacer ces avatars par de petites miniatures de la première image du sujet, ce serait également formidable. Mais les masquer est déjà un bon début.

Merci d’avance !