Thème Complet

Ce qui m’a surpris, c’est que la première fois que j’ai essayé cela après avoir sélectionné le thème « Fully » sur Meta, le sujet try.discourse.org s’est affiché avec le thème Fully. Je suppose qu’il s’agit d’un problème de cache lié au fait que les sites sont sur le même domaine.

Le problème que vous soulevez est-il que le logo Discourse n’est pas remplacé par le petit logo lorsque le menu hamburger est cliqué sur try.discourse.org ?

Hmm – Le panneau de navigation sur le site try.discourse.org inclut une div supplémentaire avec des liens de menu (.try-header-nav-wrapper) qui casse la mise en page de la page (uniquement sur ce site) en poussant l’en-tête très loin vers la droite lorsque le menu latéral est masqué, donc je vois maintenant que ce n’est pas un bug dans le thème Fully.

1 « J'aime »

Bonjour !

J’apprécie vraiment l’utilisation de ce thème pour mon forum, mais j’ai remarqué que, comme le thème par défaut, il n’y a pas d’option pour personnaliser le CSS/HTML. J’aimerais ajouter un fond d’écran au thème. Est-ce possible ?

1 « J'aime »

Vous pourriez le faire en utilisant le menu de personnalisation des thèmes / composants de thème pour créer un nouveau composant de thème et l’ajouter à ce thème.

Dans votre composant de thème, vous pouvez ajouter le code personnalisé pour ajouter votre arrière-plan.

Salut @jordan.vidrine,

Merci pour votre réponse. Je crois que j’ai vu cela quelque part en cherchant « changer l’arrière-plan », mais j’avais supposé que ce n’était possible qu’en personnalisant le CSS/HTML du thème.

Je vais essayer ça !

1 « J'aime »

Salut tout le monde ! J’adore ce thème ! Cependant, en le prévisualisant sur mon site, j’ai eu un problème avec l’en-tête de la navigation latérale. L’en-tête pourrait-il simplement utiliser une couleur différente (la couleur d’en-tête normale du site) ?

Ceci :

image

Au lieu de ceci :

image

Comment puis-je faire cela ? En changeant le CSS, toute la navigation est devenue verte.
Merci !

1 « J'aime »

Vous voulez changer la variable spécifique pour —sidebar-color) et cela changera la barre latérale et au-dessus de la barre latérale.

Hmmm, il n’y a aucun moyen de changer uniquement l’en-tête de la barre latérale ?

J’ai le même problème, avec le logo de mon en-tête qui s’étend sur deux couleurs différentes, ce qui est étrange.

Je pensais que la modification du CSS dans les thèmes était découragée de nos jours ? L’option d’éditeur CSS a été supprimée pour les thèmes distants, alors comment pourrions-nous changer cette variable ? Cela suppose également que nous voulons que la couleur de la barre latérale soit la même que celle de l’en-tête.

Bonjour, vous pouvez modifier cette section séparément de la barre latérale avec CSS.

Pour ce faire, vous devez créer un nouveau composant ou en ajouter un existant. :slightly_smiling_face:

  1. Allez dans /admin/customize/themes/
    Personnaliser → Thèmes

  2. Cliquez sur l’onglet Composants, puis sur le bouton Installer

  3. Dans la fenêtre contextuelle, cliquez sur le bouton Créer un nouveau et tapez le nom du nouveau composant.

  4. Cliquez sur le bouton Créer.

  5. Le composant est créé. Sélectionnez maintenant le thème complet pour l’activer.

  6. Cliquez sur le bouton Modifier CSS/HTML.

  7. Collez le code ci-dessous dans la section CSS.

  8. N’oubliez pas de l’enregistrer avec le bouton Enregistrer en bas.

.desktop-view .has-sidebar-page .d-header-wrap::before {
  background: transparent;
  border-right: none;
}

Si vous souhaitez conserver la bordure droite, supprimez cette ligne du code.

6 « J'aime »

Merci pour cela, Don. Je n’ai jamais modifié le CSS de Discourse auparavant… où dois-je apporter cette modification ?

2 « J'aime »

J’ai mis à jour le message ci-dessus. :slight_smile:

5 « J'aime »

Merci. Je viens de le faire et tout semble à nouveau en ordre :smiley:

2 « J'aime »

Comme le thème est actuellement, il reste très peu d’espace sur le bord droit pour que cela soit fait. Je pense qu’il serait intéressant d’avoir plus d’espace là et de l’utiliser pour des widgets.

1 « J'aime »

J’ai permis à mes utilisateurs d’avoir accès au thème et ils ont rapidement trouvé quelque chose d’étrange :roll_eyes:

J’utilise le composant de thème Custom Header Links et avec l’autre thème que j’utilise (Material Design), lorsque vous réduisez la largeur de la fenêtre du navigateur jusqu’au point où ces liens remplacent le logo du site, le logo rétrécit, devenant finalement très petit, par exemple.

image

Avec Fully, le logo ne rétrécit pas, donc vous obtenez ceci…

image

Custom Header Links supprime les liens et affiche le titre du sujet lors de la visualisation d’un sujet. Le titre du sujet remplace également le logo dans les largeurs de navigateur plus étroites, bien qu’à terme le logo soit complètement supprimé, ce qui résout le problème.

Je ne suis pas sûr s’il s’agit d’un problème de Fully ou de Custom Header Links, mais je commence ici car CHL fonctionne bien avec l’autre thème.

1 « J'aime »

Il semble qu’il y ait un petit conflit avec discourse-full-width-component et les logos plus larges.

Vous pouvez résoudre ce problème rapidement avec :arrow_down_small:

Collez ceci dans le composant précédemment créé après le code précédent pour qu’il soit au même endroit.

Cela réduira le logo.

.desktop-view .d-header .title a {
  flex: auto;
}

Mise à jour : Hmm, je pense que cela réduit probablement trop avec la barre latérale masquée… :thinking: J’y jette un coup d’œil rapide et je pense que cela aura quelque chose à voir avec la grille. Mais je pense qu’il vaut mieux attendre la manière officielle de faire cela car je ne veux pas gâcher l’expérience utilisateur de l’en-tête en modifiant la grille.

@packman veuillez supprimer ce code.

3 « J'aime »

Merci encore ! Vous faites des choses merveilleuses aujourd’hui :slight_smile:

3 « J'aime »

Salut Don ! Encore un problème : le modifier de cette façon le fait ressembler au mode sombre. Comment puis-je modifier le CSS uniquement pour un schéma de couleurs spécifique ?

1 « J'aime »

Le logo devient très petit dans une fenêtre étroite, mais cela se produit également avec les liens d’en-tête personnalisés lorsqu’ils sont utilisés avec le thème Material Design.

Je regardais le CSS tout à l’heure et je pense que le fait que le logo soit inclus dans span.header-sidebar-toggle pourrait ne pas aider, bien que ce soit peut-être le seul endroit logique pour lui dans un affichage plus large ?

1 « J'aime »

Bonjour @Renato_Mendes :wave:

Oh je vois, vous voulez donc utiliser le fond transparent uniquement sur un schéma de couleurs. Je ne savais pas.

Il y a plusieurs façons de faire cela :arrow_down_small:

  1. dark-light-choose() : Il est possible de le faire avec, mais ce n’est pas très pratique dans ce cas car cela crée des variables. Il vaut mieux l’utiliser pour les couleurs.

  1. schemeType : Celui-ci est mieux adapté à ce cas d’utilisation si vous voulez l’utiliser par type de schéma.
Utiliser schemeType

Voici comment utiliser schemeType

Supprimez le code précédent du composant que vous avez créé et placez le nouveau dans la section Color Definitions du composant, comme vous le voyez sur l’image.

Cela n’activera le code que sur le schéma clair.

Common / Color Definitions

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

  1. Targetable Color Schemes : Si vous avez plus de schémas de couleurs et/ou si vous voulez cibler un schéma de couleurs spécifique où vous voulez changer des choses, alors ce composant de thème est idéal pour vous.
Utiliser Targetable Color Schemes

Ce composant place le schéma de couleurs actuel dans le html afin que vous puissiez le cibler avec CSS.

Voici comment l’utiliser :

Installez le composant.
Vérifiez l’identifiant du schéma de couleurs où vous voulez changer des choses.
Vous pouvez le trouver ici

ou

/admin/customize/colors
Page des couleurs. Ici, si vous cliquez sur un schéma de couleurs, l’identifiant sera ajouté à l’URL.

Maintenant, vous pouvez l’utiliser dans le code. N’oubliez pas de supprimer le code précédemment ajouté.

html[color-scheme="your-color-scheme-id"] {
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

Bonjour @packman :wave: Je vous ai envoyé un message privé.

2 « J'aime »