Un par de trucos CSS fáciles de aplicar en tu blog que te pueden interesar

A veces recibo peticiones por email para hacer un post.

Me refiero a cosas en concreto.

«Oye Omar, ¿podrías explicar algún día en un post como hacer esto o lo otro?«.

Otras veces incluso esas propuestas surgen en los comentarios de otros post.

La verdad es que esas sugerencias se suelen hacer con «cierto temor de no molestar», cuando en realidad es todo lo contrario.

Yo (y cualquiera) agradecemos enormemente que se nos den ideas para nuevos post y, si además son de cosas que están interesando a tu audiencia (ellos mismo te lo están pidiendo), pues mejor que mejor.

Ahora bien, siempre entendiendo que no cualquier cosa que se proponga tiene que llevarse a cabo sí o sí. Es decisión del blogger decidir si procede o no.

Vamos allá con dos trucos CSS sencillos pero que dan vidilla 😉

1º Cómo poner los testimonios en cajitas chulas

No son pocos los que me han preguntado por email cómo se hace para poner los testimonios en cajitas, con bordes, las imágenes todas iguales, etc.

Tal y como los puedes ver en la página de mi Servicio Web, por ejemplo.

En el fondo es bastante sencillo.

No osbtante es necesario controlar mínimamente algo de CSS, te dejo un par de enlaces:

• CSS básico para mejorar tu blog
• CSS en Genesis, personalizando tu theme sin agobios

Bien, entremos en materia.

Se trata de crear una clase que llamaremos por ejemplo «clientes», y a dicha clase le asignaremos una serie de propiedades en nuestro «style.css»

Del mismo modo, utilizaremos el selector de etiqueta «img» para aplicar algunas cosas a las imágenes que estén dentro de los DIVs con la clase «clientes» asociada.

Suena a chino, lo sé, pero en realidad no es tan complicado.

Código HTML que tendrás en tu entrada o página

Vayamos por partes.

La primera línea significa que tenemos un DIV, un contenedor donde meteremos: un H3 con el nombre del cliente, la imagen con la foto del cliente, el testimonio del cliente y por último la dirección web del cliente. Ok.

A dicho DIV, le aplicamos la clase «clientes» y ahora veremos qué propiedades le ponemos y cómo.

Te pongo en rojo lo que tendrías que sustituir, obviamente cada uno con sus datos.

El tema de la imagen lo mismo, cada uno sube su foto del cliente y con alinearla a la izquierda es suficiente.

Código CSS que pegarás en tu style.css

Tenemos la clase «clientes» y puedes modificar por orden:

• El color del fondo.
• La altura mínima del contenedor, para que testimonios más cortos no queden muy mal.
• El margen desde los bordes del contenedor hacia fuera.
• El espacio desde los bordes del contenderos hacia los elementos que tiene dentro.
• El borde: tipo, color y grosor.
• La curvatura de los bordes del contenedor.

Después tenemos el selector «img».

Con esto le decimos que las imágenes que estén dentro de un contenedor de clase «clientes», deben tener un borde de un color y curvaturas determinados.

2º Cómo sustituir la imagen de compartir en Shareaholic

Para todos los que utilizais Shareaholic, habreis visto que yo tengo una imagen personalizada al final de cada post que pone «Comparte si te ha gustado», en lugar de la que viene por defecto en inglés con el plugin.

Bueno, pues cortesía del señor Jose Fonterosa, que es quien me enseñó este truco, comparto contigo el código CSS para modificar eso.

Obviamente, primero tendrás que crearte dicha imagen (con ancho recomendado de 313px) y subirla a tu servidor, desde Wordpress en «Medios/Añadir nuevo».

Código CSS que pegarás en tu style.css

Es bien sencillo: lo que hacemos es superponer esa imagen a la que viene por defecto, y a esa en una segunda orden directamente la decimos que no se muestre con el «diplay:none;»

Luego tiene una serie de ajustes de «márgenes» que sirven para calibrar bien el alineado con los iconos de redes sociales.

Si no te cuadra bien, pues dependerá de cómo recortes tu imagen antes de subirla, puedes probar alterando esos valores.

Resumiendo

Espero que este post haya sido corto pero muy útil.

Son dos trucos CSS con los que podrás personalizar un poco más el aspecto de tu blog.

Serán bien recibidas ideas o sugerencias para futuros post con trucos de este tipo, pues de hecho estos dos es de ahí de donde surgieron, de vuestras inquietudes 😉