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 mis en avant, la modification du style « Boîtes » et la gestion de la troncature des descriptions de catégories.
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 guidera à travers diverses options de personnalisation pour les boîtes de sous-catégories, y compris les styles pour les sujets mis en avant, le style « Boîtes » et la troncature des descriptions de catégories.
Personnalisation des boîtes avec des sujets mis en avant
Pour créer un look audaculeux et coloré pour vos boîtes de sous-catégories avec des sujets mis en avant, 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 rendre vos boîtes de sous-catégories comme ceci :
- Accédez au panneau d’administration de votre site
- Accédez à 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;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Ajustez les sélecteurs CSS et les couleurs pour correspondre aux noms de vos 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-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
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 et aux préférences de conception de votre forum.
Gestion de la troncature des descriptions de catégories
Par défaut, Discourse tronque les descriptions de catégories à 4 lignes dans les boîtes de catégories. Vous pouvez ajuster cela à l’aide de CSS personnalisé :
Pour raccourcir la description à deux lignes, ajoutez ce CSS à votre thème :
.category-boxes .description .overflow {
max-height: 3em;
}
Ajustez la valeur max-height 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, 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èmes Discourse pour une solution plus personnalisée.