5 personalizaciones CSS rápidas y fáciles de usar para principiantes que hacen que tu blog destaque

En este tutorial, cubriremos cómo hacer cinco personalizaciones rápidas de CSS que hagan que tu blog destaque. Aunque no sepas qué es CSS, podrás seguir las instrucciones y cambiar el aspecto estándar de tu tema.

Antes de empezar, necesitas...

• un tema con opciones CSS personalizadas
• o un plugin CSS personalizado
• o un tema hijo

Si aún no sabes cómo, te mostraré cómo encontrar y montar estas cosas. De esta manera puedes editar con seguridad el diseño de tu sitio web o blog. Si tu sitio web ya está publicado y recibiendo tráfico, puede ser una buena idea usar un plugin "down for maintenance" para que los visitantes no se confundan con el siempre cambiante diseño.

Otra alternativa sería establecer un entorno de desarrollo en tu máquina local, y luego subir los cambios al servidor una vez que se hayan completado.

En última instancia, depende de ti.

Las opciones de tu tema

Algunos temas ya tienen la opción de anular partes de la hoja de estilos CSS, lo que permite crear tu propio diseño sin necesidad de instalar plugins adicionales o crear un tema hijo. Esto se puede encontrar en los menús Appearance (Apariencia) > Theme Options (Opciones de temas).

A veces está en una de las subcategorías, pero busca una caja que tenga "Editar CSS" como titular.

Plugins CSS personalizados

Si tu tema no tiene tal opción, el plugin Jetpack viene con una función de editor de CSS, pero para usarlo, tienes que conectar el plugin con tu cuenta de WordPress.com, o crear una nueva.

Guarda tus revisiones, lo que facilita volver a un diseño anterior si sientes que te has equivocado en algún punto del camino, pero si no te interesan las otras funciones del plugin Jetpack, una alternativa más rápida sería el sencillo plugin CSS personalizado.

Una vez que hayas instalado y activado el plugin, puedes editar el css desde Appearance (Apariencia)> custom css (css personalizado). (En Jetpack, se encuentra en la opción de menú Appearance (Apariencia) > Edit CSS (Editar CSS)).

Hacer un tema hijo

Si estás preparado para hacer grandes cambios, la mejor idea es crear un tema hijo. El problema de la personalización a través de la anulación es que se obtienen líneas de código superfluas, y para una edición extensiva puede hacer que el blog o el sitio web se cargue más lentamente.

Además, es mucho más fácil llevar un registro de las cosas cuando editas el código en un lugar. Puedes usar un plugin como Orbisius Child Theme Creator o duplicar el tema para crear instantáneamente un tema hijo.

Alternativamente, puedes crear una nueva carpeta temática, llamarla THEMENAME hijo, crear style.css en la nueva carpeta temática e importar la hoja de estilos principal. (THEMENAME debe ser reemplazado por el tema que quieres editar).

1

@import url("../THEMENAME/style.css");

Para más información sobre cómo crear un tema hijo, puedes consultar nuestra guía. Ahora que está todo listo, es hora de empezar a ensuciarse las manos. Vamos a empezar con algo muy básico: cambiar el fondo de tu blog/sitio web. También te mostraré cómo añadir una imagen de fondo con estilo.

Cambiando el color de fondo

Para cambiar el fondo de tu sitio web, primero tienes que familiarizarte con el estilo del tema. ¿El color de fondo está simplemente debajo del cuerpo, o está incorporado en su propio marco?

Algunos temas no son tan intuitivos como otros, por lo que si el que está usando actualmente es inteligente, puede que quieras cambiar a un tema diferente antes de empezar a editar. (El que estoy usando en el ejemplo es el Catchbox Theme gratuito y un tema de inicio muy común es el veintisiete).

En la mayoría de los temas que no son de ancho completo, el color de fondo es simplemente debajo del cuerpo. Y anularlo es bastante simple.

1

body {

2

  background-color: #477C67;

3

}

Puedes usar el selector de colores HTML de W3Schools para obtener tus colores, o instalar una extensión de Chrome, un plugin de Firefox o un plugin de WordPress para acelerar las cosas cuando estés editando sobre la marcha.

Elegí un color de fondo verde azulado: #477C67

Si este fragmento de código no cambia el color de fondo de tu blog, es probable que utilice contenedores vacíos estilizados para llenar el fondo.

Si quieres poner una imagen como fondo, primero sube la foto. Asegúrate de que sea de alta resolución, de lo contrario no se verá muy bien. Luego copia la URL. Solo necesitas la parte después del blog, así que si subiste el archivo a través de WordPress, la ruta debería ser algo así: "wp-content/uploads/2014/01/IMAGE.jpg"

1

body {

2

  background: url(location/img.jpg) no-repeat center center fixed; 

3

  -webkit-background-size: cover;

4

  -moz-background-size: cover;

5

  -o-background-size: cover;

6

  background-size: cover;

7

}

El resultado final debería ser algo como esto:

Lo genial es que la imagen permanece estática incluso cuando te desplazas por la página. Para obtener fotos geniales que puedes usar sin dar crédito (aunque probablemente sea bienvenido), puedes visitar unsplash.com.

Mejorando la legibilidad

A veces te tropiezas con un gran tema. Parece increíble, pero solo hay un problema. La fuente es pequeña y gris, así que es casi ilegible. Pero no te preocupes, puedes cambiar esto en un simple paso.

1

body {

2

  font-size: 16px;

3

  color:#000

4

}

Añade este pequeño fragmento de código al CSS personalizado, y arreglará el problema. (Ponlo después del código sobre el fondo si ha cambiado el tuyo.)

Un buen tamaño para la fuente estándar de tu sitio web o blog es de 14-16 píxeles. Evita los 12 píxeles que eran obligatorios en, digamos, los informes escolares, ya que tu principal objetivo no es ahorrar papel. Quieres que tu contenido respire, y que sea más legible. Si sientes que la fuente estándar de tu tema no es profesional, puedes añadir esta línea:

1

body {

2

  font-family: Arial, Helvetica, sans-serif;

3

}

Haciendo que todo se vea así:

1

body {

2

  font-family: Arial, Helvetica, sans-serif;

3

  font-size: 16px;

4

  color:#000

5

}

Cambiar el aspecto de los enlaces

Si quieres cambiar el color de los enlaces, puedes hacerlo fácilmente. Todo lo que tienes que hacer es usar el parámetro para los enlaces en css "a" y luego cambiar el color a lo que quieras.

1

a {

2

	color: #BA2323;

3

}

Decidí ir a por un rojo (#BA2323) y acabó quedando así.

Hay un par de opciones más sobre cómo quieres estilizar tus enlaces. Por ejemplo, puedes decidir cómo quieres que reaccione el enlace cuando alguien se pase sobre él. El más común es el subrayado, pero podrías hacer que cambie su color primario o el color de fondo.

1

a:hover {

2

  color: #222;

3

  background-color:#BA2323; 

4

}

Por ejemplo, cambiando el texto a gris, y cambiando el color de fondo al color habitual del texto. Luego puedes cambiar el estilo de los enlaces visitados. Lo más común es que haya un cambio de color, pero también puedes usar cualquiera de los cambios anteriores.

1

a:visited {

2

  color: #004A4A;

3

}

Cambiar el aspecto de los titulares

El titular de un post suele estar en un elemento h1, y el subtítulo utilizado dentro de los posts suele estar en un elemento h2 (aunque esto es algo que tu mismo elijes al crear un post). Pero si tu tema estiliza específicamente el color de los títulos de las publicaciones, cambiar el estilo de las etiquetas h1 no ayudará. Así que tienes que averiguar si el tema que usas hace esto o no.

Puedes comprobar si tu tema utiliza o no un estilo específico para los títulos de las publicaciones abriendo la fuente de la página y buscando (pulsa Control-F) el "título de la publicación". Si los resultados muestran "<h1 style=''some-style''></h1>'', entonces no se utiliza el estilo h1, tienes que proporcionar el estilo en el atributo ''some-style''

Alternativamente, si vas a hacer varios cambios, puedes instalar una extensión del navegador que te muestre el estilo CSS del texto seleccionado. Típicamente será "entry-title" ya que es el estándar para el desarrollo de WordPress.

Para ello, ve al Editor en el menú de Apariencia y busca "some-style (algún estilo)". Como mencioné, ese estilo suele ser "entry-title (entrada-título)". Luego ve qué líneas necesitas anular. A veces, hay un estilo específico para el título enlazado, así que puede que tengas que cambiarlo también. Esto se muestra como "h1 a {" o "some-style a { (algún estilo a {)".

Para editar el color y el tamaño de mi titular, tendría que añadir estas líneas:

1

.entry-title {

2

	color: #WANTEDCOLOR;

3

	font-size: WANTEDSIZEpx;

4

}

5

6

.entry-title a {

7

	color: #WANTEDCOLOR;

8

}

Elegí un azul claro (#5CBDBD).

Por favor, ten en cuenta que estoy usando colores bastante llamativos para hacer obvio los cambios que he hecho en el tema. Probablemente quieras ser un poco más sutil y encontrar una mejor combinación de colores.

Si quieres editar el estilo de los titulares que usas en tu contenido, entonces en lugar de .some-style, abres con h1{} o h2{} o h3{}.

Redondeando y aplanando las esquinas

Si hay algunas esquinas molestas que crees que deberían ser redondeadas, o algunas que han sido redondeadas demasiado, aquí tienes una solución rápida.

Localiza el estilo del contenedor en cuestión en la hoja de estilo original. (Abre la hoja de estilo original dentro del tablero de WordPress, o en un archivo de texto y luego busca algún texto que sea exclusivo del contenedor que quieres editar. O puedes usar un plugin). Los widgets suelen estar bajo .widget, y el contenedor del post suele estar bajo contenido.

El código a usar aquí es:

1

	-moz-border-radius: SIZEpx;

2

	border-radius: SIZEpx;

Si quieres anular una esquina curva actual y hacerla plana, simplemente pon el tamaño a 0. Si quieres ver cómo se ven las curvas para un contenedor en particular, empieza con 5 y mira cómo se ve.

Por lo general, puedes buscar en la página si quieres editar las esquinas de toda la página. Por lo general, puedes encontrar el contenedor de contenido buscando por .hentry si quieres editar las esquinas del contenido. Puede que tengas que editar el encabezado y el pie de página por separado. O encontrar el widget buscando el widget.

Cambiar el esquema de color de los widgets

Una de las formas más sencillas de configurar una combinación de colores geniales para tus widgets es tener un color de fondo diferente para el propio widget que para el título del mismo. Lo haces identificando la clase de estilo del título del widget. (Si no recuerdas cómo, copia el título de un widget y búscalo en la fuente de la página. En la leyenda h1 alrededor del título, la clase se revela).

Tiende a ser simplemente un widget-title. Y si quieres cambiar el color de fondo del propio widget, encuentra el estilo del mismo, que suele estar bajo .widget. Entonces escoge un color y añade este código a tu css personalizado o tema hijo:

1

2

.widget {

3

  background: #COLOR;

4

}

5

.widget-title {

6

  background-color: #COLOR;

7

}

Elegí naranja y cerceta sin ninguna razón en particular. Como puedes ver, si no hay título, no incluye la parte del título de la combinación de colores, así que si quieres consistencia deberías añadir títulos a todos tus widgets.

Conclusión

Aunque al principio pueda parecer increíblemente desalentador empezar a jugar con el código de tu sitio web, la mayoría de las hojas de estilo son lo suficientemente intuitivas como para que si tienes un conocimiento básico de la funcionalidad de Wordpress, puedas estar al tanto de las cosas.

Por supuesto, con esto apenas hemos raspado la superficie, pero sabes lo suficiente para hacer algunas ediciones de elección para mejor.