Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save theeventscalendar/c312ae844acde7506f14 to your computer and use it in GitHub Desktop.
Save theeventscalendar/c312ae844acde7506f14 to your computer and use it in GitHub Desktop.
Sample CSS tweaks for Events Calendar PRO's Countdown widget
/** Change the colour and other properties of the venue widget title */
.tribe-events-countdown-widget h2.widget-title {
color: #fa0;
transform: rotate( -2deg );
}
/** Make the event title uppercase and green */
.tribe-events-countdown-widget .tribe-countdown-text a {
color: #10c050;
text-transform: uppercase;
}
/** Change the colour of each time element */
.tribe-events-countdown-widget div.tribe-countdown-days.tribe-countdown-number { color: #fa0; }
.tribe-events-countdown-widget div.tribe-countdown-hours.tribe-countdown-number { color: #af0; }
.tribe-events-countdown-widget div.tribe-countdown-minutes.tribe-countdown-number { color: #0f0; }
.tribe-events-countdown-widget div.tribe-countdown-seconds.tribe-countdown-number { color: #0fa; }
/** Change the colour of the matching helper text for each of the above */
.tribe-events-countdown-widget div.tribe-countdown-days .tribe-countdown-under { color: #f0a; }
.tribe-events-countdown-widget div.tribe-countdown-hours .tribe-countdown-under { color: #a0f; }
.tribe-events-countdown-widget div.tribe-countdown-minutes .tribe-countdown-under { color: #00f; }
.tribe-events-countdown-widget div.tribe-countdown-seconds .tribe-countdown-under { color: #0af; }
/** Change the "completed" message appearance */
.tribe-events-countdown-widget h3.tribe-countdown-complete {
color: red;
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment