Skip to content

Instantly share code, notes, and snippets.

@andrasguseo
Last active July 27, 2022 15:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrasguseo/59e001f29ce09b52d7f0db022b0d502b to your computer and use it in GitHub Desktop.
Save andrasguseo/59e001f29ce09b52d7f0db022b0d502b to your computer and use it in GitHub Desktop.
TEC > Styling the v2 event list widget as v1.
/* Separator below an event */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-row {
border-bottom: 1px dotted#666;
padding-bottom: 10px;
}
/* Date box height and margin */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-date-tag-datetime {
height: unset !important;
margin-right: 1em;
}
/* Date box border and background */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-date-tag-datetime {
background-color: #666;
border: 3px solid #666;
}
/* Month box */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-date-tag-month {
background-color: #fff;
padding: 3px;
margin: 0px !important;
}
/* Day box */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-date-tag-daynum {
font-size: 100%;
color: #fff;
margin: 0 !important;
padding: 0;
}
/* Event title bottom margin */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-title {
margin-bottom: 10px;
}
/* Event title link color */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-title-link {
color: #007acc;
}
/* Change the order or date and title */
.tribe-events-widget-events-list__events .tribe-events-widget-events-list__event-header {
display: flex;
flex-direction: column-reverse;
}
@andrasguseo
Copy link
Author

andrasguseo commented Aug 6, 2021

Visual comparison with twentysixteen:
https://dl.dropbox.com/s/yyfisujowf2ka0y/shot_210806_173624.png

Note, the screenshot doesn't include the order change of the event time and the event title.

@Beremaro
Copy link

Very nice, thanks. Is it also possible to show the day of the week before the time? Thanks in advance. beremaro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment