Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Border around image and not image caption when captioning used (http://forum.bytesforall.com/showthread.php?t=12347)

vCopia Jan 19, 2011 05:12 PM

[SOLVED] Border around image and not image caption when captioning used
 
This isn't a deal breaker for me, but I was wondering if anyone knows a way to use the caption feature when inputting an image into a post / page without that caption being displayed within the walls of the image's border. Aesthetically I prefer to have a border around my images, and a caption below free from encumberment.

I checked the posts herein and only found those addressing border removal from individual images by use of Class code. Great idea, but not quite what I was looking for. Also didn't see a way to do this under the Image section of ATO. Saw you could have or not have borders around a captioned image (including the caption), or around the image (when a caption was not used), but didn't see how I could tweak those options to achieve my goal. Maybe I'm missing something and just need a second look with borrowed eyes. Any taker?

Thanks in advance.

lmilesw Jan 19, 2011 07:18 PM

This is probably not precisely what you are looking to do but it might get you pointed in the right directions.
In ATO>Style Image>Images in Posts: Captions Style put something like the following
HTML Code:

text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px 0 0 0;

And in ATO>Style Image>Caption Text: Style put something like the following
HTML Code:

font-size: 0.8em;
line-height: 13px;
padding: 1px 4px 5px;
margin: 4px 0 0 0;
color: #666666;
background: #fff;

As you can see I changed some of the background colors and padding etc. from the default. Maybe you can tweak it till it looks good for you. I took off the rounded corners as they didn't work well with this.

vCopia Jan 20, 2011 07:55 AM

Thanks for taking the time to reply. I gave your code a whirl and it does add a couple of pixels of space between the caption and the image, which looks nice, but I must not have explained myself well enough. I'm trying to have the captioned text live outside the border entirely while retaining the approx. spacing below the bottom border line that it currently has below the image, itself. Your suggestion is lovely, but still leaves the text encased in the border's shell.

Thanks again for taking the time. Genuinely appreciated.

vCopia Jan 20, 2011 08:14 AM

Wanted to clarify my prior post where I said:

...still leaves the text encased in the border's shell....

I didn't mention that your suggested code worked in that it placed the shaded area around the image and left the text unencumbered below it, as I'd asked. However, I'd added back in

border: 1pt;

to the ATO>Style Image>Images in Posts: Captions Style section because I like having a hard border around the image. However, the resulting border wrapped around the captioned text, too.

If possible, I'd like to retain the colored padding around the image with a hard border outside the padding, just not with the caption, inside that hard border.

Thoughts?

lmilesw Jan 20, 2011 12:16 PM

That's why I said this is not precisely what you are looking for. The only way I could potentially get your idea to work meant editing the css.php file and I don't like to do that as it means I have to update that file each time I update the theme.

vCopia Jan 20, 2011 02:59 PM

Understood. You were a gentleman to share your option with me and I thank you for that.

Funny you should mention editing css.php ... I already added a line to the css.php file, as well as a section to the index.php file, so future updates will always require me to manually deal with those files. If you do happen to have a suggestion for modifying the code that wouldn't take too much of your valuable time, I'm here and listening. If not, thanks again for your generosity.

VC

lmilesw Jan 20, 2011 07:20 PM

In css.php find the following

HTML Code:

.wp-caption img {
          margin: 0 !important;
          padding: 0 !important;
          border: 0 none !important;
        }

You can either remove it or comment it out as below
HTML Code:

/* .wp-caption img {
          margin: 0 !important;
          padding: 0 !important;
          border: 0 none !important;
        } */

Now go to ATO>Style Images>Images in Posts and use something like the following changing the border color and background color to your liking.
HTML Code:

padding: 5px;
border: solid 1px #000;
background-color: #f3f3f3;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

No go to ATO>Style Images>Images in Posts: Caption Style and use something like the following. Basically I just deleted the border, background color, and border radius code.
HTML Code:

text-align: center;
padding-top: 4px;
margin: 10px 0 0 0;

That should do you.

vCopia Jan 22, 2011 11:00 AM

Yup! Yup! Yup! That's it.
You're a genius and a gentleman.
Thanks much!!

VC


All times are GMT -6. The time now is 03:14 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.