T(-) Countdown 2.0 Style Tests

string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cb79d" string(10) "target is:" int(1803811056) string(14) "target is now:" string(15) "dark_background" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cb90b" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cb9b0" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cba43" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbadb" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbb7f" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbc22" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbcb6" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbd5a" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbdf1" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbe89" string(10) "target is:" int(1803811056) string(14) "target is now:" string(16) "id-647afbc6cbf29"

Jedi

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

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Darth

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonite

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonlite

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po-mini

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

carbonite-responsive

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

circle

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

cloud-city

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

hoth

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

naboo

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

sith

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

TIE-fighter

Tage
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

T(-) Countdown Proper Time Unit Calculation

string(10) "target is:" int(1721212656) string(14) "target is now:" string(16) "id-647afbc6ccbbf" string(10) "target is:" int(1720003056) string(14) "target is now:" string(16) "id-647afbc6ccc92" string(10) "target is:" int(1719830256) string(14) "target is now:" string(16) "id-647afbc6ccd2e" string(10) "target is:" int(1719830256) string(14) "target is now:" string(16) "id-647afbc6ccdc2" string(10) "target is:" int(1717411056) string(14) "target is now:" string(16) "id-647afbc6cce52" string(10) "target is:" int(1689676646) string(14) "target is now:" string(16) "id-647afbc6ccee2"

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"/]

Wk.
5
8
Tage
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"/]

Tage
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"/]

Wk.
5
6
Tage
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"/]

Wk.
5
6
Tage
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"/]

Tage
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"/]

Tage
4
5
Hours
0
0
Minutes
0
0
Seconds
0
0

T(-) Countdown Omitweeks Width Issue

string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6cdbbc" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6cdc6e" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6cdd1b" string(10) "target is:" int(1690540646) string(14) "target is now:" string(16) "id-647afbc6cddb3" string(10) "target is:" int(1695551846) string(14) "target is now:" string(16) "id-647afbc6cde42" string(10) "target is:" int(1695551846) string(14) "target is now:" string(16) "id-647afbc6cdede" string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6cdf84" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce014" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce09e" string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6ce12a" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce1c6" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce261" string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6ce2ef" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce38b" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce412" string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6ce49b" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce522" string(10) "target is:" int(1695292646) string(14) "target is now:" string(16) "id-647afbc6ce5a7" string(10) "target is:" int(1690108646) string(14) "target is now:" string(16) "id-647afbc6ce631"

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"/]

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Tage
1
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Wk.
1
5
Tage
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."/]

Tage
5
5
Hours
0
0
mins.
0
0
secs.
0
0

Tage
1
1
3
Hours
0
0
mins.
0
0
secs.
0
0

Wk.
1
6
Tage
0
1
Hours
0
0
mins.
0
0
secs.
0
0

sith

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

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Tage
1
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Wk.
1
5
Tage
0
5
Hours
0
0
Minutes
0
0
Seconds
0
0

carbonlite

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

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Tage
1
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Wk.
1
5
Tage
0
5
Hours
0
0
Minutes
0
0
Seconds
0
0

cloud-city

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

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Tage
1
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Wk.
1
5
Tage
0
5
Hours
0
0
Minutes
0
0
Seconds
0
0

Jedi

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

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Tage
1
1
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Wk.
1
5
Tage
0
5
Hours
0
0
Minutes
0
0
Seconds
0
0

circle

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

Tage
5
0
Hours
0
0
Minutes
0
0
Seconds
0
0

T(-) Countdown Control Duplicate Countdowns

string(10) "target is:" int(1685960100) string(14) "target is now:" int(2022) string(10) "target is:" int(1685960100) string(14) "target is now:" string(15) "secondcountdown"

What happens when we display two of the exact same T(-) Countdown Control shortcodes on the same page?

Here is the first countdown:

[tminus cid="2022"]

Wk.
0
0
Tage
0
1
Hours
2
3
Minutes
3
7
Seconds
3
4

Counting Down to Mon, 5th June, 2023

and Here is the second:

[tminus cid="2022" id="secondcountdown"]

Wk.
0
0
Tage
0
1
Hours
2
3
Minutes
3
7
Seconds
3
4

Counting Down to Mon, 5th June, 2023

T(-) Countdown Second Tuesday of The Month

string(10) "target is:" int(1686614400) string(14) "target is now:" string(16) "id-647afbc6d64c9" string(10) "target is:" int(1431388800) string(14) "target is now:" string(16) "id-647afbc6d6573"

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

[tminus t="second tuesday"]

Wk.
0
1
Tage
0
2
Hours
1
3
Minutes
2
2
Seconds
3
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"]

Wk.
-
4
2
1
Tage
-
5
Hours
-
1
Minutes
-
3
Seconds
-
2

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.