Jump to content


Photo
- - - - -

Customizing Image Caption Box

custom image caption

Best Answer James B , 10 May 2013 - 11:38 PM

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%;}
Go to the full post


  • Please log in to reply
16 replies to this topic

#1 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 09 May 2013 - 09:02 PM

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.

 

Please Login or Register to see this Hidden Content

 

Thanks,

 

Randall



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 May 2013 - 11:07 PM

Hi there,

 

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

Please Login or Register to see this Hidden Content



#3 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 09 May 2013 - 11:51 PM

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.

 

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 03:32 AM

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

 

.wp-caption img {
    background: none;}



#5 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 11:13 AM

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.

 

Please Login or Register to see this Hidden Content

 

Thanks, Randall



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 11:22 AM

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.

 

Please Login or Register to see this Hidden Content


  • JawDesigns likes this

#7 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 12:03 PM

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.

 

Please Login or Register to see this Hidden Content

 

Thanks, Randall



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 12:11 PM

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



#9 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 12:24 PM

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



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 12:32 PM

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.

 

Please Login or Register to see this Hidden Content



#11 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 12:53 PM

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.



#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 May 2013 - 03:14 PM

What is the CSS you have right now?



#13 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 05:06 PM

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.

 

Please Login or Register to see this Hidden Content

 

Thanks, Randall



#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 May 2013 - 07:04 PM

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



#15 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 10 May 2013 - 07:27 PM

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.



#16 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 11:38 PM   Best Answer

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%;}

  • rpacker likes this

#17 rpacker

rpacker

    Super Member

  • Members
  • 232 posts
  • LocationWashington, DC
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 11 May 2013 - 01:21 PM

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

 

 

Please Login or Register to see this Hidden Content