How to Show the Entire Featured Image

Hi @neautotalk

This can be achieve by doing some custom code in the plugin. But please keep in mind the code will be removed once you update the plugin in future. You have to again add the code in the plugin file after the update.

If you are ok with it and want to do this using the custom code then please use follow the steps to change the code.

Go to file. plugins/event-page-templates-addon-for-the-events-calendar/epta-template/epta-template-1.php

Go to line number 47 and change that line with
<div class=”epta-title-date no-image”>

Hope this helps.

Thank you. I added that and it worked. I will add it to my notes for future updates.

Hi @neautotalk

Happy to help you out ??

Hello again. The plugin updated today and wiped out the custom code I added. There is no way to add this now to line 47. Do you have a work around again for this.

Hi @neautotalk
Please use the custom CSS code given below and now you can remove the custom class we asked you to add in the code at line number 47.

.epta-title-date {
position: unset !important;
background: #222222 !important;
}
.epta-title-date .epta-light-bg{
opacity: .1 !important;
}

Note:- Add CSS under single template settings.
Events Addon>> Single Event Template>> Edit template>> Custom CSS

Hope this helps.

Thanks & Regards

I added the CSS as you suggested and removed the custom class section in the php file but it did not work. The background is gone but the text is still overlayed at the top. I attached the example. Should I put no-image back on line 47 of the template

Here are my entire custom CSS setting. Maybe one of them is conflicting?

.epta-share-area {
display: none !important;

}
.epta-related-head {
font-size: 1.2em;
}

.epta-countdown-timer {
display: none !important;
}

.epta-title-date {
bottom: auto !important;
top: 0px !important;
}

.epta-title-date h2 {
font-size: 1.4em;
}

.single-tribe_events .epta-image-area .tribe-events-event-image {
display: block !important;
}

.epta-map-area{
display:none !important;
}
@media screen and (max-width: 480px){
.epta-map-area{
display:block !important;
}
}

epta-title-date {
position: unset !important;
background: #222222 !important;
}

.epta-title-date .epta-light-bg{
opacity: .1 !important;
}

Hi @neautotalk

It seems when you added the css we shared with you today, you missed the dot before epta-title-date class.

CSS you have to add is

.epta-title-date {position: unset !important;background: #222222 !important;}

.epta-title-date .epta-light-bg{opacity: .1 !important;}

But, the CSS shared above is

epta-title-date {position: unset !important;background: #222222 !important;}

.epta-title-date .epta-light-bg{opacity: .1 !important;}

Hope this helps.
Let us know if you still need our help.

Thanks & Regards

Whoops ?? that’s why you are the experts. Fixed it now and it works. I think this should solve the issue going forward. Thanks again for your help.

Hi @neautotalk

Great to know, it worked for you.

Happy to help you out ??