Help > Forum > Thèmes et apparence > Personnalisations de thèmes CSS courants

Personnalisations de thèmes CSS courants

Ces instructions sont uniquement pour le nouveaux thèmes.

Ce guide est destiné à montrer 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 spécifiez où vous pouvez ajouter du CSS à votre forum ou à votre thème.

Pour en savoir plus sur CSS, essayez le Tutoriel CSS W3Schools.

Corps

Personnalisez l'ensemble de votre page de forum en utilisant le sélecteur .wt-body.

<style>
.wt-body {
    background-color: skyblue;
}
</style>

Police

Utilisez une police différente pour votre forum en collant le code de la police Google dans le Code HTML de la balise de tête de forum zone de texte.

<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>

En-tête

Stylez l'en-tête de votre forum à l'aide du sélecteur header.

<style>
header {
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
</style>

Liens

Stylisez les liens de votre forum en utilisant le 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>

Avatars

Personnaliser l'affichage des avatars sur votre forum à l'aide du sélecteur .image-wrapper.

<style>
.image-wrapper {
    border-radius: 100%;
}
</style>

Modal

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 dialogues modaux/popup apparaît sur votre forum à l'aide du sélecteur .modal-header.

<style>
.modal-header {
    background: black;
    color: white
}
</style>

Panneau de diapositives et menu principal

Personnalisez la façon dont le panneau de diapositive gauche et le menu principal apparaissent sur votre forum à l'aide du sélecteur #slide-panel.

<style>
#slide-panel {
    background-color:#00ff00
}
</style>

Calendrier

Personnalisez l'affichage du calendrier sur votre forum à l'aide du sélecteur .calendar.

<style>
.calendar {
    width: 100% !important;
}
</style>

Image d'en-tête

Personnaliser 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>

Catégories et pages de sujets

Personnaliser la façon dont la page de liste des catégories apparaît sur votre forum à l'aide du sélecteur .forum-list.

<style>
.wt-categories {
    width: 700px !important;
    margin-top: 50px;
}
</style>

Personnalisez la façon dont la page de liste des rubriques apparaît sur votre forum à l'aide du sélecteur .all-topics-list.

<style>
.all-topics-list {
    width: 800px !important;
}
</style>

Publier la page d'annonce

Personnalisez la façon dont les pages de liste des publications apparaissent sur votre forum à l'aide du sélecteur #posts-list.

<style>
#posts-list {
    margin: 0 auto;
    width: 72%;
}
</style>

Personnaliser la façon dont les publications apparaissent sur votre forum à l'aide du sélecteur .post-body.

<style>
.post-body {
    background-color: #00ff00;
}
</style>

Corps du panneau

Personnaliser l'affichage des panneaux sur votre forum à l'aide du sélecteur .content-panel.

<style>
.content-panel {
    width: 70% !important;
}
</style>

Alerte

Personnaliser l'affichage des messages d'alerte sur votre forum à l'aide du sélecteur .alert.

<style>
.alert {
    background: #f38282;
}
</style>

Album

Personnaliser l'affichage des albums sur votre forum à l'aide du sélecteur .album-wrapper.

<style>
.album-wrapper {
    padding: 2px;
    border: 2px #eee solid;
}
</style>

Zone de texte

Personnaliser la façon dont les zones de texte de formulaire apparaissent sur votre forum à l'aide du sélecteur .form-control.

<style>
.form-control {
    background: #c6dede !important;
    color: #019c9c;
}
</style>

Bouton

Personnaliser l'affichage des boutons sur votre forum à l'aide du sélecteur .btn, .btn-primary, and .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>

Liste déroulante

Personnaliser 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>

Image du logo

Personnalisez la façon dont votre logo apparaît sur votre forum en utilisant le sélecteur #forum_logo.

<style>
#forum_logo {
    width: 50%;
    margin-left: 20%;
}
</style>

Articles connexes :


If you still need help, please contact us.