Kategorien
t(-) countdown Uncategorized

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
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Darth

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonite

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

Carbonlite

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

c-3po-mini

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

carbonite-responsive

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

circle

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

cloud-city

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

hoth

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

naboo

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

sith

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0

TIE-fighter

Days
1
3
6
6
Hours
0
0
Minutes
0
0
Seconds
1
0
Kategorien
t(-) countdown t(-) countdown control

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

Years
0
1
Months
0
1
Weeks
0
2
Days
0
2
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"/]

Years
0
1
Months
0
1
Days
0
2
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"/]

Years
0
1
Weeks
0
4
Days
0
0
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"/]

Years
0
1
Days
0
0
0
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
Kategorien
t(-) countdown t(-) countdown control

Countdown Test – Local Computer Time

This is a test of a countdown that will launch at a specific time.
The time should not affected on the visitors local computer time.

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

2001_Space_Odysey

Kategorien
t(-) countdown t(-) countdown control

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
2
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

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

Years
0
0
Months
0
1
Days
2
6
Hours
0
0
mins.
0
0
secs.
0
0

Years
0
0
Months
0
3
Days
2
3
Hours
0
0
mins.
0
0
secs.
0
0

Years
0
0
Months
0
3
Weeks
0
3
Days
0
2
Hours
0
0
mins.
0
0
secs.
0
0

sith

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
2
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

carbonlite

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
2
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

cloud-city

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
2
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

Jedi

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
2
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

circle

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

Years
0
0
Months
0
1
Days
2
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Kategorien
t(-) countdown t(-) countdown control

T(-) Countdown Time Sync Issue

Test of a new system of recalculating the remaining time to make sure timers stay in sync.

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Kategorien
t(-) countdown t(-) countdown control

T(-) Countdown Control Exclude Times

Kategorien
t(-) countdown t(-) countdown control

T(-) Countdown Cloud City Mobile Fix

This is a test of the cloud-city style for T(-) Countdown to adjust the spacing issue on lower viewports.

Years
0
2
Months
0
3
Weeks
0
2
Days
0
6
Hours
0
0
Minutes
0
0
Seconds
0
0

Kategorien
t(-) countdown t(-) countdown control

T(-) Countdown Control Duplicate Countdowns

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

and Here is the second:

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

Kategorien
t(-) countdown

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

Years
0
0
Months
0
0
Weeks
0
1
Days
0
5
Hours
0
6
Minutes
1
5
Seconds
2
0

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

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Kategorien
t(-) countdown

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.