This
I am not good enough at css to guide you to do it, but it should be doable using minor modification to php code and combine with css
1. Open the file components/com_eventbooking/view/common/tmpl/events_default.php, find this line of code:
<div class="eb-category-<?php echo $event->category_id; ?> eb-event<?php if ($event->featured) echo ' eb-featured-event'; ?> clearfix" itemscope itemtype="
schema.org/Event
">
2. Change it to:
<div id="eb-event-<?php echo $event->id; ?>" class="eb-category-<?php echo $event->category_id; ?> eb-event<?php if ($event->featured) echo ' eb-featured-event'; ?> clearfix" itemscope itemtype="
schema.org/Event
">
With that modification, each event is now surrounded by a div with id="eb-event-ID_OF_EVENT", for example id="eb-event-1", id="eb-event-2"
2. The next part would be adding custom css to use background image for each event to media/com_eventbooking/assets/css/custom.css
#eb-event-1
{
// CSS code to handle background image for event with ID = 1 here
}
#eb-event-2
{
// CSS code to handle background image for event with ID = 2 here
}
and so on...
Hope it gives you some help
Regards,
Tuan
And my custom CSS looks
.input-append input, .input-append select, .input-append .uneditable-input {
font-size: 18px;
line-height: normal;
height: auto;
}
.eb-container label.control-label {
font-size: 22px;
line-height: normal;
}
#eb-event-1
{
background: url(ticketbacground2.png) no-repeat center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
border: none !important;
}
#eb-event-2
{
background: url(ticketbacground1.png) no-repeat center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
border: none !important;
}
