Need help? Check out our Support site, then


CSS help needed to change image caption box

  1. 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.

  2. 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. :-)

  3. Hi there TSP!

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

  4. 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;
    }
  5. 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).

  6. 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]

  7. 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.

  8. 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.

  9. 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;
    }
  10. 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;
    }`

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

  12. 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;
    }
  13. 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;
    }
  14. Thanks again. It's rockin' again! Time for the overdue sleep :)

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

  16. 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]

  17. 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.

  18. 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.

  19. 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?

  20. 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.

  21. Give this a preview and see what you think. It give a black 1px border to all captioned images and gives the black background to the caption and the borders on left and right flow into the caption background (or appear like they do).

    .wp-caption p.wp-caption-text {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 13px;
    margin-left: 4px !important;
    margin-right: 4px !important;
    padding: 10px !important;
    line-height: 130% !important;
    }
    
    .wp-caption {
    background: none;
    border: none;
    }
    
    .wp-caption img {
    border: 1px solid #000000 !important;
    }
  22. Wow. What can I say - great work @TSP. Presentation looks very elegant. I swapped black for #484848 which matches the subtle use of gray colours in menu bar, Countdown Widget, etc. Tested on narrower images and all seem OK too.

    Thank you very much .. #SHIMWORLD is now ready to usher in the Year of the Dragon (3 days to go).

  23. There seems to be an usually wider gap between images that aren't captioned. I'm guessing this is due to padding setting to provide space to accommodate captioning?

  24. Everything we did was targeted only at images with captions, so it shouldn't have had any affect on non-captioned images.

    Point me to a place where you are seeing this.

  25. Here's a screen cap of the main post and widget showing the rather wide gaps between images and widget spaces. I've tried viewing my blog on FireFox and IE both show the same. Also made sure there are no spaces in HTML.

  26. In the content area, there are two things creating the space.

    One is spacing between paragraphs since each non-captioned image is enclosed in paragraph tags.

    The second is some bottom margin that is set for all non-captioned images.

    The paragraph spacing should not be changed since it would also change the spacing between textual paragraphs.

    You can adjust the bottom margin for centered images by adding this to your CSS and adjusting as desired, but this will also bring any text under an image up closer to the bottom of the image and it will also affect captioned images that are before or follow a non-captioned image.

    You can add this to your CSS and play with the bottom margin values. The second bit of code you already have in your CSS (without the margin-bottom) so just add a margin-bottom declaration to it and the you will have to work the two together to get the spacing to be consistent. Make sure and check spacing between images and text following an image as this will also be affected by the changes you make below.

    .aligncenter, #sidebar .aligncenter {
    margin-bottom: 10px;
    }
    
    .wp-caption {
    margin-bottom: 5px;
    }
  27. Thanks. Sidetrack ... do you have the code for WordPress.com's "Stop Censorship" banner. I've always wanted one to use on occasions when you have something special to announce to readers but never quite figured out how to get one done elegantly.

  28. Heh! Here it is, but it does not include the actual ribbon text, which is set in the underlying files. Something can be done with an image, but here at wordpress.com, some of the code below will likely get stripped out by the CSS Tidy they use to filter and check our CSS.

    #blackout-ribbon {
    position: fixed !important;
    top: -50px !important;
    top: -22px !important;
    right: 0 !important;
    z-index: 99000 !important;
    cursor: pointer !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 100px !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-shadow: -1px -1px 0 #111 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    text-decoration: none !important;
    color: white !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-style: solid !important;
    border-color: #414141 !important;
    border-width: 1px 0 !important;
    -webkit-box-shadow: inset 0 0 0 1px #6A6A6A !important;
    -moz-box-shadow: inset 0 0 0 1px #6A6A6A !important;
    box-shadow: inset 0 0 0 1px #6A6A6A !important;
    background-color: #222 !important;
    background-image: linear-gradient(left , #222 0%, #545454 50%, #222 100%) !important;
    background-image: -o-linear-gradient(left , #222 0%, #545454 50%, #222 100%) !important;
    background-image: -moz-linear-gradient(left , #222 0%, #545454 50%, #222 100%) !important;
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #222), color-stop(0.5, #545454), color-stop(1, #222) ) !important;
    background-image: -webkit-linear-gradient(left , #222 0%, #545454 50%, #222 100%) !important;
    background-image: -ms-linear-gradient(left , #222 0%, #545454 50%, #222 100%) !important;
    -moz-transform: rotate(45deg) translate(151px, -11px) !important;
    -webkit-transform: rotate(45deg) translate(151px, -11px) !important;
    -o-transform: rotate(45deg) translate(151px, -11px) !important;
    -ms-transform: rotate(45deg) translate(151px, -11px) !important;
    transform: rotate(45deg) translate(151px, -11px) !important;
    }

    You can create a square, transparent PNG image with the ribbon and then put slip it in as a background image right aligned at top.

  29. OMG *Faints* I regret asking LOL.

  30. I thought you might. I almost did.

    You might pop it into a plain text file and save it. Or not. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic