Thème Mint

Personnalisation Thème
,
1

||||
-|-|
:discourse2: | Résumé | Mint - Un thème moderne avec une touche de menthe. :slight_smile:
| :eyeglasses: | Aperçu | Aperçu sur Discourse Theme Creator
:hammer_and_wrench: | Lien du dépôt | https://github.com/discourse/discourse-mint-theme
:open_book: |Nouveau dans les thèmes Discourse ? | Guide du débutant pour utiliser les thèmes Discourse

Installer ce thème

Fonctionnalités

Un thème moderne avec une touche de menthe. :slight_smile:

:herb: :ice_cube:

Page d’accueil (catégories)

Screenshot 2021-09-06 at 19.48.04
Screenshot 2021-09-06 at 19.48.041920×859 49.1 KB

Screenshot 2021-09-06 at 19.48.43
Screenshot 2021-09-06 at 19.48.431920×913 79.2 KB

Derniers sujets

Screenshot 2021-09-07 at 17.08.01
Screenshot 2021-09-07 at 17.08.011920×951 55 KB

Sujet

Screenshot 2021-09-07 at 17.22.56
Screenshot 2021-09-07 at 17.22.561920×1400 120 KB

Recherche avancée

Screenshot 2021-09-07 at 17.22.11
Screenshot 2021-09-07 at 17.22.111920×1421 127 KB

Ce thème inclut le composant suivant :

Conseils

Paramètres Discourse

Les modifications de paramètres suivantes sont requises pour que ce thème s’affiche correctement :

  • top menu doit être défini sur category, latest, new, unread, top
  • desktop category page style doit être défini sur Boxes with Subcategories

Bannière de bienvenue

Rendez-vous sur la page Admin > Welcome banner (/admin/config/welcome-banner).

  • dans la liste déroulante Enabled on themes…, sélectionnez Mint Theme
  • dans la liste déroulante Page visibility, sélectionnez Homepage only
  • dans la liste déroulante Location, sélectionnez Below site header
  • Background image peut être défini selon vos besoins

Discourse Showcased Categories

Dans les options du composant de thème Showcased Categories, les modifications suivantes sont requises pour que ce thème s’affiche correctement :

  • sélectionnez la feed one category et la feed two category selon vos besoins
  • remplissez le feed one title et le feed two title selon vos besoins
  • la valeur recommandée pour max list length est 3.

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

67 « J'aime »
Mint theme - How was this UI achieved?
How should I set up the same Mint theme section?
Our main screen looks very different with no top menu dropdowns, etc
Current Projects - September 2024
Mint theme - How was this UI achieved?
Deprecating the Search Banner theme component
2

Vraiment un très beau thème :slight_smile:

Je pourrais même le tester avec du bleu roi (ma couleur préférée) sur mon site de test.

Merci :smiley:

5 « J'aime »
3

@meghna qui sort des thèmes incroyables. Ça a l’air super. Je vais déployer et tester.

5 « J'aime »
4

Magnifique thème ! Merci de l’avoir créé :slight_smile:

Je me demandais s’il était possible de supprimer les carrés et les cercles en arrière-plan ? Toute aide pour m’orienter dans la bonne direction serait grandement appréciée :pray:

3 « J'aime »
5

supprimez

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}

de desktop.scss et tout devrait fonctionner :slight_smile:

6 « J'aime »
6

Merci beaucoup, Tomasz, je l’apprécie :smiley:

2 « J'aime »
7

Ce thème est génial. Merci de l’avoir créé ! Je suis nouveau dans l’univers de Discourse. Je sais comment télécharger ce thème, mais je ne suis pas sûr de savoir comment modifier certains éléments. Ce que je souhaite changer, ce sont les couleurs des blocs en arrière-plan (le cercle et le carré). De plus, je voudrais modifier la couleur de fond. Dois-je télécharger le fichier du thème, l’éditer, puis créer mon propre thème ? Ou existe-t-il une méthode plus simple ?

2 « J'aime »
8

Merci ! :slight_smile:

Oui. Pour modifier les couleurs, vous devez bifurquer le thème et mettre à jour le code couleur selon vos besoins. Voici comment procéder :

Dans variables.scss, modifiez le code couleur selon vos préférences :


$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

Pour modifier la couleur de fond, mettez à jour la couleur secondary dans about.json (notez que cela modifiera également la couleur du texte de certains boutons) :

"secondary": "F6FBFC"
9

J’adore ce thème – il correspond parfaitement à l’identité visuelle de notre projet ! Cependant, si j’active le mode sombre, le thème est désorganisé. Est-ce normal ? Existe-t-il un moyen d’empêcher les utilisateurs d’activer le mode sombre ?

1 « J'aime »
10

Il serait également formidable de pouvoir modifier le CSS depuis le front-end, comme avec les thèmes par défaut.

image
image215×148 1.77 KB

12

Il y a deux petits problèmes avec l’éditeur. :slightly_smiling_face: Le bouton d’engrenage a un arrière-plan toujours actif, et la forme au survol du premier bouton ne correspond pas à la courbure du cadre :

image
image990×124 22.3 KB

1 « J'aime »
14

Corrigé les deux problèmes via :

2 « J'aime »
15

J’aime beaucoup votre thème et je l’ai installé.
L’arrière-plan de ma bannière de recherche n’a pas de coins arrondis et n’est pas pleine largeur.
Comment puis-je le changer pour qu’il corresponde à votre mise en page ?

16

Il est possible qu’un autre thème ou composant interfère avec le style du thème mint. Pouvez-vous essayer de désactiver les autres thèmes/composants que vous auriez installés ?

17

C’est une installation propre avec le thème par défaut inactif et uniquement ces composants :

  • discourse-search-banner
  • Showcased Categories
18

C’est étrange. Pouvez-vous m’envoyer l’URL de votre instance Discourse par message privé et je pourrai y jeter un œil ?

1 « J'aime »
19

Le problème de bannière est maintenant résolu via :

Il y avait aussi un problème dans le plugin “showcased categories” que Patrick m’a signalé. Je l’ai également résolu.

3 « J'aime »
20

Salut, j’ai joué avec le mode sombre sur un appareil avec un joli thème Mint. J’ai apporté quelques modifications pour prendre en charge le mode sombre. Juste pour des tests.

изображение
изображение1389×1541 255 KB

discourse-mint.zip (5.1 Ko) Il peut contenir des erreurs bien sûr :slight_smile: Pour cette raison, je ne créerai pas de PR à partir de github.

J’ai apporté quelques modifications pour les blocs de code, le formatage de style gitlab, la page large, etc… Je n’ai pas testé sur mobile.

1 « J'aime »
21

Merci pour vos efforts, Ivan ! J’ai examiné votre travail et il y a des modifications personnalisées qui n’ont pas besoin d’être dans le cœur. Je vais examiner les modifications spécifiques au mode sombre et les apporterai au cœur après d’autres tests.

1 « J'aime »
22

De rien, Meghna ! Je pense qu’il suffirait d’appliquer la valeur revert à certains éléments blancs.

1 « J'aime »