Styling caption boxes with CSS

• 

  xtianczar · Member · Aug 13, 2008 at 4:23 am

  • Copy link
  • Add topic to favorites

  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)

• 

  nickmomrik · Staff · Aug 13, 2008 at 4:25 am

  • Copy link

  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;
   }

• 

  xtianczar · Member · Aug 13, 2008 at 4:41 am

  • Copy link

  Thanks!