CSS help needed to change image caption box

  • Author
    Posts
  • #802175

    shimworld
    Member

    I’m thinking of changing the way captioning wraps around images on my Enterprise Theme into how Boston’s The Big Picture does theirs with white font on black. My image widths are 620 pixels max and I may or may not want the thin black outline on the top, left and centre of image.

    The blog I need help with is shimworld.wordpress.com.

    #802301

    I’ve tried twice to load the boston link and it has choked my internet connection which is extremely slow tonight, so I can’t look at what they have done.

    All the stuff for the captions on your theme though are pretty much right here. I added a color declaration since you will most likely want to change that (the color code I put in is just a placeholder).

    .wp-caption {
    background: #F5F5F5;
    border: 1px solid #E4E4E4;
    border-radius: 3px 3px 3px 3px;
    color: #CC0000;
    padding: 7px 2px;
    text-align: center;
    }

    If you want to control each border independently, then replace the combined border declaration with the following and edit as you see fit.

    border-top: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;

    Sorry I can’t be more specific, but I can’t fly to Boston’s site tonight. :-)

    #802303

    shimworld
    Member

    Hi there TSP!

    This is a screen shot from the Boston Big Picture web page. Is this what you pictured?

    #802334

    Yeah, that is pretty much what I was expecting from your description.

    Give this a try and see what you think (add to bottom of your CSS). I’ve targeted only the images in the posts/pages and left the ones in the sidebar alone. Those can be changed as well if you wish by using the second bunch of code. You might want to try it both ways.

    .entry .wp-caption {
    background: #000000;
    padding: 2px 0 10px;
    width: 624px !important;
    border: none;
    border-radius: 0;
    color: #eee;
    }
    
    .entry .wp-caption p.wp-caption-text {
    line-height: 1.5em;
    }

    Or to do all images with captions.

    .wp-caption {
    background: #000000;
    padding: 2px 0 10px;
    width: 624px !important;
    border: none;
    border-radius: 0;
    color: #eee;
    }
    
    .wp-caption p.wp-caption-text {
    line-height: 1.5em;
    }
    #802335

    The border is 2px. If you go down to 1px, it almost disappears. (actually it isn’t a border, just adjusting the width and padding for the background).

    #802336

    shimworld
    Member

    Thanks very much for the codes. I’ve applied it and unfortunately, it’s also affected the photo captions of the “Image” widgets. My entire CSS codes below:

    [sourcecode language="css"]
    #wrap,#nav,div#header {
    -moz-border-radius-topleft:0;
    -moz-border-radius-topright:0;
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-bottomright:0;
    -khtml-border-radius:0;
    -webkit-border-top-left-radius:0;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-bottom-right-radius:0;
    }

    body {
    font-family:Serif, Arial, Tahoma, Verdana;
    font-size:13px;
    }

    #searchform,#subnav,.rsslink,.tags,.categories {
    display:none;
    }

    #sidebar .widget_search form {
    display:block;
    }

    #header {
    width:960px;
    height:385px;
    background:#fff url(‘http://shimworld.files.wordpress.com/2011/01/wordpress-2011.jpg’) no-repeat 0 0;
    border-top:none;
    margin:0 auto 1px;
    }

    #nav {
    float:left;
    width:960px;
    min-height:45px;
    background:#333 url(‘images/nav.png’) repeat-x;
    display:block;
    text-transform:uppercase;
    position:relative;
    margin:0 auto;
    padding:0;
    }

    .post-meta {
    margin-bottom:-25px;
    }

    #s {
    width:170px;
    }

    #sidebar .widget {
    margin:0 0 15px;
    }

    .commentlist li ul li {
    font-size:13px;
    }

    .twp-container {
    margin-left:Auto!important;
    }

    div.sharedaddy h3,#content div.sharedaddy h3,#main div.sharedaddy h3,#primary div.sharedaddy h3 {
    padding-right:15px;
    width:auto;
    }

    div.sharedaddy .sd-content {
    float:left;
    width:auto;
    }

    .wp-caption {
    background:#000000;
    width:624px!important;
    border:none;
    border-radius:0;
    color:#eee;
    padding:1px 0 10px;
    }

    .wp-caption p.wp-caption-text {
    font-size:1em;
    padding-top:9px;
    line-height:1.5em;
    }
    [/sourcecode]

    #802337

    Shoot, I need sleep. It is the width that is causing the issue on the image widgets.

    Add in the first code instead and I’ll come up with additional code strictly for the image widgets.

    #802338

    shimworld
    Member

    Black background works OK on the main images but not the image widgets. I think they’re better being ‘transparent’ or the default colour if that’s at all possible.

    #802339

    Ok, here you go for separate styling of the image widgets.

    .widget_image .wp-caption {
    background: #000000;
    padding: 2px 0 10px;
    border: none;
    border-radius: 0;
    color: #eeeeee;
    }
    #802340

    Gaaahhh! Wait, use this. I copied and pasted from the wrong place. I seriously need sleep. And Firebug is acting up as well.

    .widget_image .wp-caption {
    background: none repeat scroll 0 0 #000000;
    border: medium none;
    border-radius: 0 0 0 0;
    color: #EEEEEE;
    padding: 2px 0 10px;
    width: 234px !important;
    }`

    #802341

    Third time, this time with an opening code tag.

    `.widget_image .wp-caption {
    background: none repeat scroll 0 0 #000000;
    border: medium none;
    border-radius: 0 0 0 0;
    color: #EEEEEE;
    padding: 2px 0 10px;
    width: 234px !important;
    }

    #802342

    Fourth time, this time with an both code tags.

    .widget_image .wp-caption {
    background: none repeat scroll 0 0 #000000;
    border: medium none;
    border-radius: 0 0 0 0;
    color: #EEEEEE;
    padding: 2px 0 10px;
    width: 234px !important;
    }
    #802343

    If you want the image widgets to stay as is, then just use the first bit of code I gave you (repeated below).

    .entry .wp-caption {
    background: #000000;
    padding: 2px 0 10px;
    width: 624px !important;
    border: none;
    border-radius: 0;
    color: #eee;
    }
    
    .entry .wp-caption p.wp-caption-text {
    line-height: 1.5em;
    }
    #802344

    shimworld
    Member

    Thanks again. It’s rockin’ again! Time for the overdue sleep :)

    #802345

    You are welcome, and definitely time for sleep. My eyes feel like someone poured sand in them.

    #802398

    shimworld
    Member

    I tweaked the codes a little and ended with for the current presentation. I used “width:620px!important;” to force the black to hide right behind images that are exactly of the same width. Then, I realized that there are countless captioned images from early posts and even some of the recent ones that are smaller – this code creates a black border … is it possible to fit the black background according to the width of the image at all?

    [sourcecode language="css"]
    .wp-caption {
    background:#000000;
    border:none;
    border-radius:0;
    color:#eee;
    width:620px!important;
    padding:1px 0 10px;
    }

    .wp-caption p.wp-caption-text {
    font-size:1em;
    padding-top:9px;
    line-height:1.5em;
    }

    .widget_image .wp-caption {
    background:none repeat scroll 0 0 #000000;
    border:medium none;
    border-radius:0 0 0 0;
    color:#EEEEEE;
    width:232px!important;
    padding:0 0 10px;
    }
    [/sourcecode]

    #802400

    Sorry, that is what happens when I try doing CSS when I’m too tired.

    Let take out all the code I had you put in, and you tweaked, and start from scratch.

    #802410

    Jan, here is what is causing the issue. If you insert an image without a caption (say a full-width image) it is inserted at 630px wide. If you insert an image with a caption, it is inserted at 620px wide which then gives the 5px of border around the image you see (after you disable the border line and set the left/right padding to 0.

    The wordpress/theme software is actually setting the width of the caption background in the HTML code. Normally the way I do this is to bring it in at the same width as the image and then use CSS to add padding as needed around the image. That gives you full control through CSS. The way this is done on this particular theme, the width of the caption background is out of our hands. The best we can do is take away the border line and the padding set in the CSS which will leave 5px of background showing on left, top and right of the image.

    #802411

    shimworld
    Member

    I think that would look good too … I had thought about Plan B and that being to leave caption as it is now but remove the gray border to the top, left and right of image. and also increase font size by a notch. How does this sound?

    #802412

    Jan, I’m cooking up an idea. Give me a bit to work out the kinks and I’ll post it for you to try. Make sure and check older images and smaller images to make sure nothing blows up on us.

The topic ‘CSS help needed to change image caption box’ is closed to new replies.