Archived

This topic is now archived and is closed to further replies.

  • 0

Customizing Image Caption Box


Question

Posted · Report post

I would like the Custom CSS in order to remove all aspects of the image caption box, so that the caption just floats below the image.

 

http://www.randallpacker.com/the-soft-bubble/

 

Thanks,

 

Randall

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

Hi there,

 

The wp-caption is currently set to max-width 98%, change it to 100% and that should fix for you.

 

.wp-caption { max-width100%;}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

Your suggestion of the max-width change to 100% in addition to .wp-caption {padding: 0px 0px 0px 0px;} finally solved the issue.

 

Thanks!!

 

 

http://www.randallpacker.com/the-soft-bubble/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

To remove the border you can set the border to none for the caption class.

.wp-caption {border:none;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks James! That removed the caption border, but there is still a border around the image. This border does not show up when there is no caption.

 

http://www.randallpacker.com/the-soft-bubble/

Share this post


Link to post
Share on other sites

Posted · Report post

It seems they're applying a background shadow/border to the image. You can add background:none; to remove.

 

.wp-caption img {
    background: none;}

Share this post


Link to post
Share on other sites

Posted · Report post

We're almost there, but now I need to get rid of the padding around the captioned image, so the left margin is flush with the post title and perfectly matches the other embedded images that don't contain captions.

 

ttp://www.randallpa...he-soft-bubble/

 

Thanks, Randall

Share this post


Link to post
Share on other sites

Posted · Report post

Randall, we are unable to provide the code needed, I suggest you use Google Chrome's web dev tools and inspect the element, to find the correct code to achieve your desired style.

 

If you're unsure how to use Chrome's web dev tools, there is an extremely awesome course/video tutorial on Code School, this course is free and fun.

 

http://www.codeschool.com/courses/discover-devtools

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ninja,

 

Are you saying that you can't pinpoint the CS code to remove the padding from the left and right side of the captioned image? I would prefer not to have to take a course to resolve this one seemingly small issue.

 

tp://www.randallpa...he-soft-bubble/

 

Thanks, Randall

Share this post


Link to post
Share on other sites

Posted · Report post

You can find the code by inspecting the image caption, padding in Chromes web dev tools is green.

Share this post


Link to post
Share on other sites

Posted · Report post

<div id="attachment_3430" class="wp-caption aligncenter" style="width: 810px">

 

I found this code using Firebug, which indicates there is an extra 5 pixels in the margin width (the image is 800px), but I don't know how to get rid of this padding. If you can't help me I'll ask the previous staff member who was helping me earlier.

Share this post


Link to post
Share on other sites

Posted · Report post

Randall, we are unable to provide the code needed no PageLines staff member are allowed to provide custom CSS code, unless its a band aid for a bug.

 

You have already identified the class required which is adding padding to your image, you will need to use this class in your custom CSS and set padding to 0 if you wish to have no padding.

 

I highly recommend you visit our custom CSS documentation, which has a step by step guide on how to inspect an element and change custom CSS for that element. You may also want to inspect the img class too.

 

http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

OK. It's just that I was receiving excellent CSS Custom help from your colleague and we were very close to a complete solution and now I am unable to proceed without learning the coding myself. This isfrustrating because as an artist, programming has never come easily to me. Thanks anyway.

Share this post


Link to post
Share on other sites

Posted · Report post

What is the CSS you have right now?

Share this post


Link to post
Share on other sites

Posted · Report post

Here is the CSS I have so far:

.wp-caption {border:none;}
.wp-caption img {
    background: none;}

 

I am so close, I just need to remove the padding around the captioned image and I have tried and failed.

 

http://www.randallpacker.com/the-soft-bubble/

 

Thanks, Randall

Share this post


Link to post
Share on other sites

Posted · Report post

Have you tried adding padding: 0px; to .wp-caption?

Share this post


Link to post
Share on other sites

Posted · Report post

I still have approximately 5px of padding on the left and right sides using the following:

 

/* CSS IMAGE Caption */
.wp-caption {border:none;}
.wp-caption {padding: 0px 0px 0px 0px;}
.wp-caption img {
    background: none;}
 

Thanks.

Share this post


Link to post
Share on other sites