I’m still super happy with this theme, so many great options - especially with bootstrap.
I was wondering if anyone can help me figure out how to put a border around the featured images of each posts ONLY. Theres originally was a border around the featured images, but also around those images that had a caption underneath them and I wanted that particular border removed. So I added this code to my CSS:
However, obviously the border around the featured images are gona as well. How do I get those back? I would like to distinct featured images from in-post images.
I hope you are well today and thank you for your question.
You can remove the border only from the images having captions in the post content by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS
I was wondering if you could help me figure out two additional CSS issues regarding images with captions:
now that the border around the post images is gone, the images that have a caption are slightly smaller than the images that don’t have a caption (see screenshot). How can I change that?
images that have a caption also have an extra large white line between the caption and the following content -either text or another image (see screenshot). I tried using inspect element to figure out how to diminish this spacing but nothing seems to work.
* now that the border around the post images is gone, the images that have a caption are slightly smaller than the images that don’t have a caption (see screenshot). How can I change that?
On my test site i don’t see any difference between the size of the images with captions and without captions.
Could you please test it on your test post adding a same image twice and adding image caption to one of them?
If they display in different size then please share the URL of that post to me so that i can test it.
* images that have a caption also have an extra large white line between the caption and the following content -either text or another image (see screenshot). I tried using inspect element to figure out how to diminish this spacing but nothing seems to work.
You can remove that extra spacing using the following CSS code.
With regard to the second question, unfortunately the CSS didn’t change the large white spacing under the captions. You can see this post for example. The first in-post image has no caption and the second image does, and you can see the difference in spacing.
With regard to the first question, it is best seen in the screenshot I added, that there is a minimal size difference which I think has to do with the fact that there is supposed to be a border around the images with captions. You can check the link above and scroll down to an image with the caption “walking with camels” under the heading “Karakum Desert” and you can see the difference between that image with caption and the image above that has no caption. I hop you understand what I mean :).
If I use inspect element I can see some extra dimensions on the image with caption: width 722 and height 542, which is not what I have uploaded (the theme standard 730x548).
With regard to the second question, unfortunately the CSS didn’t change the large white spacing under the captions. You can see this post for example. The first in-post image has no caption and the second image does, and you can see the difference in spacing.
I can see the provided CSS code has reduced the spacing. See the first attached screenshot displaying the spacing without using the CSS code and the second screenshot displaying the spacing using provided CSS code.
If you want to reduce the spacing more then you can do so by using the following CSS code.
If I use inspect element I can see some extra dimensions on the image with caption: width 722 and height 542, which is not what I have uploaded (the theme standard 730×548).
I got your point now and confirm it.
You can increase the size of images having captions by using the following CSS code.
