Image Overlay Addons - The Whole Image Backgound Area Clickable And Hyperlinked - Question | JoomShaper
Back to the questions

Image Overlay Addons - The Whole Image Backgound Area Clickable And Hyperlinked

M

Mohammed

SP Page Builder 3 years ago

Hi There,

Im using Joomlshaper Empire Templte Joomla3 v.2.1

How to Make Image Overlay Addons in theSP Page Builder the Whole Image Area Clickable, now only the Below title is clickable, I want also to give hyperlink to the back image.

tp://)

0
12 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #87012

Hi Mohammed.

Delete link from title, use link in button instead.

Add your own class name to addon's CSS Class field, and use following css code:

.your-class .overlay-image-title {
    position: static;
}
.your-class .overlay-image-button-wrap,
.your-class .overlay-image-button-wrap a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.your-class .overlay-image-button-wrap {
    margin: 0 !important;
    transform: none !important;
}
.your-class .overlay-image-button-wrap a {
    background: transparent !important;
    font-size: 0 !important;
}
0
Ariba
Ariba
Accepted Answer
Support Agent 3 years ago #86092

Hello

Thank you for your query & for sharing the screenshots. Could you kindly provide your site url, please?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #86094

Hi

Thanks for contacting us. Could you please give me your site URL so that I can check?

-Regards.

0
M
Mohammed
Accepted Answer
3 years ago #86101

http://www.onlinezoneit.com/nl-properties-demo/index.php

0
M
Mohammed
Accepted Answer
3 years ago #86168

Any luck with the Question Above !!

0
Ariba
Ariba
Accepted Answer
Support Agent 3 years ago #86990

Hello Mohammed

You have to make changes in the code in the following file in order to make the whole image area clickable, as you want.

your_template\components\com_sppagebuilder\addons\image_overlay\site.php (after line 86)

But this will require customization which we cannot provide, as per our Support Policy.

0
M
Mohammed
Accepted Answer
3 years ago #87134

Thanks alot Dear Pavel, you are my hero. Well done, it is working perfectly as you said.

0
Pavel
Pavel
Accepted Answer
3 years ago #87151

You are wellcome

0
J
Jesper
Accepted Answer
9 months ago #181712

Hi Pavel I have tried your custom css above, but I can not get it to work. Has something changed in the newer versions of SPPB? I really need the image in imageoverlay to be clickable

0
Pavel
Pavel
Accepted Answer
9 months ago #181759

Hi Jesper.

Nothing has changed. It still works.

To get it works you need to configure the button and add your class name.

0
JO
Jean-Pierre OBRADO
Accepted Answer
9 months ago #181832

Hello Pavel, thank you for your help. Your solution works very well on laptop but it doesn't on iphone and ipad. The button is visible on both. Do you have an idea ?

I found a solution : when you paste css in sppb page settings / page css it works.

Thank you again !

0
Pavel
Pavel
Accepted Answer
9 months ago #181895

I found a solution : when you paste css in sppb page settings / page css it works.

Hi.

Glad you solved the problem. However, the place where you add the code does not matter if you do it without mistakes. I think your problem was connected with something else, but not with the place.

Adding code to Page Settings / Page CSS will make you do it each time on each page and increase the volume of unnecessary code. One-time addition of the code in custom.css file will save you from this.

0