How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions

Since WordPress version 2.6, WordPress has added a built-in shortcode, “Caption”, which will be automatically rendered and translated into standard HTML CSS code to display the caption for the photo or image, which saved via media uploader, beneath it.

However, when WordPress appends the DIV styles to print the caption title under the picture or image, WordPress makes use of default alignment, color, font, spacing, and other styling attributes to display the image captions.

The default CSS styles for image with the caption may potentially breaks the blog or web page layout, does not validate against W3C xHTML standard, appears too closely with the text with no spacing in the post or page, or does not align as author’s wish.

For blogger who wants to modify the CSS styles of the caption that shows the image captions on screen after parsing the shortcode, add the following CSS code into the active theme’s style.css file:

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.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;
}
/* End captions */

Above HTML CSS declaration is taken from WordPress 2.6 default theme. These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog. Modify the code above in “style.css” file according to your own preference to have your own design and look.

Share and contribute or get technical support and help at My Digital Life Forums.



2 Responses to “How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions”

  1. Mark LaFlamme
    July 20th, 2008 10:05
    1

    For the life of me, I cannot get captions to work. It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all. I added the caption code to my theme’s style.css but there was no change. Seems like I’m just one minor step away from making this work. If anyone has any ideas, I’d love to hear them. I’ll add a caption to my first post to demonstrate.

  2. Gray
    September 16th, 2008 01:05
    2

    Thank you so much for sharing this code! I was going nuts trying to figure out how to fix my captions!

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting


Custom Search

New Articles

Incoming Search Terms for the Article

css font color - css style font color - font color css - font-spacing - css alignment - css font-spacing - font-spacing css - CSS font spacing - css change font - style font color - css font margin - font-color css - css change font color - style="font-color" - css style font - style="font-color - change font in css - style=FONT-COLOR - change font color code - css font color code - changing font in css - css align codes - how to change font style - how to change font color with CSS - wordpress change font color - Enter Email Address:


  • Machine Translation

    Translate to EnglishÜbersetzen Sie zum Deutsch/GermanPřeložit do Čech/CzechOversætte hen til Dansk/DanishKääntää jotta Finnish/FinnishLefordít -hoz Magyar/HungarianÞýða til Íslenska/Icelandic
    Traducir a Latinoamericano Español/Latin American Spanishtagapagsalin sa Filipino/FilipinoTłumaczyć wobec Polski/PolishA traduce la spre Român/RomanianPrevesti za Srpski/Serbiantolmačiti v slovenski/SlovenianÖversätta till Svensk/Swedish
    Chyfieitha at Cymraeg/Welshtercüme etmek -e doğru Türk/TurkishPrevesti to Hrvatski/CroatianПревеждам към Българин/BulgarianTraduzca al Español/SpanishTraduisez au Français/FrenchTraduca ad Italiano/Italian
    Traduza ao Português/Portuguese日本語に翻訳しなさい /Japanese한국어에게 번역하십시오/Korean中文翻译/Chinese Simplified中文翻译/Chinese Traditionalترجمة الى العربية/ArabicVertaal aan het Nederlands/Dutch
    Μεταφράστε στα ελληνικά/GreekПереведите к русскому/RussianOversetter til Norsk/NorwegianTraduzir a Língua portuguesa brasileira/Brazilian PortugueseReddo ut Latin/Latin




  • Categories