Solved Templates

Rythm Template Event Backgroup Popup Image

Asked by Robert 3 years ago Last activity 3 years ago

Hi,

I am unable to locate and modify the image that popups up whenever the mouse hovers over an event. All of the other elements of the event list are found via SPPB editor but I do not find any settings to modify that particular item.

Regards.

Accepted answer

Marked as the solution

Ofi Khan Staff

3 years ago

Apology for the wrong CSS. This is the correct CSS and you have found it.

.event-list-item:after {
    background-image: url("../images/ticket-bg.png");
}

Please change your image name to anything but not ticket-bg and change the name in the CSS too.

8 more replies

Robert Asked this

3 years ago

Hi,

Additionally, the footer image as well. I find no way to modify that setting either.

Regards.

Ofi Khan Staff

3 years ago

Hello Robert

The image is added via CSS in template.css

.event-list-item:before{
    background-image: url(../images/divider.svg);
}

So, you have to change it on Template Options -> Custom Code -> Custom CSS

Which footer image are you talking about?

Best regards

Robert Asked this

3 years ago · edited

Hi,

The footer image I am referring to is the one that is in the template section referenced as "bottom" in the template layout. It is the image at the very bottom of the template design that the template callsout from /templates/rythm/images/footer-bg.jpg. I'm thinking possibly another CSS custom code entry.

Additionally, how do I remove that horizontal line in the middle of the image? It is not part of the actual image so it must be something in the template CSS placing it there.

Regards.

Robert Asked this

3 years ago

Still waiting for an answer please.

Ofi Khan Staff

3 years ago

Apology for the delay. Please use this CSS to remove the line.

#sp-bottom .container-inner:after{
    display: none;
}

Also, change this CSS to change the image

#sp-bottom {
    background: url(../images/footer-bg.jpg) !important;
}

Robert Asked this

3 years ago

Hi,

This code worked for the footer image, thanks.

Regards.

Robert Asked this

3 years ago · edited

Hi,

The above code did not modify anything. Of note, that code is pointing to an .svg instead of an image file. I did find this file; {SITE}/templates/rythm/images/ticket-bg.png, which has the exact dimensions of 1608 x 218 used by the events background pop-up image. I renamed that file to ticket-bg.png.OLD and the background pop-up disappears. Oddly though, when I created my own 1608 x 218 ticket-bg.png and placed it there, the light grey image magically reappeared instead of the image that I created. I then tweaked your code to that shown below, moved the ticket-bg.png image that I created into the {SITE}/images/ folder, cleared the site cache, and then reopened the site. Instead of getting a pop-up, I now just have the ticket-bg.png constantly being displayed. Not sure where to go from here.

Regards.

.event-list-item:before{
    background-image: url(../images/ticket-bg.png);
}

Robert Asked this

3 years ago

Hi,

Thanks for the assist... All elements now functioning as requested.

Regards.

Ofi Khan Staff

3 years ago

You are welcome 😊

I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on

This will inspire us to improve.