In the image, my modal background is white. I have three questions about this:
1. How do I remove the modal border?
2. I’d like the modal arrows to be thinner but larger.
3. How do I position the modal caption below the image?
Many thanks for your help,
Bettina
Hi,
Unfortunately, there isn’t a built-in option to achieve what you’re looking for, so you’ll need to use CSS. I couldn’t inspect the elements directly because your site has right-click protection enabled, but the solution should look something like this:
body .mfp-bg {
background-color: #0000004a;
}
Hi Calin,
I’m sorry. I’ve now disabled the right-click function.
The CSS code you sent me isn’t doing what I wanted. Please try again.
Bettina
Hi,
Please try this custom css:
body .mfp-figure:after {
box-shadow:none;
}
body .mfp-bottom-bar {
padding: 0;
}
body .mfp-counter {
text-align: center;
position: relative;
padding-right: 0px;
}
body .mfp-arrow-left:before,
body .mfp-arrow-right:before {
font-family: FontAwesome;
font-size: 60px;
}
body .mfp-arrow-left:before {
content: "\f104";
}
body .mfp-arrow-right:before {
content: "\f105";
}
Set the code in the theme panel > custom code > custom css and it should look like this – https://prnt.sc/DN8c7yBm07MK
Thank you!
Hello again,
Thank you very much for your reply. Now it looks exactly as I wanted, except for the arrows. Could I get the arrows in the style (icon or font) of “tagdiv multi-purpose”? Sorry for my unclear description earlier.
Best regards Bettina
Hi,
Ok, if you want to use the multi-purpose icon, then please replace the above css with this one:
body .mfp-figure:after {
box-shadow:none;
}
body .mfp-bottom-bar {
padding: 0;
}
body .mfp-counter {
text-align: center;
position: relative;
padding-right: 0px;
}
body .mfp-arrow-left:before,
body .mfp-arrow-right:before {
font-family: td-multipurpose;
font-size: 60px;
}
body .mfp-arrow-left:before {
content: "\e960";
display: inline-block;
transform: rotate(180deg);
}
body .mfp-arrow-right:before {
content: "\e960";
}
Clear the cache and check the results.
Hi Calin,
I’m getting the wrong arrows on two posts, but on all the others it’s exactly as I wanted. This happens every time I click on a modal image. Please help me.
The two wrong sites:
https://piawessels.de/theaterarbeit/
https://piawessels.de/
Correct site:
https://piawessels.de/sommernachtstraum-1/
Regards Bettina
Hi,
This is happening because the td-multipurpose font is not loading across the entire website, it only loads on pages where an element explicitly uses that font.
To fix this, you can force the font to load globally by adding the code in Theme Panel → Analytics / JS Codes → Header Code (the first field for code).
You can find the code snippet here: https://pastebin.com/7M2tGxdN
After adding it, the font should load properly across all pages.
Thank you!
Hi Calin,
I would like the image caption to appear in black text on a white background within the modal image. Please help me.
best regards
Bettina
Hi,
Normally, this CSS should do the adjustments:
body .mfp-title,
body .mfp-counter{
color: #000;
background: #fff;
}
Unfortunately, I didn’t find an image on the site with a caption, only the count of images.
Thank you!
https://piawessels.de/sommernachtstraum-2/
Hi Calin,
Okay, I understand. So I added captions to all the images under the “SNT 2” menu item. Now I see all the captions below the image. When I enlarge the image (modal), I still see the image counter.
The caption should appear when I click on the image, and the text should be below the image, not inside it.
I’m sorry if I didn’t explain myself clearly.
Regards
Bettina
Hi,
To display the text under the image, please replace your current CSS with the following:
body .mfp-title,
body .mfp-counter {
color: #000;
background: #fff;
text-align: center;
}
body .mfp-bottom-bar {
margin-bottom: 0;
}
Regarding the caption text in the modal, I’ve performed additional tests and it appears to be a bug. The caption is displayed on the image itself, but it is no longer shown in the popup.
I’ve added this issue to our bug list, and our developers will investigate and provide a fix.
Thank you for your understanding!
