Events List widget: Missing icon

[Riccardo]

Pro user!
I have set up in the home page two widgets at the same time, events list and calendar. Events list widget would show icons (day of month). Once I have removed the calendar widget, the events list widgte will not show anymore icons. Why is that?

[Andras]

Ciao Riccardo,

Thanks for going pro! I’m sorry you are experiencing that problem.

Could you please share with me:

• a link to the site where this exists (if you can share)
• screenshots of the differences
• your system information (here’s a guide)

I’ll be able to look further into the problem once I have these on hand.

Also you might want to check for a conflicting plugin or theme that you are using.

Looking forward to hearing back from you!

Cheers,
Andras

[Riccardo]

This reply is private.

[Riccardo]

I have tried to disable all plugins and switched to the default theme, still the same, no icons

[Andras]

This reply is private.

[Riccardo]

This reply is private.

[Andras]

Hi Riccardo,

The difference comes due to the fact that the ‘events calendar’ widget calls in a new set of styling, which is then applied to the ‘upcoming events’ widget as well.

If you don’t have the ‘events calendar’ widget, then those styles are not loaded, thus you will receive the original looks.

However, you can override that look. Try copy-pasting the below code to your child-theme’s style.css file and see if that helps:

.tribe-mini-calendar-event {
overflow: hidden;
width: 100%;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px dotted #2f2f2f;
}
.tribe-mini-calendar-event.first {
margin-top: 10px;
}
.tribe-mini-calendar-event .list-date {
background: #666 none repeat scroll 0 0;
box-sizing: border-box;
display: inline;
float: left;
font-weight: bold;
margin: 10px 5% 10px 0;
overflow: hidden;
padding: 3px;
text-align: center;
width: 15%;
}
.tribe-mini-calendar-event .list-date .list-dayname {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
color: #666;
display: block;
font-size: 9px;
padding: 3px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.tribe-mini-calendar-event .list-date .list-daynumber {
color: #fff;
display: block;
font-size: 15px;
line-height: 22px;
text-align: center;
width: 100%;
}
.tribe-mini-calendar-event .list-info {
font-size: 13px;
margin: 10px 0;
display: inline;
line-height: 1;
float: left;
width: 80%;
}
.tribe-mini-calendar-event .list-info h2 {
font-size: 14px;
font-weight: bold;
line-height: 18px;
margin-top: 0;
margin-bottom: 10px;
}

Please let me know if that gives you the desired result.

Ciao,
Andras

[Riccardo]

Great! Working perfectly now!

[Andras]

Happy I could help!

Since this is marked resolved I am going to close this ticket, but if you need anything else related to this topic or another please post a new topic in the forum and we can help you out.

In case you are happy with Modern Tribe’s products and support, we would be really happy if you could leave us a review.

Thanks and cheers,
Andras

[Author]

Posts