Month view distorted

[Debbie]

I just purchased Pro and am disappointed that the month view is not lining up. The days of the weeks stray outside your calendar dimensions in my theme ZeeBusiness. Here is the page with the conflict: note that the days of the week are not visible in these colors and that you can see them not lining up with the template. http://www.debbiesokol.com/events/2015-01/

[Geoff]

Hi there, Debbie! Thanks for reaching out and I’m sorry you’re bumping into trouble with the calendar layout. I took a look at the link you shared and see what you’re talking about.

The calendar tries to adapt to as many themes as possible by inheriting their styles, but sometimes this can lead to styling conflicts, which is what we’re seeing here.

There’s good news though, and I think we can tackle these conflicts together. Try adding this to your theme’s style.css file. The theme’s styles are overriding the calendar’s default styles, so this will fix that:

.tribe-events .entry tr th, .comment tr th, .entry thead th, .comment thead th {
color: #fff;
font-size: 0.7em;
}

This will change the color of the days of the week from gray to white, like it should be, then decrease the font size so it fits appropriately in the container. Give that a shot and let me know if it helps. 🙂

Cheers!
Geoff

[Debbie]

Hi thanks Geoff! You’re so great to respond so quickly and I really appreciate this. I am not a developer by any means, just a volleyball coach, lol, and understand what you are saying but have no idea how to do it. Can you walk me through the steps to insert this code?

Thank you so much!

[Geoff]

Sure thing!

Here’s how you can add that to your theme’s style.css file:

• Log into your WordPress dashboard
• Head over to Appearance > Editor–this will take you directly to the style.css code
• Scroll to the bottom of the code and paste in the snippet
• Click the Update File button

I do want to note that not all themes are the same, so these steps may not work for your specific theme. In that case, you may need a developer who can assist to make these kinds of updates. 🙂

Let me know if this helps clarify things a bit. 🙂

Geoff

[Debbie]

Thanks Geoff, did it but it did not change anything. Any other suggestions? Thanks

[Geoff]

Hmm, let’s try taking the <i>.tribe-events</i> out of there. This definitely works when I try it:

.entry tr th, .comment tr th, .entry thead th, .comment thead th {
color: #fff;
font-size: 0.7em;
}

Please give that a shot and let me know if it works for you. 🙂

Geoff

[Debbie]

Geoff,

Things look pretty good right now without changing the code….not sure what happened. I did go full width on the page layout. check it out now http://www.debbiesokol.com/events

[Geoff]

Beautiful! Nicely done. I’m so glad that worked out.

I’ll go ahead and close this thread, but please feel free to reach back out if anything else pops up–we’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts