Hi,
I really have to place the image caption (or any other image textual information – preferably the caption) on top of the image and not any other place.
I need it for both the Homepage and Posts and Amy other places where the features image is being displayed.
I saw that you did send information on how if the past, but you are no longer here.
Locations 1: https://www.screencast.com/t/VZfUxwq0lHv
Locations 2: https://www.screencast.com/t/GsH2lIus7MVB
Hi,
Please provide me a link to your website, in this way I will be able to help you!
This can be done with some custom code or some changes in theme files.
Thank you!
1. Thanks the sites is: yoloqueen.com
2. as mentioned I want it for both homepage and posts/pages
Hi,
Inside the article can be set using this custom css -> https://i.imgur.com/IG5O44f.png
.tdb-caption-text {
position: absolute;
top: -24px;
}
.tdb_single_featured_image .tdb-block-inner {
margin-top: 24px;
}
The code need to be set in theme panel> custom code> custom css.
But on homepage is set the post title, not the Image Caption, this can be edited only on flex blocks and flex grids with tagDiv Composer -> https://i.imgur.com/pK1xhq6.png and search for meta info https://i.imgur.com/hVeSWLN.png -> https://i.imgur.com/25fRF3J.png
Thank you!
Hi,
Thank you for your prompt reply.
The caption you show in the code is above the image.
I want ON the image not above, not below, not right not left simply on the image.
Hi,
Then please try this custom css -> https://i.imgur.com/VqVljFk.png
.single .wpb_wrapper .tdb-caption-text, .tdb_single_featured_image .tdb-caption-text {
margin: -24px 0 0 24px;
color: white;
}
Hope this will help you better!
Thank you!
1. I need to create some kind of a background to the text as you can see here I have shared with you two desired options: https://imgur.com/a/Du7ZJsp
2. For mobile it is not working so I’m testing the following:
.td-post-featured-image .wp-caption-text {
margin: -34px 0 0 14px;
color: white;
}
BUT if that is the case I also need to do:
.td-page-content p, .td-post-content p, .woocommerce #tab-descriptiony p, .td-page-content li, .td-post-content li, .woocommerce #tab-descriptiony li {
margin-top: 25px;
}
CAUSE otherwise the text pushed up and go too close to the image. Can you please check my code here?
Thanks,
Hi,
1. I manage to create a new css, please try this one :
.wp-caption-text, .tdb-caption-text {
color: black;
margin: -48px 0 0 20px!important;
padding: 8px 16px;
background: #ffffffcf;
position: absolute;
text-align: center;
}
If there are some pages or posts where is not apply, please provide me a link to them.
2. Also for mobile, if you are using the mobile theme plugin, the code need to be set here -> https://i.imgur.com/W5KEgDe.png please try this custom css
.wp-caption-text, .tdb-caption-text {
color: black;
margin: -48px 0 0 20px!important;
padding: 8px 16px;
background: #ffffffcf;
position: absolute;
text-align: center;
}
Thank you!
Last question: why does mobile not keeping the color diff between the capture section as you can see it is q mix of green and black while in mobile it doesn’t.
Other than that I would like to tell you that your answers are amazing and perfect!!!
Thanks a lot.
Also, for some reason, the code isn’t working for Gossip Pro Template.
I guess because it is using figcaption or something… can you give me the code for it and for its mobile theme version as well please.
Thanks.
Hi,
Using the mobile theme plugin you’ll use a different theme for mobile version, mobile theme is faster then responsive version, but is more simple, in order to make the mixed caption you can use this custom css -> https://i.imgur.com/zISkUNH.png
figcaption a, .wp-caption-text a{
color: #399998;
}
The code need to be set in mobile theme!
Yes, for gossip you need to use an extra class, please try this custom css:
figcaption, .wp-caption-text, .tdb-caption-text {
color: black;
margin: -48px 0 0 20px!important;
padding: 8px 16px;
background: #ffffffcf;
position: absolute;
text-align: center;
}
Hope this will help you!
Thank you!
Perfect! – thanks a lot đ
