|
John Fineberg
|
August 11, 2015 at 2:22 pm
I like to display venue name and address on my registration pages, but I don’t like to take up a lot of space with a map, too. A map is fine if there’s only one on the page. Yet when you have a lot of upcoming classes on one page, all with the same venue, seeing that map over and over again makes for slow scanning for site visitors. Is there a way to eliminate the map only?
|
|
Tony
|
August 11, 2015 at 2:46 pm
Hi John,
You can enable Google Maps on a per venue basis.
Go to Event Espresso -> Venues.
Edit the venue and in the sidebar you’ll find the option to display the map for that venue – http://take.ms/wcGh1
Set that to No, update the venue and recheck your listing.
Has it been removed?
|
|
John Fineberg
|
August 11, 2015 at 3:05 pm
Thanks, Tony. Yes, that worked. Now is there a way to indent the Class Location, Venue and Address upward (maybe half an inch) and to the right (indented just like the Date and Time are), so that it shows up like one entire class listing, rather than a bunch of separate information, all scattered around the page? Take a look at this page to see what I mean: http://www.cpr-twincities.com/upcoming/combo/
|
|
Lorenzo Orlando Caum
|
August 11, 2015 at 4:04 pm
Hi John,
Have you considered using a light border to separate the events? This will work and can be added to your child theme’s stylesheet or a plugin like My Custom CSS or Reaktiv CSS Builder:
article.espresso_events {border-bottom: 3px solid #EEE;}
article div.espresso-venue-dv {padding-left:25px;}
The above CSS as indents your venue information.
Thanks
—
Lorenzo
|
|
John Fineberg
|
August 11, 2015 at 8:30 pm
Thank you, Lorenzo. That code was helpful. I’ve experimented with the border color and point size, as well as the padding, and ended up with pretty much what you recommended. Is there any way to raise the date, location and such upward about half an inch?
|
|
John Fineberg
|
August 11, 2015 at 8:33 pm
Thanks, Lorenzo. I added your code, then experimented a bit with it (ending up with almost exactly what you recommended). Is there any way to raise the date, location and such up about half an inch?
|
|
Tony
|
August 12, 2015 at 2:52 am
There is a ‘clearing’ div just below the Register button to prevent exactly what you are requesting – http://take.ms/kK1SQ
This is to keep the ticket selector separate from those details.
You can try:
.event-tickets .clear {
display: none;
}
The spacing around each of the Class, venue and address sections is caused by you theme adding a border of 20px to the bottom of H tags using this:
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin-bottom: 20px;
}
So you’ll need to override those rules for that specific section, you can use something like:
article div.espresso-venue-dv h3,
article div.espresso-venue-dv h4,
article div.espresso-venue-dv p {
margin-bottom: 5px;
}
Which looks like this – http://take.ms/azcf1
|
|
John Fineberg
|
August 12, 2015 at 10:26 am
Much better! Thank you, Tony. Looks good on my phone, too (at least in landscape view, though not so good in portrait view).
Two more questions regarding the same registration page:
1) Where is the color controlled for the line just below the class? That’s the line that currently says “payment required within 1 hour of registration.” The wording was changed in the site-specific plugin that Lorenzo made for me a while back. Here’s the code I currently have for that line, in case that helps you:
‘This ticket is required and must be purchased.’ => ‘payment required within 1 hour of registration’,
2) Is there a way to eliminate “Class Location” and its adjacent icon, then move the venue info up into that space? It just seems like “location” and “venue” are redundant. I might even want to eliminate the venue line, too, as the name of the venue is unimportant (at least at this time) and the address is all they really need. Whatever clutter I can eliminate and whatever I can do to help registrants focus on the important details, the better their experience will be.
|
|
Tony
|
August 12, 2015 at 11:44 am
Both can be done with CSS
1) Where is the color controlled for the line just below the class?
.tkt-slctr-tbl td .ticket-required-pg {
color: green;
}
2) Is there a way to eliminate “Class Location” and its adjacent icon, then move the venue info up into that space?
Theres a few ays, easiest is with CSS:
article div.espresso-venue-dv h3 – targets the Class Location section.
article div.espresso-venue-dv h4 – targets the venue line.
Remove both with:
article div.espresso-venue-dv h3,
article div.espresso-venue-dv h4 {
display: none;
}
|
|
John Fineberg
|
August 12, 2015 at 12:01 pm
Wow, so much cleaner looking, Tony! Thank you!
One more adjustment for now, please. How can I add space after address and before the separator line, so that it approximately equals the amount of space at the top of the listing?
|
|
Jonathan Wilson
|
August 12, 2015 at 2:24 pm
Hey John,
You can add this CSS:
.espresso_events, .espresso_venues {
padding-bottom: 28px;
}
|
|
Tony
|
August 12, 2015 at 2:36 pm
Hi John,
Generally speaking we are more than happy to help with CSS customisations, so please don’t take this post the wrong way, but maybe it would be best if we showed you how to find the element to select within Chrome Dev Tools?
That way you can play around making changes all you want within the browser (changes within Chrome Dev Tools are only available on your machine and on the current page, if you refresh it or click another link the browser loads the CSS from your server again so you can start again), then when your happy with the outcome, copy the styles to your custom CSS plugin.
The above is basically what we do when users request changes, then we simply add post up the CSS we applied.
We don’t have a ‘How to apply custom CSS’ tutorial post, but I’m thinking it would be good to create one, for the time being I recommend taking at look at this post:
http://wpninjas.com/how-to-write-the-perfect-css-rule-part-1/
Which explains how to properly structure CSS rules and create more specific rules that can overrules others, then part 2:
http://wpninjas.com/how-to-write-the-perfect-css-rule-part-2/
Which shows you how to use Chrome Dev Tools to find the element you want to style, it takes a little practice and will take a little time to get used to, but it allows you play around with the look by applying rules, without the worry of breaking the site.
|
|
John Fineberg
|
August 12, 2015 at 2:56 pm
Thank you, Jonathan. That worked very well. All in all, with the assistance of Tony, Lorenzo and you, this customization project has been a success.
I hate to be a broken record, but I really liked EE3’s Events Calendar Table Template. It was clear and compact. Other than the quantity selector in EE4’s registration form, it’s the EE3 add-on produced exactly what I like … without any customizations necessary (that I remember).
But thank you for your suggestion about Chrome Dev Tools, Tony. Some day when I have some free time (oh, when will that day come, I wonder???), I’ll check it out.
|
|
Dean
|
August 13, 2015 at 5:02 am
Hi John,
I’m glad the team could help you!
Regarding the template, have you considered the EE4 Events Table View Template? https://eventespresso.com/product/eea-events-table-view-template/
It’s not quite the same, but it is compact.
|
|
John Fineberg
|
August 13, 2015 at 8:35 am
Hi, Dean. I have tried the Table View template before. In fact, I’m using it on one page:
http://www.cpr-twincities.com/upcoming/
It’s fine for longer lists, like on that page. But it’s a little too compact and, frankly, lifeless looking. This page at least has some life and energy to it:
http://www.cpr-twincities.com/upcoming/cpr/
And now that I’ve essentially refined your current way of displaying events (with your team’s great assistance), I’m ready to move forward.
I’m only looking backward because I think EE3’s presentation was far better than the current (unadulterated) offering. My favorite part of the EE3 template was the colorful and eye-catching calendar dates. I also liked how clear each individual event was presented.
The current presentation (before all of the code your team has given me) seems scattered and disjointed. So many elements that just don’t seem to be cohesive, as EE3’s template had presented so nicely.
I’m not adverse to trying something new. But, after trying something new for eight months, I’m still quite convinced that Event Espresso unnecessarily threw out something quite wonderful.
|
|
Dean
|
August 14, 2015 at 4:34 am
Hi John,
Thank you for the feedback, that really does help us when looking at future projects. For now, the best I can do is add it to our feature request list, but hopefully in the future we can provide some more elegant ways to display events.
|
|
John Fineberg
|
August 14, 2015 at 8:02 am
“Elegant” is a great word to describe what I’m requesting, Dean. FYI, I’m pretty sure I was told it would be added to that request list half a year ago (more or less), when I first brought up how much better I liked EE3’s Events Calendar Table Template. I hope it makes it all the way to the implementation list this time. In the meantime, I’m much happier with what I have today than what I had just a few days ago. Thanks again for your assistance!
|
