T(-) Countdown Custom Styles

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.