Ce guide explique comment personnaliser l’apparence des boîtes de sous-catégories dans Discourse, y compris l’ajustement des styles pour les sujets en vedette, la modification du style « Boîtes » et la gestion de la troncature des descriptions de catégorie.
Niveau d’utilisateur requis : Administrateur
Les boîtes de sous-catégories dans Discourse peuvent être personnalisées pour améliorer l’attrait visuel et l’organisation de votre forum. Ce guide vous accompagnera à travers diverses options de personnalisation pour les boîtes de sous-catégories, y compris les styles pour les sujets en vedette, le style « Boîtes » et la troncature des descriptions de catégorie.
Personnalisation des boîtes avec des sujets en vedette
Pour créer un look audacieux et coloré pour vos boîtes de sous-catégories avec des sujets en vedette, vous pouvez utiliser du CSS personnalisé. Cette méthode supprime les logos et applique des couleurs de fond distinctes à chaque sous-catégorie.
Voici comment faire en sorte que vos boîtes de sous-catégories ressemblent à ceci :
- Accédez au panneau d’administration de votre site
- Naviguez vers Personnaliser > Thèmes
- Créez un nouveau thème ou modifiez-en un existant
- Ajoutez le CSS suivant à votre thème :
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
Ajustez les sélecteurs CSS et les couleurs pour correspondre à vos noms de catégories spécifiques et à votre schéma de couleurs souhaité.
Personnalisation du style « Boîtes »
Si vous utilisez le style « Boîtes » pour les sous-catégories, vous pouvez le personnaliser de manière similaire :
Dans le CSS de votre thème, ajoutez le code suivant :
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading h3 {
color: white;
}
}
}
Encore une fois, modifiez les sélecteurs et les couleurs pour qu’ils correspondent à la structure de votre forum et à vos préférences de conception.
Gestion de la troncature des descriptions de catégorie
Par défaut, Discourse tronque les descriptions de catégorie à 4 lignes dans les boîtes de catégorie. Vous pouvez ajuster cela en utilisant du CSS personnalisé :
Pour raccourcir la description à deux lignes, ajoutez ce CSS à votre thème :
.category-boxes .description {
-webkit-line-clamp: 2;
}
Ajustez la valeur de -webkit-line-clamp pour obtenir le nombre de lignes visibles souhaité.
Considérations pour les appareils mobiles
Lorsque vous utilisez le style « Boîtes avec sous-catégories » sur ordinateur de bureau, sachez que les sujets peuvent toujours être visibles sur les appareils mobiles. Ce comportement peut être intentionnel dans la conception de Discourse pour maintenir la lisibilité sur les petits écrans.
Si vous devez ajuster la mise en page mobile, vous devrez peut-être ajouter du CSS spécifique pour les vues mobiles ou consulter un développeur de thème Discourse pour une solution plus personnalisée.
