Hi, i was wondering if it's possible to add a border around images in posts? i wouldn't want the border on other images (header, sidebar, etc.) but just if they're used in posts or pages. Is that possible?
Ooh, a quick follow-up question: how can i add padding on the OUTSIDE of the border round the image? i don't want the text to get too close to the borders!
See here for examples of text close to the borders:
A follow-up question: this border doesn't seem to be working when the site is viewed on mobile platforms. Do i need to alter the code to work on mobile as well?
As I checked, this issue caused by your custom CSS code is missing a close } for a CSS above it.
Here is that code:
@media only screen and (min-width: 1170px) {
.penci-sidebar-content {
width: 23%;
}
.penci-single-style-10 .penci-single-s10-content,
.container.penci_sidebar #main {
width: 77%;
}
/* gap between slider and body */
It should be:
@media only screen and (min-width: 1170px) {
.penci-sidebar-content {
width: 23%;
}
.penci-single-style-10 .penci-single-s10-content,
.container.penci_sidebar #main {
width: 77%;
}
}
/* gap between slider and body */
Hi, i was wondering if it's possible to add a border around images in posts? i wouldn't want the border on other images (header, sidebar, etc.) but just if they're used in posts or pages. Is that possible?
Hi,
Please try add more this code to Customize > Custom CSS to do that:
.post-entry img{ border: 1px solid #dedede; padding: 6px; }Change color code dedede to any color code for border color as you want. And change value 6 to padding value between the borders & image inside it.
Best Regards,
PenciDesign
That's great, thanks!
If i want an individual image to NOT have a border, what code should i use to remove it? i usually insert images into posts/pages using HTML code.
Would this work?
style="border: none;"
i just tested
style="border: none;"
and it works fine. i assume this is the best way to do this when occasionally i don't want a border?
Hi,
Yes
The CSS will apply for all images inside your posts. And if you want to remove it for specific images, you need to add the inline-css as you said.
Best Regards,
PenciDesign
Great - thanks again for the first-class support! :)
Ooh, a quick follow-up question: how can i add padding on the OUTSIDE of the border round the image? i don't want the text to get too close to the borders!
See here for examples of text close to the borders:
http://5against4.com/2020/09/30/estonian-music-days-2020-part-2/
Hi,
Please try add more this code to Customize > Custom CSS to do that:
@media only screen and (min-width: 480px){ .post-entry img[align="left"] { margin-right: 20px; margin-bottom: 20px; } .post-entry img[align="right"] { margin-left: 20px; margin-bottom: 20px; } }Best Regards,
PenciDesign
Excellent! Thanks so much! :)
Afterthought: if i also wanted to add a border/padding to images in the sidebar, what code should i use for that?
Hi,
To do that, please add more this code to Customize > Custom CSS:
.penci-sidebar-content img{ border: 1px solid #dedede; padding: 6px; }Note: To make the borders showing, you need to remove the inline-CSS border: none here because it will override the CSS code I sent.
Best Regards,
PenciDesign
Great, great! Many thanks again for the excellent support!! :) :)
A follow-up question: this border doesn't seem to be working when the site is viewed on mobile platforms. Do i need to alter the code to work on mobile as well?
Hi,
No - it will work for all screens.
Best Regards,
PenciDesign
That doesn't seem to be true. See the attached images - when the width is reduced the padding and border seem to vanish.
Hi,
Ahh, I thought you've asked for images on the sidebar. If you mean about the images inside posts. Please change the code I sent before:
@media only screen and (min-width: 480px){ .post-entry img[align="left"] { margin-right: 20px; margin-bottom: 20px; } .post-entry img[align="right"] { margin-left: 20px; margin-bottom: 20px; } }To this code:
.post-entry img[align="left"] { margin-right: 20px; margin-bottom: 20px; } .post-entry img[align="right"] { margin-left: 20px; margin-bottom: 20px; }Best Regards,
PenciDesign
Thanks! That worked for the PADDING, but the BORDER is still missing. i'm currently using this:
.post-entry img{ border: 1px solid #a6a6a6; padding: 5px; }
Does this need to be changed?
Hi,
As I checked, this issue caused by your custom CSS code is missing a close } for a CSS above it.
Here is that code:
@media only screen and (min-width: 1170px) { .penci-sidebar-content { width: 23%; } .penci-single-style-10 .penci-single-s10-content, .container.penci_sidebar #main { width: 77%; } /* gap between slider and body */It should be:
@media only screen and (min-width: 1170px) { .penci-sidebar-content { width: 23%; } .penci-single-style-10 .penci-single-s10-content, .container.penci_sidebar #main { width: 77%; } } /* gap between slider and body */Let's change it and check it again.
Best Regards,
PenciDesign
Perfect!! How silly that i made the mistake. Thank you so much :) :)