5 códigos CSS súper sencillos para ayudarte a personalizar tu sitio de WordPress
¡El CSS es difícil!
¿Suena como algo que podrías decir? No estarías solo. CSS (o Cascading Style Sheet) es un lenguaje de codificación que puede ser un bebé difícil de manejar.
Sin embargo, decir que CSS es difícil es un poco duro. Como cualquier lenguaje, CSS puede ser un poco difícil de entender al principio, pero una vez que entiendas lo básico, las cosas empiezan a encajar.
La mejor manera de aprender CSS es entender qué es y cómo funciona. A continuación, puede aprender algunos fragmentos de código básico para ayudarle a comprender un poco más esa comprensión inicial y estará diseñando en poco tiempo.
Nuestro post va a hacer precisamente eso.
¿Qué es CSS?
Claro, CSS significa Hoja de Estilo en Cascada, pero todo el mundo le dirá eso. Sin embargo, eso no ayuda realmente, ¿verdad?
Hay alguna manera más fácil de entender lo que es.
Piensa en HTML como el marco de una casa, y en CSS como la pintura del exterior. Cuando se pintan las molduras de la casa, o se tiñe la cubierta delantera, ¿cambia eso el marco de la casa en sí?
No, no lo hace. En cambio, simplemente cambia la apariencia de las cosas. Los cimientos y el marco de la casa siguen siendo los mismos.
Esto es lo que es el CSS.
Altera la apariencia de su sitio, pero no altera los cimientos o el núcleo del mismo.
Todas las casas tienen pintura. Cada tema de WordPress utiliza CSS.
Trabajan juntos para crear un sitio web y usted puede utilizar algunos fragmentos de código CSS bastante simples para cambiar la llamada «pintura» de su tema.
De hecho, usted podría sorprenderse de lo fácil que es.
Simple CSS Edit One: Editing Font Type And A Quick Lesson On Writing Code
Cuando se utiliza un tema como el Genesis Framework, cambiar algo tan simple como la fuente utilizada en su sitio necesita algo de CSS. Pero no te preocupes. Realmente no es tan difícil de hacer.
Para hacer cualquier cambio de CSS en tu tema, primero necesitarás un área de CSS personalizada para hacer estos ajustes. No alteres la hoja de estilos que viene incorporada en tu tema.
En su lugar, utiliza un plugin como la opción de CSS personalizado que viene cargado en Jetpack. Cualquiera de sus alteraciones CSS que usted hace en allí anulará el CSS predeterminado de su tema.
Antes de que pueda editar la fuente, necesita averiguar qué área desea editar.
Hay 7 áreas principales que puede editar su fuente:
- Todos los 6 tipos de fuentes de encabezado
- La fuente del cuerpo
El marcado de etiquetas para estos es simple. Por ejemplo, si quiere editar la fuente del Título 1 que aparece en su sitio, debe utilizar la etiqueta h1. Si quieres cambiar la fuente del Título 2, la etiqueta sería, h2 y así sucesivamente.
Aquí tienes un ejemplo de cómo escribir el código CSS para cambiar tu fuente del Título 1:
h1 { font-family: 'Georgia'; }
Ahora es cierto, podrías intentar copiar y pegar eso, pero quiero que entendáis mejor cómo funciona esto realmente.
La primera parte escrita (h1) es el tema que deseas cambiar. Este símbolo ({ ) abre tu línea de código y este otro ( } ) la cierra.
Bien, de acuerdo.
Esto probablemente siga sonando confuso, pero cuando estaba aprendiendo CSS me enseñé un práctico truco para recordar cómo escribir CSS correctamente. Así:
h1 { abre la puerta de su armario
En busca de algo para cambiarse:
Encuentra lo que quiere;
Y luego cierra la puerta}
Volviendo al tema; aquí hay otro ejemplo de cómo puedes hacer cambios en tu fuente.
body { font-family: 'Arial'; }
Al cambiar el elemento de h1 a body, ahora le he dicho a la Hoja de Estilos que quiero cambiar la fuente del cuerpo que se muestra en los posts y páginas a la fuente Arial.
Eso es bastante simple ¿verdad?
Si su tema está habilitado para Google Font, incluso puede utilizar las fuentes de allí en su sitio también.
Simple CSS Edit Two: Edit Font Color
Este pequeño truco CSS es una buena manera de cambiar el color de su fuente de menú o el color de la fuente del cuerpo. Al igual que los fragmentos de código escritos anteriormente, todo lo que se necesita es un par de líneas cortas de código para cambiar realmente las cosas.
Supongamos que quiero cambiar el color de mi fuente Heading 2 a algo diferente. Puedo hacerlo siguiendo un esquema similar al que hicimos antes (¿recuerdas la historia?) pero con las principales líneas de código cambiadas un poco. Así:
h2 { color: #4f4f4f; }
Nota que el asunto se define como h2 y todavía tenemos las etiquetas de apertura y cierre ({}), sin embargo, la forma en que se escribe el código es un poco diferente de la anterior cuando escribimos el código para un cambio de fuente.
A diferencia de la fuente que necesitaba ser cerrada por paréntesis, (‘ ‘) el elemento de color hexadecimal no necesita eso.
Ahora, no necesitas escribir código para el mismo tema una y otra vez para cambiar ciertos aspectos del mismo. Usted puede combinar el código para ese mismo tema para hacer las cosas más fáciles de encontrar y cambiar en el futuro. Por ejemplo, puede combinar Fuente y Color de Fuente en la misma línea de código.
body { font-family: 'Roboto'; color: #4f4f4f; }
¿Ve cómo lo he hecho?
Tengo dos líneas de código dentro de la línea de ese tema. Cuando necesites hacer varios cambios en un solo asunto, escribir el código de esta manera te ahorrará tiempo. Sólo asegúrese de cerrar esas líneas individuales de código con un punto y coma (;) antes de pasar a la siguiente línea.
nota: para ayudar a recordar esto, piense en el punto y coma como un punto al final de la frase. Nunca se termina una frase sin un punto. Nunca termine una línea de código es CSS sin un punto y coma.
Simple CSS Editar Tres: Color de fondo, y una herramienta del navegador que ni siquiera sabías que tenías
Editar el color de ciertas cosas en tu sitio es otro truco CSS súper fácil. Todo lo que necesitas saber es el elemento o tema que te gustaría cambiar.
Una herramienta útil que muchos diseñadores utilizan -yo incluido- es la herramienta Inspeccionar elemento en nuestro navegador de Google. Este es un impresionante también para tratar de encontrar el tema correcto para cambiar y definir.
Para encontrar que, simplemente haga doble clic en el ratón para sacar las opciones como se puede ver a continuación. Seleccione Inspeccionar elemento, y ahora puede buscar sus sitios web elementos editables.
¿Ve esta imagen aquí?
Tengo un elemento de menú resaltado en un color diferente del resto de mi menú para destacar. Para ello, he utilizado mi herramienta de inspección de elementos para averiguar el nombre correcto para mí para editar.
Ahora como me desplazo sobre los elementos de menú, el nombre de código real que se le da se mostrará en mis destacados. El que cambio tenía el nombre de: #menu-item-473 (Puede ver que ese es el nombre en el cuadro amarillo. Su nombre está resaltado en azul.)
Ese es el nombre del tema que quería cambiar. Para cambiar el color de fondo de ese elemento de menú, empiezo la línea con su nombre y declaro que quiero cambiar el fondo, así:
#menu-item-473 { background-color: #D65050; }
De nuevo, empiezo diciéndole a la Hoja de Estilo el tema que quiero cambiar (#menu-item-473) y luego le digo qué cambiar (color de fondo) y a qué cambiarlo (#D65050).
Cualquier cosa que decidas cambiar el fondo tendrá un nombre diferente a este, pero afortunadamente, la opción de Inspección de Elementos en tu navegador hará que encontrarlo sea mucho más fácil.
Otra cosa impresionante sobre la Herramienta de Inspección de Elementos de Google es que puedes editar las cosas en tiempo real para hacer las cosas bien, y luego puedes copiar y pegar todo tu trabajo de edición desde allí, en tu Hoja de Estilo Personalizada CSS. Hablando de ahorro de tiempo!
Simple CSS Editar cuatro: Float
A veces, es agradable ser capaz de hacer algo un poco diferente con su menú principal o widgets predefinidos en su sitio. Tal vez le gustaría tomar, un elemento de menú y colocarlo más a la derecha que en los otros elementos de tipo de lo que hice con el menú de la foto de arriba. (También se muestra a continuación en el ancho completo.)
Para hacer esto, usted puede utilizar el fragmento de código Float para hacer precisamente eso. Al igual que los pasos anteriores, debe utilizar la herramienta Inspeccionar elemento para encontrar el nombre del tema que desea cambiar. El que se muestra aquí es el mismo que el mencionado anteriormente. (#menu-item-473)
Para conseguir que este elemento se mueva, pero que siga viéndose bien en una pantalla de móvil, este es el código que escribí:
#menu-item-473 { background-color: #D65050; float: right; }
En serio fue así de fácil. Ahora tengo un elemento de menú que se destaca, que lo que necesitaba hacer. También se puede aplicar esto a las cosas que no sean sus elementos de menú.
Por ejemplo, si usted tiene un widget que le gustaría cambiar la posición, usted puede podría utilizar el flotador: derecha; o flotador: izquierda; fragmento de código para cambiar donde el su widget es display.
Se necesita algo de tiempo y ajuste, pero CSS se hace más fácil de usar cuanto más tiempo te metes con él.
Simple CSS Editar cinco: Alineación de texto
Alinear tu texto es algo que puedes hacer en un post, seguro. Pero ¿qué pasa con los títulos de su widget, o algo por el estilo?
Puede utilizar este código CSS para alinear fácilmente el título del texto de su widget.
Utilizo el Genesis Framework para mis sitios web, y este es el código que tomó para alinear los títulos de mis widgets:
.footer-widgets .widget-title { text-align: center; }
El elemento o el nombre del tema en su tema puede diferir ligeramente de esto, pero usted consigue la idea.
Este pequeño código mantendrá mi texto en los títulos de mis widgets de pie de página centrados, y como proclamo el .footer-widgets junto con el .widget-title, sólo los títulos de pie de página con el centro.
¡Así que eso es todo! ¡5 formas súper sencillas en las que puedes editar tu tema usando CSS! CSS es como cualquier otro lenguaje. Es difícil al principio, pero una vez que superas esa joroba inicial de entender, es una brisa.