Awaiting an answer Templates

Modal Pop Up Thumbnail

Asked by Jeff Honeyager 5 years ago Last activity 5 years ago

Finatic Template

https://theworthof.com/

The slide has a modal pop up video.

How do I change the photo in the background on the right-hand-side for each slide?

All I could find is a css entry:

.slider-video-popup .sppb-modal-selector > span:nth-child(1) {
width: 80px;
height: 80px;
text-align: center;

background-image: url(../images/video-popup-bg.jpg);*
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
display: flex !important;
align-items: center;
justify-content: center;
margin-right: 30px;
position: relative;
overflow: hidden;
}

6 replies

Muntasir Sakib Staff

5 years ago

Hello Jeff,

Are you talking about background phpto? If yes, you can change the photo from here.

If not, please share a screenshot with us of the exact photo you are talking about.

Thanks!

Jeff Honeyager Asked this

5 years ago

I cannot upload screen shots.

Look at:

https://theworthof.com/

The slide displays, then under the title there is a modal-pop-up.

Pleay Video
A New Chapter

There is a tumbnail of a person - how / where do I change the thumbnail?

Thank you.

Pavel

5 years ago

Hi. As far as I can see in the code, this is a module. Check the list of modules and I think you will find it there (Extensions > Modules) .

Muntasir Sakib Staff

5 years ago

Hello there,

Please see the screenshot here. You will find it inside the module, @Pavel is right, the module id is 111. You can change everything from there.

Thanks!

Jeff Honeyager Asked this

5 years ago

Before posting the question, I searched for this image in the module setting.
It was not there.

I found the image. from the CSS - from "Inspect" in the browser:

.slider-video-popup .sppb-modal-selector > span:nth-child(1) {
width: 80px;
height: 80px;
text-align: center;
background-image: url(../images/video-popup-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
display: flex !important;
align-items: center;
justify-content: center;
margin-right: 30px;
position: relative;
overflow: hidden;
}

The image is there (public_html/templates/finion/images). But there is no way to change it in the SP Page Builder.

Thus, there is no way to change it for different pop ups - it is fixed.

Why the heck would this be used?

Muntasir Sakib Staff

5 years ago

Hello there,

First of all, sorry for a late reply.

I am afraid to say but you are not completely right. Yes, the image cannot be changed from the Front-end or back-end editor, but the image can be changed. See the screenshot.

As the image is completely loaded from the core code, you need to change it from here. The path to the folder is - templates > finion > css > template.css. From there, you can change the images from there. See the screenshot.

To know which images are there, please go to templates > finion > images. You can even add images there if you want to.

I hope, you can understand now how to do that and it helps you to solve the issue. If so, please close the post by accepting the most accurate answer so that others can get the solution easily.

Thanks!