Help > Forum > Temas e Aparência > Personalizações comuns de tema CSS

Personalizações comuns de tema CSS

Estas instruções são apenas para o novos temas.

Este guia destina-se a mostrar as principais classes CSS usadas no fórum, juntamente com exemplos de como elas podem ser personalizadas. Estas instruções especifique onde você pode adicionar CSS ao seu fórum ou ao seu tema.

Para saber mais sobre CSS, experimente o Tutorial CSS W3Schools.

Corpo

Personalize toda a página do fórum usando o seletor .wt-body.

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

Fonte

Use uma fonte diferente para seu fórum colando o código da fonte do Google dentro do Código HTML da etiqueta de cabeçalho do fórum caixa de texto.

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

Em seguida, especifique sua fonte usando o seletor *.

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

Cabeçalho

Estilize o cabeçalho do seu fórum usando o seletor header.

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

Ligações

Estilize os links do seu fórum usando o seletor .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>

Avatares

Personalize como os avatares aparecem no seu fórum usando o seletor .image-wrapper.

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

Modal

Personalize como os modais / diálogos aparecem no seu fórum usando o seletor .modal-content.

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

Personalize como o título das suas caixas de diálogo modais / pop-up aparecem no seu fórum usando o seletor .modal-header.

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

Painel de slides e menu principal

Personalize como o painel de slides esquerdo e o menu principal aparecem no fórum usando o seletor #slide-panel.

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

Calendário

Personalize como o calendário aparece no fórum usando o seletor .calendar.

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

Imagem do cabeçalho

Personalize como a imagem de cabeçalho aparece em seu fórum usando o seletor .header-image.

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

Categorias e páginas de tópicos

Personalizar como a página de lista de categorias aparece no seu fórum usando o seletor .forum-list.

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

Personalizar como a página de lista de tópicos aparece no fórum usando o seletor .all-topics-list.

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

Página de listagem de postagem

Personalize como as páginas da lista de publicações aparecem no seu fórum usando o seletor #posts-list.

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

Personalize como as postagens aparecem em seu fórum usando o seletor .post-body.

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

Corpo do painel

Personalize como os painéis aparecem em seu fórum usando o seletor .content-panel.

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

Alerta

Personalize como as mensagens de alerta aparecem no fórum usando o seletor .alert.

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

Álbum

Personalize como os álbuns aparecem no seu fórum usando o seletor .album-wrapper.

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

Caixa de texto

Personalize como as caixas de texto do formulário aparecem em seu fórum usando o seletor .form-control.

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

Botão

Personalize como os botões aparecem em seu fórum usando o seletor .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>

Dropdown

Personalize como os menus suspensos aparecem no seu fórum usando o seletor .dropdown-menu.

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

Imagem do logotipo

Personalize como seu logotipo aparece em seu fórum usando o seletor #forum_logo.

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

Artigos relacionados:


If you still need help, please contact us.