Thème Air

[Discourse]

	Résumé	Air Theme est un thème épuré et moderne incluant plusieurs composants de thème pour améliorer votre forum !
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien vers le dépôt	https://github.com/discourse/discourse-air
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce thème

Fonctionnalités

Mode Clair

Mode Sombre

Page des catégories

Ce thème inclut également quelques composants pour améliorer votre forum.

• Sujets cliquables
• Boîtes de catégories et de groupes modernes

Veuillez lire attentivement ces conseils lors de l’installation, car plusieurs paramètres doivent ÊTRE ACTIVÉS pour que ce thème s’affiche correctement.

---

Conseils

Bascule entre les modes clair et sombre

Pour que cela fonctionne correctement, au moins deux choix de schéma de couleurs doivent être activés dans votre section https://discourse.jordanvidrine.com/admin/customize/colors. Au moins deux couleurs doivent avoir l’option « Le schéma de couleurs peut être sélectionné par les utilisateurs » activée.

Une fois cela fait, les utilisateurs pourront choisir entre deux schémas de couleurs comme préférences clair et sombre dans le menu des préférences utilisateur.

---

Bannière de bienvenue

Accédez à la page Admin > Bannière de bienvenue (/admin/config/welcome-banner).

• Dans le menu déroulant Activé sur les thèmes…, sélectionnez Air Theme.
• Dans le menu déroulant Emplacement, sélectionnez Sous l'en-tête du site.

---

Boîtes de catégories et de groupes modernes

Ce composant de thème nécessite que vos catégories utilisent le paramètre BOÎTES DE CATÉGORIES AVEC SOUS-CATÉGORIES dans votre section /admin/site_settings/category/all_results?filter=categories.

Ce composant de thème permet également à l’administrateur du forum d’organiser la page des catégories avec des titres d’en-tête et de choisir quelles catégories apparaissent sous chaque en-tête. Pour garder les choses simples, j’ai limité l’utilisation à 5 en-têtes maximum. Si aucun paramètre de catégories et d’en-tête n’est sélectionné, toutes les catégories s’afficheront comme ci-dessus ; c’est l’option d’affichage par défaut.

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

[Don]

C’est tout simplement incroyable Jordan ! J’adore !

[th21]

Ce serait utile si le message de bienvenue pouvait être masqué lorsque le champ de locale est laissé vide

[oshyan (Oshyan Greene)]

Oh wow, ça a l’air vraiment sympa ! Merci pour le partage.

[itsbhanusharma (Bhanu Sharma)]

Ce thème donne à Discourse l’apparence moderne qu’il mérite. Très bien fait @jordan.vidrine

[Ahmed_Gagan]

Le thème est magnifique. Excellent travail

[thegurjyot (Gurjyot Singh)]

Ce thème est vraiment magnifique. J’espère que nous pourrons également obtenir cette page de catégorie en tant que composant indépendant. Elle est bien meilleure ainsi.

[frold]

Merci, c’est agréable…

C’est la première fois que j’installe un nouveau thème. Je l’adore vraiment !!

Studmed.dk

[Jeremie_Leroy]

Bonjour @jordan-vidrine, concernant la colonne « Nombre de vues », quel type de code dois-je ajouter dans le composant pour empêcher cette colonne d’être masquée ?

[jordan.vidrine]

Je pense que cela devrait fonctionner :

.full-width .contents .topic-list thead th.posts {
width: 10%;
}

.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}

th.num.views {
width: 10%;
order: 3;
display: block;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}

.topic-list .views {
width: 10%;
order: 3;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}

[ggurbet (Gökhan Gurbetoğlu)]

Désarmant de beauté. Excellent travail @jordan.vidrine !

[ShubhayanS (shubhayan saha)]

Est-il possible de modifier le texte de l’en-tête « Bienvenue sur le forum » ?

[jordan.vidrine]

Oui, cela peut être modifié dans le composant Discourse Search Banner

[Jerdeman (Jeroen)]

Il y a quelque temps, j’ai signalé un problème d’affichage des catégories en vue mobile (Air Theme - #172). J’ai échangé un peu avec @jordan.vidrine, mais nous n’avons pas réussi à trouver la cause du problème. J’espère que quelqu’un d’autre aura des idées.

Pour les détails
En utilisant une installation propre de Discourse 2.7.11 sur kubernetes avec l’aide d’un helm chart de Bitnami, et la dernière version du thème installée et configurée comme mentionné dans le premier post, nous ne voyons aucune catégorie en vue mobile et le style est incorrect sur la dernière page.

Ce que nous avons essayé
Outre l’utilisation d’une installation propre, nous avons également tenté d’utiliser d’anciennes versions du thème. Le problème est cependant resté, mais nous n’avons pas essayé toutes les versions de manière exhaustive.
Nous avons également comparé le HTML de notre instance avec celui de discourse.jordanvidrine.com , et avons remarqué qu’il est significativement différent.

Intuition
Comme nous ne pouvons pas utiliser une version ‘bêta’, mon intuition me dit qu’il s’agit d’un problème de compatibilité entre le thème ou l’un de ses plugins et Discourse 2.7. J’aimerais savoir si quelqu’un a ce thème qui fonctionne sur la version 2.7, et si oui, avec quelles versions du thème et des plugins pertinents.

Question
Quelqu’un a-t-il réussi à faire fonctionner ce thème avec la version 2.7 et/ou y a-t-il des indices sur ce que nous pourrions faire pour que cela fonctionne ?

[Hyeonji_Kim]

Salut. Tout d’abord, merci pour ce super thème

Je veux changer la police de caractères, comment puis-je le faire.

J’ai essayé ceci

• télécharger ce thème Google Fonts, et changer le paramètre de police dans PARAMÈTRES DU SITE –\u003e Ne fonctionne pas

• ajouter le code @import{lien vers la police web ~~~ } dans Desktop.css, mobile.css –\u003e Ne fonctionne pas

Quel fichier dois-je modifier pour changer la police ???

[jordan.vidrine]

Je pense que vous devriez pouvoir définir une police personnalisée sans composant ici : admin/site_settings/category/all_results?filter=font

Si vous souhaitez plus de personnalisation, je pense que le composant de thème Google Fonts que vous avez lié fonctionnerait. Cependant, le thème utilise des theme-settings et non un paramètre de site, je crois.

Avez-vous soulevé ce problème dans le sujet de ce composant de police ?

[hequaye (Henry Herbert)]

Bonjour à tous, quelqu’un peut-il m’aider à modifier la taille et la « nature fixe » de la couleur d’arrière-plan sur mobile ?

Le CSS pour mobile est transparent de mon côté. Et j’ai juste besoin d’un peu d’aide pour changer l’arrière-plan fixe pour les couleurs d’arrière-plan.

Si je ne me trompe pas, il y a un arrière-plan d’en-tête et un arrière-plan de page, n’est-ce pas ?

[jordan.vidrine]

Ceci est dû au fait que le thème et ses composants inclus sont assez exigeants quant à la manière dont le site est configuré.

Dans le message original, j’ai partagé que :

@jordan-vidrine

Catégories modernes + boîtes de groupe

Ce composant de thème nécessite que vos catégories utilisent le paramètre BOÎTES DE CATÉGORIE AVEC SOUS-CATÉGORIES dans votre zone /admin/site_settings/category/all_results?filter=categories.

Ce composant de thème permet également à l’administrateur du forum d’organiser sa page de catégories avec des titres d’en-tête et de choisir les catégories qui apparaissent sous chaque en-tête. Pour simplifier, je n’ai autorisé que jusqu’à 5 en-têtes. Si aucun paramètre de catégories + en-tête n’est choisi, toutes les catégories s’afficheront comme ci-dessus, c’est l’option d’affichage par défaut.

[Nerd_Alert]

Y a-t-il un moyen de faire de l’image l’arrière-plan ? Je préférerais une image aux couleurs. L’utilisation de

body {
    background-image: url("url de l'image ici");
    background-color: #cccccc;
}

fait de la partie supérieure de la couleur l’image, mais pas de la partie inférieure.

[jordan.vidrine]

Ce que vous avez fait est bien pour ajouter l’image, mais vous voudrez également supprimer le tracé de détourage qui est créé pour donner cet effet de superposition.

html .background-container {
clip-path: unset;
}