Support

Home Forums Event Espresso Premium EE4 Event List Page – Event date time layout

EE4 Event List Page – Event date time layout

Posted: February 16, 2016 at 1:26 am

Viewing 5 reply threads


Charu Chandiram

February 16, 2016 at 1:26 am

Have an event list page set up at https://classicalhatayoga.com/eventschedule/ Is there a way to change the layout of the event listings so that:
1. For Session 1- Date – Time — how to get these to display on a single line for each Sessions instead of taking 3 lines
2. Is there a way to have the Register button moved up to be inline with the event name?
3. Is there a way to hide the “Upcoming Events” title at the top of the page – don’t know where that is coming from. I already have a child theme with and
#page-header {
display: none;
}
.post-meta {
display: none;
}

Thanks for you help.


Lorenzo Orlando Caum

  • Support Staff

February 16, 2016 at 10:11 am

Hello,

This CSS should be able to help move the date times onto one line:

/* Reposition the times for an event so it appears inline with the date */
.espresso_events .ee-event-datetimes-li>br {display:none;}
.espresso_events .dashicons.dashicons-calendar, .espresso_events .dashicons.dashicons-clock { visibility:hidden; }

It can be added to your site through a plugin like Simple Custom CSS or Reaktiv CSS Builder.

The register button appears further down as you can have multiple ticket options and then you would select the choices and then click to start the registration.

This CSS will hide the title on that specific page:

.page-id-695 .page-header { display:none;}


Lorenzo


Charu Chandiram

February 16, 2016 at 11:29 pm

Thank you for your help. The CSS you provided worked great.

One follow up css related question — on the same page I am trying to get all the links to show up in a different color. I tired the following in my child theme but still get the default color of #1c1c1c. How do I achieve this color change?

Greatly appreciate your help. Thanks.

.espresso_events .a {color: #d9642e;}


Tony

  • Support Staff

February 17, 2016 at 4:50 am

Hi there,

.espresso_events .a {color: #d9642e;}

Is not working because of the . before the a

A quick explanation is that in CSS . means class, so your code targets anything that has class=”a” set (which is nothing on your page). To target the a elements themselves you just use:

.espresso_events a {color: #d9642e;}

Notice no .

So now that code says “All a elements within the element with class ‘espresso_events'”

Hope that helps.


Charu Chandiram

February 17, 2016 at 7:01 pm

Thanks for your help. That works! I completely missed seeing the dot I had in .a.


Tony

  • Support Staff

February 18, 2016 at 3:47 am

You’re most welcome 🙂

Viewing 5 reply threads

The support post ‘EE4 Event List Page – Event date time layout’ 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