Help > Forum > Temas y Apariencia > Personalizaciones comunes de temas CSS

Personalizaciones comunes de temas CSS

Estas instrucciones son sólo para el nuevos temas.

Esta guía está pensada para mostrar las principales clases CSS utilizadas en el foro junto con ejemplos de cómo se pueden personalizar. Estas instrucciones especifique dónde puede agregar CSS a su foro o a su tema.

Para obtener más información sobre CSS, pruebe la Tutorial de CSS de W3Schools.

Cuerpo

Personalice toda la página del foro mediante el selector .wt-body.

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

Tipo de letra

Utiliza una fuente diferente para tu foro pegando el código de la fuente de Google dentro de la Código HTML de la etiqueta de la cabeza del foro cuadro de texto.

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

Luego especifique su fuente usando el selector *.

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

Encabezado

Estile el encabezado de su foro mediante el selector header.

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

Enlaces

Estile los enlaces de su foro utilizando el selector .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

Personalice cómo aparecen los avatares en su foro mediante el selector .image-wrapper.

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

Modal

Personalice cómo aparecen los modales y diálogos en su foro utilizando el selector .modal-content.

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

Personaliza cómo el título de tus modales / diálogos emergentes aparecen en tu foro usando el selector .modal-header.

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

Panel deslizante y menú principal

Personalice cómo aparecen en el foro el panel de diapositivas izquierdo y el menú principal utilizando el selector #slide-panel.

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

Calendario

Personalice cómo aparece el calendario en su foro mediante el selector .calendar.

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

Imagen de encabezado

Personalice cómo aparece la imagen de encabezado en su foro mediante el selector .header-image.

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

Categorías y páginas temáticas

Personalice cómo aparece la página de lista de categorías en el foro mediante el selector .forum-list.

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

Personalice cómo aparece la página de la lista de temas en el foro mediante el selector .all-topics-list.

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

Página de publicación

Personalice cómo aparecen las páginas de la lista de publicaciones en su foro mediante el selector #posts-list.

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

Personaliza cómo aparecen las publicaciones en tu foro mediante el selector .post-body.

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

Cuerpo del panel

Personalice cómo aparecen los paneles en el foro mediante el selector .content-panel.

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

Alerta

Personalice cómo aparecen los mensajes de alerta en su foro mediante el selector .alert.

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

Álbum

Personaliza cómo aparecen los álbumes en el foro mediante el selector .album-wrapper.

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

Cuadro de texto

Personalice cómo aparecen los cuadros de texto de formulario en el foro mediante el selector .form-control.

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

Botón

Personalice cómo aparecen los botones en el foro mediante el selector .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>

Lista desplegable

Personalice cómo aparecen los menús desplegables en el foro mediante el selector .dropdown-menu.

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

Imagen del logotipo

Personalice cómo aparece su logotipo en su foro utilizando el selector #forum_logo.

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

Artículos relacionados:


If you still need help, please contact us.