Help > Forum > Temas y Apariencia > Personalizaciones comunes de temas CSS
Personalizaciones comunes de temas CSS
Esta guía pretende mostrar las principales clases de CSS utilizadas en el foro junto con ejemplos de cómo se pueden personalizar. Estas instrucciones especifican dónde puedes agregar CSS a tu foro o tema.
Para obtener más información sobre CSS, prueba el tutorial de CSS de W3Schools.
Personalice toda la página del foro con el selector .wt-body.
<style> .wt-body { background-color: skyblue; } </style>
Usa una fuente diferente para tu foro pegando el código de fuente de Google en el cuadro de texto Código HTML de la etiqueta principal del foro.
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
A continuación, especifique la fuente con el selector *.
<style> * { font-family: 'Lato', sans-serif; } </style>
Aplica estilo al encabezado de tu foro usando el encabezado del selector.
<style> header { box-shadow: 0 0 30px rgba(0,0,0,0.5); } </style>
Aplica estilo a los enlaces de tu foro con 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>
Personaliza la forma en que aparecen los avatares en tu foro con el selector .image-wrapper.
<style> .image-wrapper { border-radius: 100%; } </style>
Personaliza la forma en que aparecen los modales y diálogos en tu foro con el selector .modal-content.
<style> .modal .modal-content { border-radius: 20px; overflow: hidden; } </style>
Personaliza la forma en que aparecen los títulos de los cuadros de diálogo modales y emergentes en tu foro con el selector .modal-header.
<style> .modal-header { background: black; color: white } </style>
Personaliza la forma en que aparecen el panel deslizante izquierdo y el menú principal en tu foro con el selector #slide -panel.
<style> #slide-panel { background-color:#00ff00 } </style>
Personaliza la forma en que aparece el calendario en tu foro con el selector .calendar.
<style> .calendar { width: 100% !important; } </style>
Personaliza la forma en que aparece la imagen de cabecera en tu foro con el selector .header-image.
<style> .header-image { height: 185px; margin: 10px auto 20px; } </style>
Personalice la forma en que aparece la página de la lista de categorías en su foro mediante el selector .wt-categorie.
<style> .wt-categories { width: 700px !important; margin-top: 50px; } </style>
Personalice la forma en que aparece la página de la lista de temas en su foro mediante el selector .all-topics-list.
<style> .all-topics-list { width: 800px !important; } </style>
Personaliza la forma en que aparecen las páginas de la lista de publicaciones en tu foro con el selector #posts -list.
<style> #posts-list { margin: 0 auto; width: 72%; } </style>
Personaliza la forma en que aparecen las publicaciones en tu foro con el selector .post-body.
<style> .post-body { background-color: #00ff00; } </style>
Personaliza la forma en que aparecen los paneles en tu foro con el selector .content-panel.
<style> .content-panel { width: 70% !important; } </style>
Personalice la forma en que aparecen los mensajes de alerta en su foro mediante el selector .alert.
<style> .alert { background: #f38282; } </style>
Personaliza la forma en que aparecen los álbumes en tu foro con el selector .album-wrapper.
<style> .album-wrapper { padding: 2px; border: 2px #eee solid; } </style>
Personalice la forma en que aparecen los cuadros de texto de los formularios en su foro mediante el selector .form-control.
<style> .form-control { background: #c6dede !important; color: #019c9c; } </style>
Personaliza la forma en que aparecen los botones en tu foro con los selectores .btn, .btn-primary y .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>
Personaliza la forma en que aparecen los menús desplegables en tu foro con el selector .dropdown-menu.
<style> .dropdown-menu { background-color: #b4dada } .dropdown-menu a:hover { background-color: #97caca !important; } </style>
Personaliza la forma en que aparece tu logotipo en tu foro con el selector #forum_logo.
<style> #forum_logo { width: 50%; margin-left: 20%; } </style>
Artículos relacionados:
- Añadir tu propio código CSS
- Cambiar el estilo de fuente
- Cambiar el tamaño del texto
- Cambiar la apariencia de los enlaces del título del tema
- Cambiar la apariencia de los enlaces del título de la categoría
If you still need help, please contact us.