- This topic has 9 replies, 2 voices, and was last updated 5 years ago by David.
-
AuthorPosts
-
March 13, 2019 at 5:32 pm #838267Ronja
I have a second issue which is a bit difficult to explain.
https://www.backpackertales.com/reiseziele/ozeanien/
From this link you can see, I created a box with a link to a category.
I put in the text and picture in PowerPoint and just uploaded it.
As I changed the font style now, I was wondering if there´s a way to just upload the picture without text and put the text in the box via Generatepress.
I hope you understand what I mean.March 13, 2019 at 6:00 pm #838282DavidStaffCustomer SupportHi there,
if you add the text as the Caption of the image this should display on screen. We can then assist with some CSS to make it look like it does in the image. Let me know
March 13, 2019 at 6:18 pm #838291RonjaOkay great, what css must I add?
March 13, 2019 at 6:21 pm #838293RonjaAnd one more thing: where can I change the font style and size without affecting the caption of the pictures in my blog posts?
March 13, 2019 at 6:22 pm #838294DavidStaffCustomer SupportTry this:
figure.wp-block-image.caption-overlay { position: relative; } figure.wp-block-image.caption-overlay figcaption { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -100%, 0); font-size: 2em; font-weight: 700; color: #fff; font-family: 'Roboto Slab'; }
In the block editor, select the image block, in the Settings Tab > Advanced give the block a Additional CSS class of
caption-overlay
. Then this will only apply to that image.March 13, 2019 at 6:29 pm #838296RonjaGreat, that worked! If I add more destinations, will the css automatically work or will I have to add more codes?
How can I change the font family to roboto slap?March 13, 2019 at 6:41 pm #838300DavidStaffCustomer SupportI edited the code above, to include the
font-family: 'Roboto Slab';
property, just amend the CSS to include that. That font will need to be one of those you have selected in your customizer.No more code. Just create a new image block like the above and give it the same Additional CSS class. Or just duplicate the block and change the image, caption, link etc.
March 13, 2019 at 6:58 pm #838304Ronjathis one works:
figure.wp-block-image {
position: relative;
}figure.wp-block-image figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -100%, 0);
font-size: 2em;
font-weight: 700;
color: #fff;
font-family: ‘Roboto Slab’;
}but then its in my blog images as well. if I add caption-overlay, nothing happens
March 13, 2019 at 7:02 pm #838306RonjaAh now I got it. Forgot the additional css class.
Thank you very much! 🙂March 13, 2019 at 7:16 pm #838311DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.