Styling issues

[alexhammerstein]

Hello. I am wondering if you could help em with some styling issues on events Calendar pro.

On a single event view – http://www.modburyteam.org/event/modbury-lent-course-4/2018-02-22/
I would like to remove the previous and next events both top and bottom
How do I align the image to the left rather than the centre?
I would like to add the year to the date both in the article and on the details
The font size of the details needs to be larger
and is it possible to have the details block ion the right of the page aside of the event details, rather than underneath – it makes it easier to read.

Apologies for the number of issues

A

[Geoff B.]

Good evening Alex and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

The most efficient way to control what elements appear would be to do a custom view template override of the single event view. You might want to read our Themer’s guide to get a sense of how that works.

With that in mind, CSS can get you pretty far for that type of changes.

In order to gain full power on your site’s look and feel, I would highly recommend reading the following articles:

• https://theeventscalendar.com/knowledgebase/wordpress-customizer/
• https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/
• https://theeventscalendar.com/knowledgebase/changing-fonts-and-colours/
• https://theeventscalendar.com/knowledgebase/styling-events-widgets/

Try adding the following CSS rules to your style.css file or in your Custom CSS metabox:

I would like to remove the previous and next events both top and bottom

.single-tribe_events #tribe-events-footer .tribe-events-sub-nav, .single-tribe_events #tribe-events-header .tribe-events-sub-nav {display: none !important}

How do I align the image to the left rather than the centre?

It looks like you already took care of this.

I would like to add the year to the date both in the article and on the details

You can:

1. Tweak the single view file with the help of the themer’s guide
2. Cheat by heading over to Events -> Settings -> Display and including the year in every possible date format

The font size of the details needs to be larger

.single-tribe_events .tribe-events-event-meta {
font-size: 17px !important;
}

and is it possible to have the details block ion the right of the page aside of the event details, rather than underneath – it makes it easier to read.

Yes, but that will definitely require adding divs and moving code around. In other words, you will need to work on a custom view template override.

Have a great day!

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts