Calendar Page Styling

[Christine]

1. “View As” at the top of the screen is showing both the drop down and the items listed out.
2. I want to change the size of the titles in the calendar but can’t find the correct CSS.

[Geoff B.]

Good evening Christine and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with these 2 topics.

1. “View As” at the top of the screen is showing both the drop down and the items listed out.

There seems to be something in your theme creating that duplication.

The easiest way to fix this is to add the following CSS rule

#tribe-bar-views .tribe-bar-views-list {
display: none !important;
}

2. I want to change the size of the titles in the calendar but can’t find the correct CSS.

Try the following CSS code.

#tribe-events-content .tribe-events-calendar td .tribe-events-month-event-title {
font-size: 18px;
}

Let me know how that goes.

Best regards,
Geoff B.

[Christine]

Thanks so much for the quick reply. Those CSS snippets worked well.

————–
Would you mind taking a look at the “View As” area on the calendar? http://edi.freshdezigns.com/schedule/

It’s crowding the search bar and isn’t aligned. It just looks funky. Any idea why it’s doing that or how to fix it?

————-
I’m having some trouble getting the Upcoming Events widget to do what I want on the home page. Located under “Find a Workshop Near You” on http://edi.freshdezigns.com, I’ve applied CSS to remove the dates and times but what I really want is to be able to show the Month and Date (ex. September 23) for each course but not the time.

The CSS I applied to this area is as follows:
#main h2.tribe-events-title {
font-size: 14px;
}

.tribe-events-list-widget .tribe-events-widget-link a, .tribe-events-adv-list-widget .tribe-events-widget-link a {
display: none;
}

.tribe-mini-calendar-event .list-date {
display: none;
}

.tribe-mini-calendar-event .tribe-events-duration {
display: none;
}

I appreciate any help you can offer!

[Geoff B.]

Good evening Christine,

Thank you for writing back.

I am pretty sure there is some template customization at work on your theme.
Normally, the bar looks more or less like this: http://wpshindig.com/events/

There are a couple of things that are worth trying at this point.
Would you mind sending me a screenshot of your Events -> Settings -> Display page ?

The reason I am bringing this up is that there is a fairly good chance that playing with the first 2 settings on this page might help to avoid using Custom CSS rules.

The other reason I am bringing this up is that there is something also wrong with the toggle link “Find events”.

Could you please send me a copy of your WordPress theme / child theme in a .zip file link (via Dropbox or Google Drive) so that I can run some tests on my end ?

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates you might have made.

I’m having some trouble getting the Upcoming Events widget to do what I want on the home page. Located under “Find a Workshop Near You” on http://edi.freshdezigns.com, I’ve applied CSS to remove the dates and times but what I really want is to be able to show the Month and Date (ex. September 23) for each course but not the time.

The best way to tweak the widget is via a theme override. You might want to read our Themer’s guide to get a sense of how that works.

Basically, you make a copy of the view you want to modify in your child-theme’s folder, you edit it to keep only what you want and it overrides the default widget.

Let me know how that goes.

Best regards,
Geoff B.

 

[Christine]

I changed the display settings from Skeleton to Tribe Events, removed the custom CSS for the bar and it looks as expected now.

——-

I understand how to tweak using the Child-Theme, I’m just having some trouble figuring out exactly what will make that desired view. I’ll keep trying things.

Thanks, Chrissy

[Geoff B.]

Good evening Christine,

That’s fantastic to hear!

For the record and as a guide:

1. Skeleton is well-named. You have to define everything from the ground up.
2. Full styles is the most common option since it tries to use the styles from your theme as much as possible
3. Tribe Events displays like our demos, but might sometimes be harder to override for some rules.

It sounds like your best bet might be option 2.

Can I help you with something else on this topic ?

Best regards,

Geoff B.

[Christine]

Aside from telling me specifically what I need to change to get only the month and date to show up in the widget, no I’m set.

Thanks!

[Geoff B.]

Good evening Christine,

If you use option 2 as outlined above, you should be able to achieve what you are looking the appropriate CSS elements.
In fact, it looks like you successfully achieved that. Kudos!

But, as stated before, for more control, our trustee Themer’s guide should guide you in creating a custom widget template that would be impervious to theme changes.

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts