|
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: https://eventespresso.com/developers/event-espresso-pros/
|
