Rythm Template Event Backgroup Popup Image - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Rythm Template Event Backgroup Popup Image

Robert

Robert

Template 2 years ago

Hi,

Rythm Demo

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.

0
10 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #124675

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.

0
Robert
Robert
Accepted Answer
2 years ago #123713

Hi,

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

Regards.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #123722

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

0
Robert
Robert
Accepted Answer
2 years ago #123857

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.

0
Robert
Robert
Accepted Answer
2 years ago #124178

Still waiting for an answer please.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #124218

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;
}
0
Robert
Robert
Accepted Answer
2 years ago #124638

Hi,

This code worked for the footer image, thanks.

Regards.

0
Robert
Robert
Accepted Answer
2 years ago #124634

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);
}
0
Robert
Robert
Accepted Answer
2 years ago #124822

Hi,

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

Regards.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #124833

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 

  1. Joomla Extension Directory
  2. TrustPilot

This will inspire us to improve.

0