Custom css no longer works

[Barry Johnson]

The custom css I was using is no longer working. It affects the Events List Widget which displays on our home page. The css was created following the guidelines in the page https://theeventscalendar.com/knowledgebase/events-calendar-widgets/, which still gives the same advice. Unfortunately, the css stopped working and we are left with the default styling. I am using Divi, which is unlikely to be the problem as the structure is the same, and have installed no new plugins; the only change was your update. I suspect some of the selectors have changed. Can you help?

[Jennifer]

Hi Barry,

I’m sorry that your CSS stopped working. I’ll be happy to point you in the right direction here, but please note that we are limited in the amount of support that we can provide for CSS customizations.

Can you tell me what about the widget you would like to change (and if possible send me the CSS that you were using previously)?

Thanks,

Jennifer

[Barry Johnson]

Jennifer,
Thanks for your prompt reply. Sorry I could not get back to you immediately, but I have been travelling.

The changes I had made to the appearance of the list on our front page were to the colour, size and spacing of the items, and to conceal the “View more” link. I copy the css below. I can see that the selectors have chanaged in the early May update, but have not managed to sort it out.
I have installed the recent updates since I wrote, but that makes no difference.
Many thanks.

/** Controls the list of events that appears on the front page, and elsewhere. It does not affect the small minicalendar. */

/** WORKING This prevents the View more link from displaying below the list.*/
.tribe-events-widget-link {
display: none;
}

/** WORKING [Set of rules that] change the colour of the date markers*/
.tribe-events-adv-list-widget .list-date {
background: #84A40B;
}

/** WORKING This rule works with the previous one, but specifically targets the day of the week or month name */
.tribe-events-adv-list-widget .list-date .list-dayname {
color: black;
font-size: 9px;
/** margin: 0px 0px 0px 0px;*/
padding: 0px 0px 0px 0px;
}

/** WORKING This rule works with the previous one, but specifically targets the date */
.tribe-events-adv-list-widget .list-date .list-daynumber {
color: white;
font-size: 10px;
/** margin: 0px 0px 0px 0px;*/
padding: 0px 0px 0px 0px;
}

/** WORKING This rule works with the previous one, but specifically targets the TITLE to stop it leaving a line before the details*/
.tribe-events-adv-list-widget h2.tribe-events-title {
display: inline;
}

[Jennifer]

Hi Barry,

Thanks for sending that over! These selectors should still be correct. I took a look at the site, and it looks like, for whatever reason, this is not loading on the page. I tried adding your first rule from the Inspector in Chrome, and it did remove the “View more” link (see screenshot). Can you tell me where you are entering this CSS? If you are using Divi, you should have an “Additional CSS” area under Appearance > Customize where you can add this, or another good place to add it is the style.css file of your child theme, if you are using one.

[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