Event calendar styling is complex

Start with our guides – they are full of examples:
https://theeventscalendar.com/knowledgebase/guide/customization/#display-settings-overview

The classes can be found in the inspector (development tools): https://d.pr/i/JcSqK7 although I noticed you have disabled right-click on your site (not sure why?)

Cheers,
Stephen

Yes I have read those a little bit. I did not like the idea of spending a day or two learning such a detailed way of styling for a one-time use. A developer who knows this plugin, spends an hour on it ??
But, a little curious. I tried it. Take a look at the calendar now. There could be some kind of a bug, when you navigate to December. There is one event there. Navigation stops working in that month. Only refreshing the page helps to come back to the current month. I assume that the navigation loses it’s hyperlink, once the event takes place.

It took a day finding correct css-values and guessing what is the correct syntax for style it. There is so much elements rolled in to main element blocks. Some of did not found, like borders. svg-icons are with static colours. Navigation does not work still in calendar or in events-page if there is one event added to month. It doesn’t go back or forward.

If it’s ok, i can share my version of styling to add in customizers custom.css for save someones time. Here you are:

`.tribe-events-widget-shortcode__header-title .widget-title{
color: #4d8c3f !important;
font-weight:700;
font-size: 1.8em !important;
margin-top:-10px !important;
margin-bottom:-30px !important
}

.tribe-events-c-top-bar {
background:#4d8c3f;
color:#ffffff;
padding:5px !important;
margin-top:0 !important;
}

.tribe-common-c-btn-icon–caret-left{
padding:5px !important;
}

.tribe-common-c-btn-icon–caret-right{
padding:5px !important;
}

.tribe-events-calendar-month__week{
height:40px;
}

.tribe-events-calendar-month__day-cell–selected{
background:#4d8c3f !important;
color:#ffffff !important;
}

.tribe-events-calendar-month__day-cell{
height:40px !important;
width:40px !important;
border-radius: 50% !important;
padding:10% !important;
}

.tribe-events-calendar-month__day-cell–selected .tribe-events-calendar-month__day-date-daynum{
color:#ffffff !important;
}

.tribe-events-calendar-month__mobile-events-icon–event{
background-color:red !important;
width:100% !important;
border-radius: 0% !important;
}

.tribe-events-widget-events-month__view-more-link{
background-color:#4d8c3f !important;
color:#ffffff !important;
padding:5px !important;
border-radius: 5% !important;
}

.tribe-common-form-control-text__input{
text-align:center !important;
}

.tribe-events-c-view-selector__button-text{
color:#4d8c3f !important;
}

.tribe-events-c-search__button{
line-height:15px !important;
background-color:#4d8c3f !important;
}

.tribe-events-c-top-bar__today-button{
padding:2px !important;
font-weight:700;
font-size:1.2em !important;
color:#4d8c3f !important;
}

.tribe-common-c-svgicon–caret-down{
color:#ffffff !important;
}

.tribe-events-c-top-bar__datepicker-button{
font-size:1.2em !important;
color:#ffffff !important;
}

.tribe-events-calendar-list__event-date-tag-daynum{
color:#4d8c3f !important;
}

.tribe-events-calendar-list__event-title-link{
color:#4d8c3f !important;
}

.tribe-events-c-ical__link{
color:#4d8c3f !important;
}

.tribe-events-back a{
color:#4d8c3f !important;
}

.tribe-events-single-event-title{
color:#4d8c3f !important;
}

.tribe-block__btn–link a{
color:#4d8c3f !important;
}

.tribe-events-schedule__datetime{
color:#4d8c3f !important;
}

.tribe-events-single-section{
background-color:#ffffff !important;
}

.tribe-organizer a{
color:#4d8c3f !important;
}

.tribe-events-event-categories a{
color:#4d8c3f !important;
}

Hi there!

This thread has been inactive for a while so we’re going to go ahead and mark it Resolved.

Please feel free to open a new thread if any other questions come up and we’d be happy to help.

Best regards,

Truman

@masimies OMG. Thank you SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO much. That convoluted document that’s supposed to help is a pure waste of 1.5 weeks trying to find that goes where. I will never get that week and a half of my life back! The idea was admirable; however, it’s entirely too much jumping around from one article to the next and stringing all the crumbs together to make a trail. Stripe’s documentation, on the other hand, is a good example that makes work a HECK of a lot easier.

Thanks, again, @masimies!!