Customize WordPress Image Caption easily using CSS

Ok, so let me show you what I am talking about. To customize wordpress image caption, you can simply apply the CSS that I have provided to you further below. But in case you want to know what image caption is, simply go to your Media upload section of your WordPress blog and try to upload an image. Once you have uploaded it, you will be presented with other options for the image such as it’s caption, description, ,alignment, etc. you can find the Image caption.

Here’s the before and after results of Customize WordPress Image Caption

So I was able to customize WordPress image caption easily for a recent project of mine.

Here’s an image of the Image with it’s caption before any formatting is applied:

And here is the result after applying our CSS:

So if you compare the above 2 images, you can notice how different and better the 2nd image looks. We are going to achieve similar result by using just CSS. Following is the CSS that I used to customize image caption for a recent project of mine.

/*Customize Image Caption*/
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-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: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

You can now easily tweak the values and background colors and other settings to suit your website.  So that’s how you can Customize WordPress Image Caption.

Your Turn!

Do you know of any other ways to customize WordPress image caption? Feel free to suggest by commenting below.