Índice de contenidos
Contenido
Esta página no pretende ser un tutorial de uso de código CSS. Aquí encontrarán ejemplos de código CSS para aplicar de una forma muy sencilla y mejorar el diseño de una página web.
Para quienes no sepan nada de CSS, vamos a enseñar como identificar elementos y donde vamos a publicar nuestro código CSS para mejorar el aspecto de nuestra página.
Donde añadir el código CSS
Para añadir el código CSS tenemos dos opciones.
Si utilizamos WordPress, lo más sencillo y seguro para no tocar nuestro tema es añadir nuestro CSS en el menú Personalizar -> CSS adicional.
Si no utilizamos WordPress, deberemos dirigirnos a la hoja de estilo de nuestro tema (style.css) y añadir ahí nuestro código. Si hacemos esto, es importante guardar siempre una copia original, por si algo sale mal.
Identificar elementos de nuestra página web
Identificar elementos nos va a venir muy bien cuando tengamos un poco de soltura con el CSS, pudiendo elegir partes de la página y probar varios diseños.
Identificar elementos es muy sencillo, haciendo click derecho en cualquier parte de la página seleccionaremos Inspeccionar elemento.
Debajo de nuestra pantalla, nos aparecerá el HTML de la página. En este texto vamos a ir buscando los elementos "class", hasta que damos con el que buscamos.
Para estar seguros, en la parte superior aparecen las medidas.
En algunos casos puede que tengamos que probar varios elementos hasta dar con el que buscamos.
Por ejemplo en la imágen mostramos inside-article, que es muy parecido a site-main, site-content o grid-content, pero más allá de esto no deberíamos tener problemas para identificarlos. En este caso, si seleccionamos grid-content, el margen superior quedará un poco más arriba del contenedor.
Códigos CSS para pegar en tu página web
Para estos códigos, no necesitamos identificar elementos, aunque si sabemos como identificarlos podemos aplicarlos a otros elementos de la página.
Podemos copiar y pegar directamente en nuestro CSS adicional o en nuestra hoja de estilos.
Crear un borde para nuestro menú principal
.menu {
border-top: 1px solid #032b64;
border-bottom: 1px solid #032b64;
}
Podemos cambiar el grosor (1px) y el color #032b64.
Crear borde para cabecera y contenedores separados
/*borde contenedor*/
.inside-article
{
border-top: 1px solid #6e93cc;
border-bottom: 1px solid #6e93cc;
border-left: 1px solid #6e93cc;
border-right: 1px solid #6e93cc;
}
/*cabecera borde inferior*/
.site-header
{
border-bottom: 1px solid #6e93cc;
}
Si lo deseamos, podemos añadir solo el del contenedor o el de la cabecera.
Para añadir un borde superior en la cabecera añadimos una linea con border-top.
Editar estilo migas de pan de Yoast SEO
.grid-container.yoast-breadcrumb
{
background-color: #fffff;
height: 20px;
max-width: ;
margin-top: 10px;
border-top: 0px solid #000;
border-bottom: 0px solid #000;
}
Podemos añadir fondo, tocar los espacios superior e inferior o añadir bordes.
En la imágen mostramos lo que hemos tocado en cada muestra.
Editar fuente y estilo Widgets WordPress
.widget-area .widget { padding-left: 10px; padding-top: 10px;padding-right: 10px;padding-bottom: 10px; font-size: 12px; border-top: 1px solid #e3ac64; border-bottom: 1px solid #e3ac64; border-left: 1px solid #e3ac64; border-right: 1px solid #e3ac64; } .widget .widget-title, .widget .widgettitle { text-align: center; font-size: 18px; color: #e3ac64;
Con este código podemos modificar las fuentes y tamaños de nuestros widgets. También podemos modificar bordes, alineación y cualquier otra cosa que necesitemos modificar.
Añadir un botón a una tabla con TablePress
.tablepress-id-1 .column-4 a {
border: 1px solid e3ac64;
margin: 0px;
line-height: 30px;
white-space: nowrap;
font-size: 12px;
font-weight: bold;
padding: 8px;
border-radius: 8px;
background-color:rgba(0,0,0,0.65);
}
Estamos añadiendo un botón a la tabla con ID: 1 en la columna 4. Si quisieramos añadir solo en una fila, añadiriamos .row a la orden. Muy útil en tablas comparativas con enlaces de afiliación.
