Support

Home Forums Event Espresso Premium Grid view template: make full picture clickable

Grid view template: make full picture clickable

Posted: August 20, 2018 at 7:22 am


bazarts

August 20, 2018 at 7:22 am

Hello,

I would like to make the whole picture in the grid view clickable instead of only the words “register”. Is that somehow possible?

Kind regards!
Miet


Josh

  • Support Staff

August 20, 2018 at 11:47 am

Hi Miet,

You can add the following CSS to your site’s Customize > Additional CSS panel:

.ee_grid_box_v2 .event-link a {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
z-index: 10;
padding: 10px 0;
margin: 0 0 0 -10px !important;
}

.event-title,
.start-date {
position: absolute;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
width: 200px;
margin: 0 !important;
font-size: 14px;
line-height: 16px
}

.ee_grid_box_v2 .event-title {
top: 4em;
}

.start-date {
top: 8em;
}

Please note the last 4 values in the above (font-size, line-height, top, and top) may need to be tweaked a bit depending on the titles of the events & your WordPress theme.


bazarts

August 20, 2018 at 11:52 pm

Hello,

This is just perfect! This is what I made of it: https://bazarts.be/vrije-tijd/in-de-hangar/

Now there’s only one little thing I would like to do and I hope it’s possible, because it would make my site just the way I want it to be.

Is there a way to make the title, which is already below the picture, be always visible and not only on hover. So the you see the picture and the title always, and the date and link only on hover…?

I really hope it’s possible…

Kind regards,
Miet


Josh

  • Support Staff

August 21, 2018 at 8:04 am

Hi Miet,

The way the markup is structured would not allow for showing the title always, without showing the date too. So for example you could add this CSS to disable the hiding of the title & date, with the link text hidden until hovered:

.ee_grid_box_v2 .ee_overlay {
    top: 0;
    background: rgba(0, 0, 0, 0.1) !important;
}

.event-link a {
font-size: 0pt !important;
}

.event-link a:hover {
font-size: 16px !important;
transition: font-size 0.5s ease-in;
}

If you’re comfortable with modifying PHP templates, you could move the title out of its container to allow it to be shown on its own without being hidden


bazarts

August 21, 2018 at 10:01 am

Hi Josh,

This is already great! But I would like to try to change the PHP templates if you can tell what I should do.

Thanks in advance!

Kind regards,
Miet


Josh

  • Support Staff

August 21, 2018 at 12:54 pm

Your first step will be to create and activate a child theme by following this guide:

https://codex.wordpress.org/Child_Themes

Step 2: You download a copy of the grid template add-on and find the /templates/espresso-grid-template.template.php and put the espresso-grid-template.template.php file into the child theme folder

Step 3: remove the code from line 48:
<div class="event-title title"><?php echo $post->post_title; ?></div>
and place the code in between the two closing divs that follow. Here’s a gist of the code change in context:
https://gist.github.com/joshfeck/ba86a670a1d9317cece358b4725a573f#file-espresso-grid-template-template-php-L51

Step 4: You’ll remove and replace the CSS from above with this:

.ee_grid_box_v2 .event-link a {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
z-index: 10;
padding: 10px 0;
margin: 0 0 0 -10px !important;
}

.start-date {
position: absolute;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
width: 200px;
margin: 0 !important;
font-size: 14px;
line-height: 16px
}

.start-date {
top: 8em;
}


bazarts

August 22, 2018 at 3:29 am

Hello Josh,

A million times “thank you”. I am so happy with this…

Kind regards,
Miet


Josh

  • Support Staff

August 22, 2018 at 8:08 am

You’re welcome Miet.

If you have a moment and would like to share a quick note about your experience with Event Espresso here, that would be awesome.

The support post ‘Grid view template: make full picture clickable’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 1 year, 1 month ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!