Support

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.

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

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;
}

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.