metallissimus wrote:I searched a little more and found this possible solution:
https://stackoverflow.com/questions/796 ... nto-a-link I understand the concept, but I don't think I can apply this on my own without hours of trial and error. So unless you say this is something you can easily give me some lines of code for I will just deactivate the hover effect, it's no big deal.
The simple answer here is that the caption element is simply a <div> element and not an <a> link element. We can't do that in X3, because 1. The image itself might be a link, and 2. the caption text might contain links, and you can't have <a> tags inside <a> tags. Besides, there is no option in X3 "[caption element link]". At best, you could hack it with Javascript by dynamically updating tags, but this is definitely a true "hack" ... Where would you assign the link? And what does it really solve? It only creates a scenario where the padding of the element is clickable, instead of "only" the text. After all, you can easily wrap all the text inside <a></a> to make it a link ... It doesn't seem worth it, but here is a hack:
1. Add your caption with the link. Something like this:
<a href="..." class="slideshow-link">text be here</a>
2. Settings > Custom > Custom CSS: Remove original padding from the caption element:
.fotorama__caption__wrap {
padding: 0;
}
3. Settings > Custom > Custom CSS: Add the padding internally to the link instead:
.slideshow-link {
padding: .8em 1.5em;
display: inline-block;
color: inherit;
}
Something like that. If you only want to affect caption padding on the specific page, add #2 into page Settings > Page > CSS instead. You may also need to do further style adjustments to the slideshow-link. As you understand, all it really does, is remove the padding from the caption and add it to the link instead, so that the entire caption seems clickable.