The following is the recommended method creating a completely new countdown style for both T(-) Countdown and T(-) Countdown Control. To demonstrate this, we are going to take an existing style (naboo) and use it as the base of a completely new style (womprat).
Step one, copy all of the css for naboo into the custom css section of the plugin’s option page and replace all instances of ‘naboo’ with our new style name, ‘womprat’:
.womprat-countdown {
background: #72aed3;
color: #fffff;
margin: 0 auto;
padding: 10px 0;
max-width: 360px;
text-align: center;
}
.womprat-countdown.omitweeks {
max-width: 295px;
}
.womprat-dashboard {
margin: 0 auto;
padding-bottom: 10px;
}
.womprat-tophtml, .womprat-bothtml {
margin: 0;
padding: 0;
font-family: "Gill Sans ", "Gill Sans MT", Calibri, sans-serif;
font-size: 16px;
text-align: center;
color: #ffffff;
}
.womprat-tophtml p, .womprat-bothtml p {
margin-bottom: 0;
}
.womprat-timer_icon {
display: none;
}
.womprat-dash, .womprat-tripdash {
display: inline-block;
padding: 5px;
margin-left: 10px;
height: 30px;
}
.womprat-digit {
display: inline-block;
float: left;
font-family: "Gill Sans ", "Gill Sans MT", Calibri, sans-serif;
font-weight: 100;
font-size: 42px;
line-height: 42px;
color: #ffffff;
}
.womprat-dash_title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size: 10px;
font-weight: 100;
color: #ffffff;
position: absolute;
margin-top: 10px;
margin-left: -20px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.womprat-minutes_dash .womprat-dash_title, .womprat-seconds_dash .womprat-dash_title {
margin-left: -25px;
}
Once the settings have been saved, the womprat style will be available in the T(-) Countdown widget style dropdown, and as a valid style attribute value using the shortcode.
Now, we can go ahead and adjust this base style to fit our needs.
Preventing CSS from being overwritten
There are two options to to prevent plugin updates from overwriting your custom css.
Database
Option one is to simply copy the custom CSS into the plugin’s Custom CSS area under Dashboard > Settings > T(-) Countdown. This way the custom CSS is saved in the database, and not in a file that will be overwritten during plugin updates.
Theme Stylesheet
Option two is to include the CSS into your theme’s style.css file, or better yet, into the style.css file of your child theme.