Help > Forum > Thèmes et apparence > Personnalisations courantes des thèmes CSS
Personnalisations courantes des thèmes CSS
Ce guide est destiné à présenter les principales classes CSS utilisées dans le forum ainsi que des exemples de la façon dont elles peuvent être personnalisées. Ces instructions indiquent où vous pouvez ajouter du CSS à votre forum ou à votre thème.
Pour en savoir plus sur le CSS, essayez le didacticiel CSS de W3Schools.
Personnalisez l'ensemble de votre page de forum à l'aide du sélecteur .wt-body.
<style> .wt-body { background-color: skyblue; } </style>
Utilisez une police différente pour votre forum en collant le code de police Google dans la zone de texte Code HTML de la balise d'en-tête du forum.
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Spécifiez ensuite votre police à l'aide du sélecteur *.
<style> * { font-family: 'Lato', sans-serif; } </style>
Personnalisez l'en-tête de votre forum à l'aide du sélecteur d'en-tête.
<style> header { box-shadow: 0 0 30px rgba(0,0,0,0.5); } </style>
Personnalisez les liens de votre forum à l'aide du sélecteur .wt-body a.
<style> .wt-body a { font-weight: bold; } .wt-body a:hover { text-decoration: underline; } .wt-body a { color: #222 !important; } .wt-body a:visited { color: #555 !important; } </style>
Personnalisez la façon dont les avatars apparaissent sur votre forum en utilisant le sélecteur .image-wrapper.
<style> .image-wrapper { border-radius: 100%; } </style>
Personnalisez la façon dont les modaux/boîtes de dialogue apparaissent sur votre forum à l'aide du sélecteur .modal-content.
<style> .modal .modal-content { border-radius: 20px; overflow: hidden; } </style>
Personnalisez la façon dont le titre de vos modaux/boîtes de dialogue contextuelles apparaît sur votre forum en utilisant le sélecteur .modal-header.
<style> .modal-header { background: black; color: white } </style>
Personnalisez la façon dont le panneau coulissant de gauche et le menu principal apparaissent sur votre forum à l'aide du sélecteur #slide -panel.
<style> #slide-panel { background-color:#00ff00 } </style>
Personnalisez l'affichage du calendrier sur votre forum à l'aide du sélecteur .calendar.
<style> .calendar { width: 100% !important; } </style>
Personnalisez l'affichage de l'image d'en-tête sur votre forum à l'aide du sélecteur .header-image.
<style> .header-image { height: 185px; margin: 10px auto 20px; } </style>
Personnalisez l'affichage de la page de liste des catégories sur votre forum à l'aide du sélecteur .wt-categorie.
<style> .wt-categories { width: 700px !important; margin-top: 50px; } </style>
Personnalisez l'affichage de la page de liste des sujets sur votre forum à l'aide du sélecteur .all-topics-list.
<style> .all-topics-list { width: 800px !important; } </style>
Personnalisez la façon dont les pages de la liste des articles apparaissent sur votre forum à l'aide du sélecteur #posts -list.
<style> #posts-list { margin: 0 auto; width: 72%; } </style>
Personnalisez la façon dont les publications apparaissent sur votre forum à l'aide du sélecteur .post-body.
<style> .post-body { background-color: #00ff00; } </style>
Personnalisez la façon dont les panneaux apparaissent sur votre forum à l'aide du sélecteur .content-panel.
<style> .content-panel { width: 70% !important; } </style>
Personnalisez l'affichage des messages d'alerte sur votre forum à l'aide du sélecteur .alert.
<style> .alert { background: #f38282; } </style>
Personnalisez l'affichage des albums sur votre forum à l'aide du sélecteur .album-wrapper.
<style> .album-wrapper { padding: 2px; border: 2px #eee solid; } </style>
Personnalisez l'affichage des zones de texte des formulaires sur votre forum à l'aide du sélecteur .form-control.
<style> .form-control { background: #c6dede !important; color: #019c9c; } </style>
Personnalisez l'affichage des boutons sur votre forum à l'aide des sélecteurs .btn, .btn-primary et .btn-subtle.
<style> .btn { border-color: #d07c73 !important; background-color: #397373 !important; color: #242727 !important; } .btn-primary { border-color: #39d84f !important; background-color: #386f6f !important; color: #0d2b2b !important; } .btn-subtle { border-color: #969291 !important; background-color: #1bf9f9 !important; color: #4b5252 !important; } </style>
Personnalisez l'affichage des menus déroulants sur votre forum à l'aide du sélecteur .dropdown-menu.
<style> .dropdown-menu { background-color: #b4dada } .dropdown-menu a:hover { background-color: #97caca !important; } </style>
Personnalisez l'affichage de votre logo sur votre forum à l'aide du sélecteur #forum_logo.
<style> #forum_logo { width: 50%; margin-left: 20%; } </style>
Articles connexes :
- Ajouter votre propre code CSS
- Modifier le style de police
- Modifier la taille du texte
- Modification de l'apparence des liens vers les titres des sujets
- Modification de l'apparence des liens vers les titres des catégories
If you still need help, please contact us.