J’ai vraiment aimé le thème partagé il y a longtemps en 2016 par @jsthon. Ils ne sont plus actifs depuis sa publication initiale, alors je l’ai mis à jour, étendu et ajouté à GitHub.
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 :
Suis-je le seul à rencontrer ce problème avec ce thème ? Lorsque je teste sur Google PageSpeed, j’obtiens 99 %, mais la page ne se charge pas, ce qui fausse les résultats.
Pourquoi Google ne peut-il pas voir cela ? La page ne se charge-t-elle pas ?
Hmm, oui, je vois le même problème… il semble que quelque chose dans le thème interfère avec la version de Discourse que nous servons à Google. Je vais enquêter. On dirait que cela pourrait être le même problème qui perturbe l’impression signalé ci-dessus.
J’essaie d’élargir considérablement Graceful sur ordinateur de bureau. J’ai essayé ceci :
#main-outlet {
width: auto;
max-width: 1210px; /* Cela rend le conteneur aussi large que le logo/les contrôles de l'en-tête */
}
Ce CSS a élargi le conteneur global ; et les sujets suggérés en bas s’étendent bien sur la page, mais la largeur globale des messages dans les sujets est trop étroite (pour ma version large).
J’ai utilisé l’inspecteur et examiné de nombreux éléments, mais sans être expert, je n’ai pas réussi à faire correspondre la largeur des sujets/messages à celle de #main-outlet.
Pourriez-vous m’aider ?
Merci
J’ai également essayé ceci :
#main-outlet {
width: auto;
max-width: 80%;
}
Mais je n’arrive pas à faire correspondre la largeur des messages à celle du conteneur :
Ce n’est pas très « élégant », mais cela fonctionne « correctement » avec de gros blocs de code, ce qui rend la lecture plus facile sur les grands écrans des développeurs.
Ce serait bien d’afficher le .timeline-container, mais je n’ai pas réussi à faire fonctionner la surcharge de la classe comme suggéré, sûrement à cause de mes compétences CSS encore peu développées :
J’adore ce thème jusqu’à présent. Merci beaucoup de le partager avec nous !
J’ai remarqué que sur la version mobile, les barres de couleur des catégories disparaissent. Est-ce intentionnel et y a-t-il un moyen de les rétablir ?
Par ailleurs, existe-t-il un moyen de désactiver l’arrière-plan si une catégorie en a un défini ? Cela semble fonctionner correctement, mais lors du défilement sur les longs articles, l’écran devient saccadé et on aperçoit l’arrière-plan défini par le thème.
…mais cela n’affiche pas la couleur spécifique de la catégorie, seulement une barre blanche. Comment faire pour afficher la bonne couleur de catégorie ? Je sais que cela a quelque chose à voir avec les variables de couleur des catégories, mais je n’arrive pas à trouver la référence.
Je suis un débutant en matière de CSS et je risque donc de faire quelque chose de mal.
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…
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 ?
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 :
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 :
L’utilisation des outils de développement de Chrome pour identifier les classes/IDs et tenter de les masquer (note à moi-même : ne pas masquer les ember-view )
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.
. Ils ne sont plus actifs depuis sa publication initiale, alors je l’ai mis à jour, étendu et ajouté à GitHub.
Hébergé par nous ? Les thèmes sont disponibles pour une utilisation sur nos plans Standard, Business et Entreprise.
)