Help > Forum > Temas e Aparência > Personalizações comuns de temas CSS
Personalizações comuns de temas CSS
Este guia tem como objetivo mostrar as principais classes CSS usadas no fórum, além de exemplos de como elas podem ser personalizadas. Essas instruções especificam onde você pode adicionar CSS ao seu fórum ou tema.
Para saber mais sobre CSS, experimente o Tutorial CSS do W3Schools.
Personalize toda a página do fórum usando o seletor .wt-body.
<style> .wt-body { background-color: skyblue; } </style>
Use uma fonte diferente para o seu fórum colando o código da fonte do Google na caixa de texto Código HTML da tag principal do fórum.
<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>
Estilize o cabeçalho do seu fórum usando o cabeçalho seletor.
<style> header { box-shadow: 0 0 30px rgba(0,0,0,0.5); } </style>
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>
Personalize como os avatares aparecem no seu fórum usando o seletor .image-wrapper.
<style> .image-wrapper { border-radius: 100%; } </style>
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 de suas caixas de diálogo modais/pop-up aparecem em seu fórum usando o seletor .modal-header.
<style> .modal-header { background: black; color: white } </style>
Personalize como o painel de slides esquerdo e o menu principal aparecem em seu fórum usando o seletor #slide -panel.
<style> #slide-panel { background-color:#00ff00 } </style>
Personalize a forma como o calendário aparece no seu fórum usando o seletor .calendar.
<style> .calendar { width: 100% !important; } </style>
Personalize como a imagem do cabeçalho aparece no seu fórum usando o seletor .header-image.
<style> .header-image { height: 185px; margin: 10px auto 20px; } </style>
Personalize como a página da lista de categorias aparece no seu fórum usando o seletor .wt-categorie.
<style> .wt-categories { width: 700px !important; margin-top: 50px; } </style>
Personalize como a página da lista de tópicos aparece em seu fórum usando o seletor .all-topics-list.
<style> .all-topics-list { width: 800px !important; } </style>
Personalize a forma como as páginas da lista de postagens 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>
Personalize como os painéis aparecem no seu fórum usando o seletor .content-panel.
<style> .content-panel { width: 70% !important; } </style>
Personalize a forma como as mensagens de alerta aparecem no seu fórum usando o seletor .alert.
<style> .alert { background: #f38282; } </style>
Personalize como os álbuns aparecem no seu fórum usando o seletor .album-wrapper.
<style> .album-wrapper { padding: 2px; border: 2px #eee solid; } </style>
Personalize como as caixas de texto do formulário aparecem no seu fórum usando o seletor .form-control.
<style> .form-control { background: #c6dede !important; color: #019c9c; } </style>
Personalize a forma como os botões aparecem no seu fórum usando o seletor .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>
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>
Personalize a forma como seu logotipo aparece no seu fórum usando o seletor #forum_logo.
<style> #forum_logo { width: 50%; margin-left: 20%; } </style>
Artigos relacionados:
- Adicionando seu próprio código CSS
- Alterando o estilo da fonte
- Alterando o tamanho do texto
- Alterando a aparência dos links do título do tópico
- Alterando a aparência dos links do título da categoria
If you still need help, please contact us.