CSS help needed to change image caption box

  • thesacredpath · Member ·

    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;
}
  • shimworld · Member ·

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

  • shimworld · Member ·

    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?

  • thesacredpath · Member ·

    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.

  • shimworld · Member ·

    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.

  • thesacredpath · Member ·

    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;
}
  • shimworld · Member ·

    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.

  • thesacredpath · Member ·

    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.

  • shimworld · Member ·

    OMG *Faints* I regret asking LOL.

  • thesacredpath · Member ·

    I thought you might. I almost did.

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

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