Events Calendar Pro Sidebar Not Displaying Properly

[Scott]

OK, sorry to keep after this but my issue is still not resolved despite the assistance that I was given previously. So far none of the fixes have worked so I am back with hat in hand, so to speak.

The problem is that when I use the Events Calendar Pro widget in my home page sidebar, it displays incorrectly (see attached). To try to resolve this, I have turned off all the plugins and still no go.

The CSS that Geoff provided made no difference, and when I added it to the style.ccs file, nothing happened either. I had been using the Simple CSS plugin and deactivated it prior to doing that, but that did nothing as well.

So, I don’t know what else I can do at this point. Seems like the Eden theme doesn’t want to play with ECP.

The previous thread on this is at https://theeventscalendar.com/support/forums/topic/event-calendar-pro-widget-not-displaying/#post-1099518

Site in question is at http://www.stpaulsnorwalk.org/newsite

Thanks in advance for any help!

[Geoff B.]

Good evening Scott and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the correct CSS still not kicking in.
I would love to help you with this topic.

I am not sure exactly how your theme works, but I can confirm that the default theme’s CSS is absolutely overriding the plugins’ CSS. Furthermore, I am not seeing any of my colleague Geoff’s CSS rules in there ?

In any case, you were right, we need to add these CSS rules somehow. The top 3 places are:

1. In a child theme (to prevent the styles from being erased upon an upgrade) style.css file
2. In the custom CSS tab of your theme (if your theme as one)
3. Using a plugin such as the one you have been using or this one: https://wordpress.org/plugins/the-events-calendar-user-css/

In any case, I would just make a tweak to my colleague’s CSS rules

#tribe-mini-calendar-5 .tribe-mini-calendar .tribe-events-othermonth {
background: #555 !important;
}

#tribe-mini-calendar-5 .tribe-mini-calendar table td {
background: #555 !important;
}

#tribe-mini-calendar-5 .tribe-mini-calendar table tbody tr:nth-child(2n) td {
background: #555 !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Scott]

Ok, thanks. Added your modified CSS via Simple CSS plugin, no change… and this is a child theme as well.

[Scott]

OK, I think I figured it out: under Event Settings, the display was set to Tribe Events Styles. Once I switched it to Full Styles, the content that was invisible suddenly showed up. Hooray!

But… the text showing the month, year and nav arrows in the top of the calendar are barely visible. If those were legible I believe that would resolve it.

Thanks!

[Geoff B.]

Good evening Scott,

Kudos on finding the cause of the issue!

Try the following CSS rule to fix the Month and top arrows

.tribe-mini-calendar-nav span {
color: #973f54;
}

Let me know how that goes.

Best regards,
Geoff B.

[Scott]

Thanks! Unfortunately this theme continues to conflict with ECP and even with the code you provided (as with the previous code), no luck. The month and nav arrows still show as white against a light gray background in the sidebar calendar.

[Geoff B.]

Hey Scott,

No problem. In that case, I would recommend adding the !important argument after the rule.

.tribe-mini-calendar-nav span {
color: #973f54 !important;
}

That should fix it.

Let me know how that goes.

Best regards,
Geoff B.

[Scott]

Fantastic, thanks! That resolved the overlap issue. The sidebar calendar grid is still cropped off on the right side, so that only 6 days show. Is there any way to fit the entire width within the sidebar area?

[Geoff B.]

Hey Scott,

Awesome!

I believe that what is going on is that the padding rules for Table cells in your template are causing the calendar to exceed the width of the sidebar.
Also, I am not sure which web browser you are using specifically, but I can see all 7 days on Chrome.

In any case, please try adding the following CSS rule

.edenHPBlock .tribe-mini-calendar-wrapper table td {padding:14px !important}

That should fix it. If it doesn’t, try reducing the padding value.

Best regards,

Geoff B.

[Scott]

Awesome, thank you! I had to reduce the padding to 2px to get it to fit, but it works.

Now, if I could figure out how to get the text in the sidebar calendar header to be black instead of white, I think I could leave you and your team in peace (for a while, anyway ;-D).

[Geoff B.]

Hey Scott,

Awesome! I’m glad you got things to work.

For your final look change, you can try the following:

.tribe-mini-calendar-nav span {
color: #000 !important;
}

Have a good week-end,

Geoff B.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts