Support

Home Forums Event Espresso Premium Display Venue Details … Without Showing a Map (Revisited)

Display Venue Details … Without Showing a Map (Revisited)

Posted: August 27, 2015 at 9:36 am


John Fineberg

August 27, 2015 at 9:36 am

Sorry, I thought I was done on this topic, but it looks like I need to reopen it:

https://eventespresso.com/topic/display-venue-details-without-showing-a-map/

I’ve just discovered something quirky. Though everything’s looking “elegant” on these pages:

http://www.cpr-twincities.com/upcoming/combo/
http://www.cpr-twincities.com/upcoming/cpr/
http://www.cpr-twincities.com/upcoming/firstaid/

… but it’s not laying out properly on this page:

http://www.cpr-twincities.com/upcoming/bls/

The Register Now button is out of place. Any idea why that’s happening and how to fix it?


Lorenzo Orlando Caum

  • Support Staff

August 27, 2015 at 9:42 am

Hi John,

Update the custom CSS for “.spco-whats-next-buttons input,
.ticket-selector-submit-btn” to this:

.spco-whats-next-buttons input,
.ticket-selector-submit-btn {
color: #fff;
border-width: 2px;
border-color: #ff0000;
padding: 1em;
background: #29aac0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE));
background: -moz-linear-gradient(24% 21% 270deg,#3DB8FE, #3DB8FE, #25A2F1 50%);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.4);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
border: 1px solid #25A2F1;
	float:right;
}

The button should then position itself in the right area under the ticket selector.


Lorenzo


John Fineberg

August 27, 2015 at 10:05 am

You’re a magician, Lorenzo. That worked perfectly.

While I have you here, can you work magic with this page, too:

http://www.cpr-twincities.com/upcoming/firstaid/

Is there a way to make the following description drop down a tiny bit, so it’s not so crowded:

Class begins at 11:30 a.m. with material common to both CPR and First Aid. Those people not taking CPR will be dismissed around 1:00 p.m., but will need to be back by 3:30, and class will end around 6:00 p.m. To receive certification, you must attend both the 11:30-1:00 and the 3:30-6:00 sessions.)


Lorenzo Orlando Caum

  • Support Staff

August 27, 2015 at 10:29 am

Hi John, what specific change are you trying to make there?

Are you trying to move that block of text down or are you trying to reduce the width?


Lorenzo


John Fineberg

August 27, 2015 at 11:00 am

Very interesting question, Lorenzo. I was thinking of moving the block down. But reducing the width would probably also accomplish the goal of separating elements. Let’s go with your suggestion. I think that will look better.

If possible, please shoot for a distance between the description text and the “Register Now” button to be approximately the same as the distance between the “Register Now” button and the quantity selector above.


Lorenzo Orlando Caum

  • Support Staff

August 27, 2015 at 12:28 pm

Hi John,

Try this line of CSS in your custom CSS plugin:

.espresso_events div.event-content {padding-top:30px}

Feel free to increase the px value (e.g. 30px) to increase the spacing or reduce it to reduce the spacing.


Lorenzo


John Fineberg

August 27, 2015 at 12:39 pm

Lorenzo, would that go somewhere within the .spco-whats-next-buttons input,
.ticket-selector-submit-btn code you gave me earlier, or separate from that code? When I tried it as a separate entry, the system asked me, “Do you really want to do that?”


John Fineberg

August 27, 2015 at 2:43 pm

I tried again, and this time it allowed me to place that code separately. I played around with the px value and got it pretty well balanced at 20px.

If I wanted to try the other idea you suggested (“reduce the width” of the class description), how would that be accomplished?


Dean

August 28, 2015 at 4:37 am

Hi,

If you’re just trying to change the width of the text block it would be:

.event-content {
    width: 50%;
}

You can use px instead of percent if you wish (e.g. 400px).

Also you may want to centre it:

.event-content {
    width: 50%;
    margin: 0 auto;
}


John Fineberg

August 28, 2015 at 8:13 am

Excellent suggestions, Dean. I tweaked it a bit and ended up with this:

.event-content {
width: 450px;
padding-left:50px;
}

And I set the following to zero, rather than deleting it altogether, just to remind me where to adjust this element later, should I ever want to tweak it more:

.espresso_events div.event-content {padding-top:00px}

You Event Espresso guys have been outstanding, as usual! The contrast between your technical support and that provided by my theme developer (MySiteMyWay) couldn’t be more drastic. Theirs is seriously worthless. I think about leaving them pretty much every day. I even started looking at Iced Mocha last week. But the time and expense in converting my site to something better would overwhelm me. Still, I can dream.

Thanks once again! Case closed.


Lorenzo Orlando Caum

  • Support Staff

August 28, 2015 at 8:21 am

Hi John,

There is an extra zero on the second CSS that you mentioned:

.espresso_events div.event-content {padding-top:00px}

Try using this instead:

.espresso_events div.event-content {padding-top:0;}


Lorenzo


John Fineberg

August 28, 2015 at 8:58 am

Thanks, Lorenzo.

The support post ‘Display Venue Details … Without Showing a Map (Revisited)’ 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.

Event Espresso