Styling caption boxes with CSS

  • Author
    Posts
  • #254681

    xtianczar
    Member

    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)

    #254911

    nickmomrik
    Staff

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

    xtianczar
    Member

    Thanks!

The topic ‘Styling caption boxes with CSS’ is closed to new replies.