T(-) Countdown 2.0 Style Tests

Jedi

Dealing with 2, 3 and 4 digits
[tminus t="+1366 days +10 sec" omityears="true" omitmonths="true" omitweeks="true" style="jedi"/]

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

Darth

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

Carbonite

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

Carbonlite

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

c-3po

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

c-3po-mini

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

carbonite-responsive

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

circle

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

cloud-city

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

hoth

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

naboo

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

sith

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

TIE-fighter

days
13
6
6
hours
0
0
minutes
0
0
seconds
1
0

T(-) Countdown Proper Time Unit Calculation

we should only have to calculate year, month and week time units once, as they will likely change only one time per viewing. Even so, we will need to properly calculate the amount of days, weeks and months remain, depending on how many time units are currently being displayed. We use a test of +410 days and 10 seconds from now to test how the change over works for the larger time units.

Test 1 – Showing Everything

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+410 days +10 sec" style="TIE-fighter"/]

weeks
5
8
days
0
4
hours
0
0
minutes
0
0
seconds
1
0

Test 2 – No Weeks

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+396 days +10 sec" omitweeks="true" style="TIE-fighter"/]

days
3
9
6
hours
0
0
minutes
0
0
seconds
1
0

Test 3 – No Months

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+394 days +10 sec" omitmonths="true" style="TIE-fighter"/]

weeks
5
6
days
0
2
hours
0
0
minutes
0
0
seconds
1
0

Test 4 – No Months or Years

This test should show everything: Years, Months, Weeks, Days… and the rest.
[tminus t="+394 days +10 sec" omitmonths="true" omityears="true" style="TIE-fighter"/]

weeks
5
6
days
0
2
hours
0
0
minutes
0
0
seconds
1
0

Test 5 – No Months or Weeks

This test should show: Years and days.
[tminus t="+366 days +10 sec" omitmonths="true" omitweeks="true" style="TIE-fighter"/]

days
3
6
6
hours
0
0
minutes
0
0
seconds
1
0

Test 6 – Days Only

This test should show only days:
[tminus t="+45 days" omityears="true" omitmonths="true" omitweeks="true"/]

days
4
5
hours
0
0
minutes
0
0
seconds
0
0

T(-) Countdown Omitweeks Width Issue

This post investigates issues with the width of a countdown that has the weeks omitted. Since the width should auto-adjust based on the displayed time units.

c-3po

We’ll start with the c-3po style based on this issue on the WordPress Forums.

[tminus t="2018-04-11" omitweeks="true" style="c-3po"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0

weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

[tminus t="2018-04-11" omitweeks="true" style="c-3po-mini" minutes="mins." seconds="secs."/]

days
5
5
hours
0
0
mins.
0
0
secs.
0
0

days
1
1
3
hours
0
0
mins.
0
0
secs.
0
0

weeks
1
6
days
0
1
hours
0
0
mins.
0
0
secs.
0
0

sith

[tminus t="2018-04-11" omitweeks="true" style="sith"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0

weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

carbonlite

[tminus t="2018-04-11" omitweeks="true" style="carbonlite"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0

weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

cloud-city

[tminus t="2018-04-11" omitweeks="true" style="cloud-city"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0

weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

Jedi

[tminus t="2018-04-11" omitweeks="true"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

days
1
1
0
hours
0
0
minutes
0
0
seconds
0
0

weeks
1
5
days
0
5
hours
0
0
minutes
0
0
seconds
0
0

circle

[tminus t="2018-04-11" style="circle" omitweeks="true"/]

days
5
0
hours
0
0
minutes
0
0
seconds
0
0

T(-) Countdown Second Tuesday of The Month

This is a test to see if using t=’second tuesday’ will schedule a T(-) Countdown correctly:

[tminus t="second tuesday"]

weeks
0
1
days
0
1
hours
0
8
minutes
2
8
seconds
0
4

Yup, looks like it works just fine.
It’s no T(-) Countdown Control, but in a pinch, it will work.

Edit.. nope, this will just countdown to the second Tuesday from today. To countdown to the second Tuesday of the MONTH you need to add the month and year.

[tminus t="may 2015 second tuesday"]

weeks
-40
-4
days
0
-6
hours
-1
-6
minutes
-3
-2
seconds
-5
-6

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.