Modifying captioned image borders
-
Hi
What CSS code would I need to add to the Custom CSS in my Twenty-Ten theme to modify borders around images with captions? I would like to know how (1) to remove the grey border, but retain the caption; (2) to change the font style, size and colour of the caption.
Many thanksThe blog I need help with is: (visible only to logged in users)
-
I would recommend changing some of the CSS:
.wp-caption { background: none; margin-bottom: 0px; padding: 0px; }Then more specifically on the image of the caption:
.wp-caption img { margin: 0px; }Then finally more focussed on the paragraph tag of the caption:
p.wp-caption-text { font-size: 11px; background: #f1f1f1;; padding: 20px; }This is where you can also change the font size and the style. If you need additional help let me know and also the W3 Schools Font Page can be a great resource.
-
Hi cousett
Many thanks for this – your codes worked really well, and I was able to use the W3 Schools.com to add some further formatting, to.
Only one point, the font size seemed to stay the same, whatever size I set it too. Also I couldn’t change the font style. I tried:
p.wp-caption-text {
font family: Arial;
font-style: italic;
font-size: 14px;
background: #66ffff;
outline: 0;
margin: 0;
padding: 0;
}
Have I done something wrong here?
Many thanks again, Rob -
Hi cousett
Apologies for duplicating my response, I pressed the wrong button!
I have also thought of putting the caption and image credit in the ordinary text of the blog (and making the caption itself empty). That give greater control over fonts, etc, but I am so far unable to get the image credit tight up under the image (there’s always a space there, and it doesn’t look right). So if you had a solution within the caption, that would be great. Regards, Rob -
To change the size of the caption text your CSS style will need to be a little more specific:
.entry-content .wp-caption p.wp-caption-text { font-size: 14px; } -
Hi kathrynwp and cousett
Thank you for your help – this was much appreciated. Using your code, with some tweaks, I arrived at the precise solution: (1) a credit tucked way in small print under the image, and (2) the caption in a larger font immediately under the credit – just as I would in printed book or magazine.The trick is to put only the credit in the caption. The caption itself goes in the blog entry itself, it is the paragraph immediately under the image. In this way you can get the credit and the caption in different sizes of font, and aligned differently, if you want that. There’s all sorts of formatting potentional here, simply by changing the font size, etc. Here is the code I used:
This Custom CSS code (1) deletes the default grey image margin, (2) sets the caption font to (here as example) Segoe UI 10px, (3) aligns the caption to the right (it is a credit, and this makes it less obtrusive), (4) gets the caption tighter to the image (i.e. less space between image and caption):
.wp-caption {
background: none;
padding: 0;
}.wp-caption img {
margin: 0;
}.entry-content .wp-caption p.wp-caption-text {
font-family: Segoe UI;
font-size: 10px;
background: #ffffff;
text-align: right;
outline: 0;
margin: -4px;
}Then to create the caption to the image, enter this as the first paragraph under the image in the blog itelf (you can adjust the number of pixels, of course – and you can add other parameters for this text, such as colour, alignment, font, etc.):
<p style=”margin-top:-30px;”>[Your text]</p>
In this way, I have a small credit tucked away and aligned to the right under the image, followed by a caption in a larger font directly underneath the caption – just as I would for an image in a book or magazine. Many thanks again for both your help, Rob
-
-
Hi journeyingthroughthebible, I am facing a similar issue however, am not sure where I should be inserting the codes you mentioned:
{.wp-caption
background: none;
padding: 0;}{.wp-caption img
margin: 0;}{.entry-content .wp-caption p.wp-caption-text
font-family: Segoe UI;
font-size: 10px;
background: #ffffff;
text-align: right;
outline: 0;
margin: -4px;}Could you perhaps run me through this? My knowledge on codes is quite limited and hence all of this sounds alien to me.
-
Hi @vikitas,
You will find information about how to edit CSS code on the following page.
http://en.support.wordpress.com/custom-design/editing-css/
Please advise if you have more questions.
Cheers,
Vinod Dalvi -
-
vikitas – as others have stated, to add Custom CSS you’ll need the Custom Design upgrade, which you can purchase in your dashboard under Store.
If you need further help, feel free to start your own thread in the CSS Customization forum and provide a link to the site you’re trying to tweak: https://en.forums.wordpress.com/forum/css-customization
- The topic ‘Modifying captioned image borders’ is closed to new replies.
WordPress.com Forums 