Help > Forum > Temi & Aspetto > Personalizzazioni comuni dei temi CSS

Personalizzazioni comuni dei temi CSS

Questa guida ha lo scopo di mostrare le principali classi CSS utilizzate nel forum insieme ad esempi di come possono essere personalizzate. Queste istruzioni specificano dove puoi aggiungere CSS al tuo forum o al tuo tema.

Per saperne di più sui CSS, prova il tutorial CSS di W3Schools.

Personalizza l'intera pagina del forum usando il selettore .wt-body.

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

Usa un font diverso per il tuo forum incollando il codice di Google Font nella casella di testo Forum Head Tag HTML Code.

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Quindi specifica il carattere utilizzando il selettore *.

<style>
* {
    font-family: 'Lato', sans-serif;
}
</style>

Definisci lo stile dell'intestazione del forum utilizzando l'intestazione del selettore.

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

Dai uno stile ai link del tuo forum usando il selettore .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>

Personalizza l'aspetto degli avatar sul tuo forum utilizzando il selettore .image-wrapper.

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

Personalizza il modo in cui le modali/le finestre di dialogo appaiono sul tuo forum utilizzando il selettore .modal-content.

<style>
.modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}
</style>

Personalizza il modo in cui il titolo delle tue finestre di dialogo modali/popup appare sul tuo forum usando il selettore .modal-header.

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

Personalizza l'aspetto del pannello di scorrimento sinistro e del menu principale sul tuo forum usando il selettore #slide -panel.

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

Personalizza l'aspetto del calendario sul tuo forum utilizzando il selettore .calendar.

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

Personalizza l'aspetto dell'immagine dell'intestazione sul tuo forum utilizzando il selettore .header-image.

<style>
.header-image {
    height: 185px;
    margin: 10px auto 20px;
}
</style>

Personalizza l'aspetto della pagina dell'elenco delle categorie sul tuo forum utilizzando il selettore .wt-categorie.

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

Personalizza l'aspetto della pagina dell'elenco degli argomenti sul tuo forum utilizzando il selettore .all-topics-list.

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

Personalizza l'aspetto delle pagine dell'elenco dei post sul tuo forum utilizzando il selettore #posts -list.

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

Personalizza la modalità di visualizzazione dei post sul tuo forum utilizzando il selettore .post-body.

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

Personalizza l'aspetto dei pannelli sul tuo forum utilizzando il selettore .content-panel.

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

Personalizza la modalità di visualizzazione dei messaggi di avviso sul tuo forum utilizzando il selettore .alert.

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

Personalizza la modalità di visualizzazione degli album sul tuo forum utilizzando il selettore .album-wrapper.

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

Personalizza l'aspetto delle caselle di testo dei moduli sul tuo forum utilizzando il selettore .form-control.

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

Personalizza la modalità di visualizzazione dei pulsanti sul tuo forum utilizzando i selettori .btn, .btn-primary e .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>

Personalizza la modalità di visualizzazione dei menu a discesa sul tuo forum utilizzando il selettore .dropdown-menu.

<style>
.dropdown-menu {
    background-color: #b4dada
}
.dropdown-menu a:hover {
    background-color: #97caca !important;
}
</style>

Personalizza l'aspetto del tuo logo sul forum utilizzando il selettore #forum_logo.

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

Articoli correlati:


If you still need help, please contact us.