Need help? Check out our Support site, then


Styling caption boxes with CSS

  1. Hi. I've done a search in the forums but I can't find the exact answer to this simple question: What are the attributes (class, id, etc.) that I need to know to style the caption boxes that appear around images? Right now, my blog -- elcaptivo.com -- has a dark gray background. By default caption boxes appear as a light gray. It doesn't really look right and I'd like to make the boxes with a black border and white or gray caption text. Thank you for your help. (I do have the custom CSS upgrade)

  2. Here are the basics of what is used. It may differ a little bit from theme to theme:

    .aligncenter,
     div.aligncenter {
         display: block;
         margin-left: auto;
         margin-right: auto;
     }  
    
     .alignleft {
         float: left;
     }  
    
     .alignright {
         float: right;
     }  
    
     .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;
     }
  3. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic