Agregar bordes CSS a las imágenes en WordPress

En un comentario que me llego, me preguntaron cómo hacerle para poder crear un borde automático hacia alguna imagen en particular, como lo tengo implementado en mi blog. Cabe decir que este borde solo se logra editando el CSS de tu blog en WordPress, agregando el valor ”Image Caption”, hay muchos temas para WordPress que ya lo tienen implementado pero me encontrado con otros en el que es necesario agregar dicho valor.

1.- Editando el CSS: Lo que vamos a hacer es ir al editor del theme y elegir el archivo Style.css, en el cual vamos a agregar el siguiente código CSS para poder crear el borde en las imágenes. ”Lo puedes agregar a lo último de todo el contenido”.

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #F9F9F9;
padding-top: 5px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
 
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
 
.wp-caption p.wp-caption-text {
font-size: 10px;
font-weight: bold;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

2.- Publicando una imagen: Ahora ya puedes implementar el borde a cualquier imagen que subas solo agregando un texto alternativo a la imagen llamado caption.

Eso es todo, ahora cada vez que quieran subir una imagen pueden decidir si quieren mostrar o no ese valor dejando en blanco el campo de caption.

1 comentario en Agregar bordes CSS a las imágenes en WordPress

  1. Hola! necesito pedirte una ayuda a ver si puedes dármela. Quiero ponerle un marco personalizado a mis imágenes en mi blog como en este tumblr que te indico como ejemplo:
    http://fashionista514.tumblr.com/page/2

    logra hacerlo, pero no se como hago para que el marco se adapte al tamaño de las imágenes y quede perfectamente encajada la imagen en el.
    me puedes ayudar?

    gracias!!!

Leave a Reply

Tu dirección de correo no será publicada.