Support

Home Forums Event Espresso Premium Customizing Grid Template in EE4

Customizing Grid Template in EE4

Posted: June 15, 2015 at 3:26 am


Melissa Walters

June 15, 2015 at 3:26 am

We have EE4 and have been trying to use the Grid Template with the Everest theme in WordPress. We’re looking for either rows of tiles similar to what is shown in the EE examples or what the person in this inquiry was seeking. https://eventespresso.com/topic/how-to-customize-grid-template-to-display-event-details-by-default/

What we achieve instead is a small photo tile followed by information and then another tile and words, cascading down the page rather than in rows.

Following are our questions.

1. Assuming we have absolutely no experience in CSS, is there a primer or some form of guidance we could use on what is CSS and how we should be using it for our website?
2. It seems only the Featured image is used. We prefer not to use featured images for the event because it is not the image that shows when using the calendar. Is there a way to use an image other than a featured image for the Grid feature? If not, is there a way to use a featured image for the calendar? If not, is there a way to set a featured image without it showing up in the registration page?
3. Is there a way to eliminate the text under the image so that it displays just the tiles?

Thank you!


Dean

June 15, 2015 at 4:40 am

Hi Melissa,

1) There is an amazing amount of learning materials on CSS on the internet. Here are four I found:

http://teamtreehouse.com/library/css-basics
https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/p/css-basics
http://www.htmldog.com/guides/css/beginner/
http://www.codecademy.com/en/tracks/web

A Google search will no doubt list hundreds, probably thousands more.

2) The featured image is part of the addon, and can only be changed by modifying the template/creatign a custom template via PHP, which is significantly more advanced than CSS.

3) See the CSS below, it will bring the text out from the image and I added a bit that will hide the start date and button text

Regarding the styling where the text is below the image, it can be done (in a basic way) with the following CSS:

.ee_grid_box a.darken span {
  position: relative;
  opacity: 1;
}

.ee_grid_box a.darken {
  background: none;
}

.ee_grid_box a.darken:hover span {
  color: #000;
}

/* this bit will hide the start date and button text */

.ee_grid_box .start-date, .ee_grid_box .button-text, .ee_grid_box br { display:none; }

That CSS can be added to your themes style.css, though in order to preserve the CSS through theme updates we recommend adding it to either: a child themes style.css, your themes CSS options if it has any, or a plugin such as My Custom CSS.

I’ll be honest though, it sounds like you really need to hire a developer for a small job to create a custom template for you. Yes you can modify an existing one like above, but it might simply be easier and more controlled to create something custom.

We have a list of recommended developers here: http://eventespresso.com/developers/event-espresso-pros/

The support post ‘Customizing Grid Template in EE4’ 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  Dean 4 years, 1 month ago ago

Topic Tags

Tagged: ,

Notifications

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