5 códigos CSS súper fáciles de usar para personalizar su sitio de WordPress

5 códigos CSS súper fáciles de usar para personalizar su sitio de WordPress

¡CSS es difícil!

¿Suena como algo que podrías decir? No estarías solo. CSS (o Cascading Style Sheet) es un lenguaje de programación que puede ser un bebé difícil.

Sin embargo, decir que CSS es difícil es un poco difícil. Como cualquier lenguaje, CSS puede ser un poco difícil de entender al principio, pero una vez que comprendes los conceptos básicos, las cosas comienzan a encajar.

La mejor manera de aprender CSS es comprender qué es y cómo funciona. Luego, puede aprender algunos fragmentos básicos de código para ayudarlo a comprender un poco mejor esa comprensión inicial, ¡y podrá comenzar a diseñar en poco tiempo!

Nuestra contribución hará precisamente eso.

Que es CSS

Claro, CSS significa Hoja de estilo en cascada, pero todos te lo dirán. Pero eso realmente no ayuda, ¿verdad?

No hay una forma más fácil de entender qué es.

Piense en HTML como el marco de una casa y CSS como el color exterior. Si pinta el revestimiento de la casa o mancha la terraza delantera, ¿cambia 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 CSS.

Cambia eso la apariencia Su sitio web, pero no rompe los cimientos ni la esencia del mismo.

Cada casa tiene color. Todos los temas de WordPress utilizan CSS.

Trabajan juntos para crear un sitio web, y puedes usar algunos fragmentos bastante simples de código CSS para cambiar lo que se llama el «color» de tu tema.

De hecho, es posible que se sorprenda de lo fácil que es.

CSS simple Edit One: edición de fuentes y una breve lección sobre escritura de código

Si está utilizando un tema como Genesis Framework, necesita algo de CSS para cambiar algo tan simple como eso sobre la fuente utilizada en su sitio web. Pero no se preocupe. Realmente no es tan difícil de hacer.

Para realizar cambios de CSS en su diseño, primero necesita un área de CSS personalizada para realizar esos ajustes. No cambie la hoja de estilo que está integrada en su tema.

En su lugar, use un complemento como la opción CSS personalizada cargada en Jetpack. Cualquiera de los cambios de CSS que realice allí sobrescribirá el CSS predeterminado de su tema.

Antes de poder editar la fuente, debe averiguar qué área desea editar.

Hay 7 áreas principales donde puede editar su fuente:

  • Las 6 fuentes para los títulos
  • El cuerpo escribiendo

El marcado de etiquetas para estos es simple. Por ejemplo, si tiene el Título 1 Fuente que se muestra en su sitio web, ¿usaría la etiqueta? h1. Si quisieras cambiar eso Fuente Heading 2, la etiqueta sería h2 etc.

A continuación, se muestra un ejemplo de cómo escribir código CSS para cambiar la fuente del Título 1:

 h1 { font-family: 'Georgia'; } 

Bueno, es cierto que podrías intentar copiar y pegar eso, pero quiero que comprendas mejor cómo funciona esto realmente.

La primera parte escrita (h1) es el subordinado Quieres cambiar. Este símbolo ({) abre tu línea de código y esta (}) cierra eso.

Bien bien

Esto probablemente todavía suena confuso, pero cuando estaba aprendiendo CSS, me enseñé un truco útil para ayudarme a recordar cómo escribir CSS correctamente. Me gusta esto:

h1 {abre la puerta de su armario

Buscando algo para transformar: ‘Encuentra lo que quiere’;

Y luego cierra la puerta}

De vuelta al tema; Aquí hay otro ejemplo de cómo puede realizar cambios en su fuente.

 body {
  font-family: 'Arial';
  } 

Al cambiar el elemento de h1 a body, ahora le he dicho a la hoja de estilo que quiero cambiar la fuente del cuerpo que aparece en las publicaciones y páginas a la fuente Arial.

Es bastante fácil, ¿no?

Si su tema está habilitado para Google Fonts, incluso puede usar las fuentes en su sitio web desde allí.

Fácil edición de CSS dos: edite el color de la fuente

Este pequeño truco de CSS es una buena manera de cambiar el color de la fuente de tu menú o el color de la fuente de tu cuerpo. Al igual que con los fragmentos de código escritos anteriormente, solo se necesitan unas pocas líneas de código para cambiar realmente las cosas.

Di que quiero cambiar el color del mío Título 2 Fuente a otra cosa. Puedo hacer esto siguiendo un esquema similar que hicimos antes (¿recuerdas la historia?) Pero con las líneas principales del código cambiado un poco. Me gusta esto:

 h2 { color: #4f4f4f; } 

Observe que el asunto se define como h2 y todavía tenemos las etiquetas de apertura y cierre ({}) sin embargo, el código es un poco diferente del código de cambio de fuente descrito anteriormente.

En contraste con la fuente que tuvo que cerrarse entre corchetes, (») el elemento de color hexadecimal no lo necesita.

Ahora no tiene que escribir código sobre el mismo tema una y otra vez para cambiar ciertos aspectos del mismo. Puede combinar el código para el mismo tema para que sea más fácil encontrarlo y cambiarlo en el futuro. Por ejemplo, puede combinar la fuente y el color de la fuente en la misma línea de código.

 body { font-family: 'Roboto'; color: #4f4f4f; } 

¿Ves cómo hice eso?

Tengo dos líneas de código dentro de una línea de asunto. Si necesita realizar varios cambios en un solo tema, escriba su código de una manera que le ahorrará tiempo. Solo asegúrese de cerrar cada línea de código con un punto y coma (;) antes de pasar a la siguiente línea.

Nota: Para recordar esto, piense en el punto y coma como un punto al final de su oración. Nunca terminas una oración sin un punto. Nunca terminar una línea de código es CSS sin punto y coma.

Fácil edición de CSS 3: color de fondo y una herramienta de navegador que ni siquiera sabías que tenías

Editar el color de ciertas cosas en su sitio web es otro truco CSS súper fácil. Todo lo que necesita saber es elemento o subordinado que quieres cambiar.

Una herramienta útil que muchos diseñadores, incluido yo mismo, utilizan es la herramienta Inspeccionar elemento en nuestro navegador de Google. Este también es un gran intento de encontrar el tema correcto para cambiar y definir.

Para encontrar esto, simplemente haga doble clic con el mouse para que aparezcan las opciones, como puede ver a continuación. Seleccione Verificar elemento y estará listo para buscar elementos editables en su sitio web.

Utilice la herramienta Inspeccionar elemento en Google Chrome para editar CSS

¿Ves esta imagen aquí?

Editar color con CSS

Destaqué un elemento del menú en un color diferente del resto de mi menú. Para hacer esto, utilicé mi herramienta Inspeccionar elemento para averiguar el nombre correcto para editar.

Editar el color del menú con CSS

Ahora, cuando me desplazo por los elementos del menú, el nombre del código real que se le asignó se muestra en mis aspectos destacados. El que estoy cambiando tenía el nombre: # menu-item-473 (Puede ver que este es el nombre en el cuadro amarillo. Su nombre está resaltado en azul.)

Ese es el nombre subordinado que quería cambiar. Para cambiar el color de fondo de este elemento del menú, comienzo la línea con su nombre y explico que quiero cambiar el fondo de la siguiente manera:

 #menu-item-473 { background-color: #D65050; } 

Nuevamente, comenzaré por decirle a la hoja de estilo el tema que quiero cambiar. (# elemento-menú-473) y luego le digo que cambiar (Color de fondo) y que deberías cambiar (# D65050).

Lo que sea que decida cambiar, el fondo tendrá un nombre diferente, pero afortunadamente la opción «Verificar elemento» en su navegador lo hará. Haz que encontrarlo sea mucho más fácil.

Otra gran ventaja de Google Inspect Element Tool es que puedes editar cosas en tiempo real para que todo salga bien, y luego copiar y pegar todo tu trabajo de edición desde allí en tu hoja de estilo CSS personalizada. ¡Habla de ahorrar tiempo!

Edición cuatro de CSS simple: flotante

A veces es bueno poder hacer algo diferente con su menú principal o widgets predefinidos en su sitio. Es posible que desee tomar un elemento del menú y colocarlo más a la derecha que en los otros elementos, como hice con el menú que se muestra arriba. (También se muestra en ancho completo a continuación).

Así que flota a la derecha en CSS

Puede utilizar el fragmento de código flotante para hacer esto. Como en los pasos anteriores, debe usar la herramienta Verificar elemento para encontrar el nombre del tema que desea cambiar. El que se muestra aquí es el mismo que el mencionado anteriormente. (# elemento-menú-473)

Para hacer que este elemento se mueva pero que se vea genial en una pantalla móvil, escribí este código:

#menu-item-473 { background-color: #D65050;  float: right; }

En serio, fue así de simple. Ahora tengo un elemento de menú que advierte para qué lo necesitaba. También puede aplicar esto a otras cosas que no sean los elementos de su menú.

Por ejemplo, si tiene un widget que desea reposicionar, puede flotar derecho; o Flotador izquierdo; Fragmento de código para cambiar dónde aparece su widget.

Se necesita algo de tiempo y ajustes, pero CSS se vuelve más fácil de usar cuanto más tiempo juegas con él.

Edición cinco de CSS simple: justificar el texto

Alinear tu texto es algo que puedes hacer en una publicación. Pero, ¿qué pasa con los títulos de sus widgets o algo así?

Puede utilizar este código CSS para alinear fácilmente el título del texto de su widget.

Utilizo Genesis Framework para mis sitios web y este es el código necesario para alinear los títulos de mis widgets:

.footer-widgets .widget-title { text-align: center; } 

El nombre del elemento o del tema en su tema puede ser ligeramente diferente, pero ya se hace una idea.

Este pequeño código mantendrá mi texto centrado en los títulos de mis widgets de pie de página, y cuando anuncie que .Widgets de pie junto con la .Título del widget, solo el título del pie de página con medio.

¡Eso es todo! ¡5 maneras súper fáciles de usar CSS para editar su diseño! CSS es como cualquier otro idioma. Al principio es difícil, pero una vez que has superado esa joroba inicial de comprensión, es una obviedad.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad