Jump to content
rpacker

Customizing Image Caption Box

Recommended Posts

James B    436
James B

Hi there,

 

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

.wp-caption {border:none;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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

 

.wp-caption img {
    background: none;}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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.


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker    19
rpacker

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.


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
James B    436
James B

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%;}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×