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

Personalizzazioni dei temi CSS comuni

Queste istruzioni sono solo per il nuovi temi.

Questa guida ha lo scopo di mostrare le principali classi CSS utilizzate nel forum insieme ad esempi di come possono essere personalizzati. Queste istruzioni specificare dove è possibile aggiungere CSS al tuo forum o il tuo tema.

Per ulteriori informazioni sui CSS, prova il W3Schools CSS tutorial.

Corpo

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

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

Carattere

Usa un font diverso per il tuo forum incollando il codice del font di Google all'interno del Codice HTML tag Forum Head casella di testo.

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

Quindi specifica il tuo carattere usando il selettore *.

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

Intestazione

Stile intestazione del tuo forum utilizzando il selettore header.

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

Links

Lo stile dei link del tuo forum utilizzando 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>

Avatar

Personalizza come appaiono gli avatar sul tuo forum usando il selettore .image-wrapper.

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

Modale

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

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

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

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

Pannello diapositiva e menu principale

Personalizza come appare il pannello diapositiva sinistro e il menu principale sul tuo forum usando il selettore #slide-panel.

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

Calendario

Personalizza come appare il calendario sul tuo forum usando il selettore .calendar.

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

Immagine intestazione

Personalizza come appare l'immagine di intestazione sul tuo forum utilizzando il selettore .header-image.

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

Categorie e pagine tematiche

Personalizza come appare la pagina elenco categorie sul tuo forum utilizzando il selettore .forum-list.

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

Personalizzare come appare la pagina elenco argomenti sul forum utilizzando il selettore .all-topics-list.

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

Pubblica pagina di annuncio

Personalizza come appaiono le pagine di elenco dei post sul tuo forum usando il selettore #posts-list.

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

Personalizza come appaiono i post sul tuo forum usando il selettore .post-body.

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

Corpo del pannello

Personalizza come appaiono i pannelli sul tuo forum usando il selettore .content-panel.

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

Allarme

Personalizza come appaiono i messaggi di avviso sul tuo forum utilizzando il selettore .alert.

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

Album

Personalizza il modo in cui gli album appaiono sul tuo forum usando il selettore .album-wrapper.

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

Casella di testo

Personalizzare la modalità di visualizzazione delle caselle di testo del modulo sul forum utilizzando il selettore .form-control.

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

Pulsante

Personalizza il modo in cui i pulsanti appaiono sul tuo forum usando il selettore .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>

Menu a discesa

Personalizza il modo in cui i menu a discesa appaiono sul tuo forum utilizzando il selettore .dropdown-menu.

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

Immagine logo

Personalizza come appare il tuo logo sul forum usando il selettore #forum_logo.

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

Articoli correlati:


If you still need help, please contact us.