Staff replied SP Page Builder

Replacing Crosshair with Logo in Page Builder Image Addon

Asked by Steve 5 years ago Last activity 5 years ago

Within Page Builder, I'm using the "Image" addon to display images. I have the setting set to "Open in Lightbox". How would I be able to replace the default crosshair to a custom semi-transparent image with the ability to click anywhere on the full image I want to expand?

Example:

From: https://ibb.co/DQZx5TV

To: https://ibb.co/wrxw942

I don't see any options for this that I'm aware, nor can I modify the CSS to make this change. If there is somewhere where this can be edited, please inform.

Any help would be great.

Thanks

4 replies

Rashida Rahman Staff

5 years ago · edited

Hi there!

Thanks for your query.

Customization support is prohibited here actually.

However, I can give you the file path only:
\components\com_sppagebuilder\addons\image\site.php

Here you will find "sppb-addon-image-overlay-icon" twice:

https://prnt.sc/11lcu9c

https://prnt.sc/11lcvlg

You can replace/remove the plus sign with other signs or text but maybe not with an image.
And code customization is your hands only.

Best Regards

Rashida Rahman Staff

5 years ago · edited

You can try the following code in your custom CSS:

.sppb-addon-image-overlay-icon{
    background-image: url("https://kilchphoto.com/meridianfence/images/2021/04/05/eclipse-3.jpg")!important;
    width: 100%;
    height: 100%;
    top:20px;
    left:20px;
    border-radius:50%!important;
    opacity:0.2!important;
}

I have used your same image url, so change it with your own choice!

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Hope this will let you closer to your wish!

Best Regards

Steve Asked this

5 years ago

Hey Rashida,

Thanks for your help. I added more code to the one you posted to prevent repeat and center. Here is what I added:

Final Result: https://ibb.co/2nxZNbs

.sppb-addon-image-overlay-icon {
    background-image: url("https://site/meridianfence/images/logo-watermark.png") !important;
  ***  background-repeat: no-repeat !important;***
    width: 100%;
    height: 100%;
    ***image-height: 75%;***
    top: 20px;
    left: 20px;
   * border-radius: 0% !important;*
    opacity: 0.2 !important;
    ***background-position-x: 50% !important;***
    ***background-position-y: 50% !important;***
}

Thanks again man, this really help!

Rashida Rahman Staff

5 years ago

Hi,

Really happy for you!

Yes, you can always put more css properties for styles. I have suggested only the basics to help you...

You may close the post:)

Best Regards