Posts

Posted on

Collapse-O/Pro-Matic CSS Tricks II – Font Awesome Arrows

First make sure Font Awesome is installed.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Or use a plugin such as Font Awesome Icons to have it installed for you.

We are going to use the following two Font Awesome Arrows:

<i class="fa fa-arrow-circle-down"></i>

<i class="fa fa-arrow-circle-up"></i>

Next we want to create a new class for these arrows. We are going to use the name awesomearrows. The class definitions need look like so:

.collapseomatic.awesomearrows {
    background-image: none;
}
.collapseomatic.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0ab";
}
.colomat-close.awesomearrows {
    background-image: none;
}
.colomat-close.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0aa";
}

Now we need to assign the trigclass attribute our value of ‘awesomearrows’

[expand title="Trigger Text" trigclass="awesomearrows"]Target Content[/expand]
Posted on

Collapse-Pro-Matic Setall with Highlander Grouping

This is a demonstration of how to use Highlander Grouping and Setall trigclass to manage the expand/collapse all triggers:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group-highlander"/]
[expand title="expand 1" rel="my_group-highlander"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group-highlander"]this is the second expand item[/expand]
[expand title="expand 3" rel="my_group-highlander"]this is the thrid expand item[/expand]
[expand title="expand 4" rel="my_group-highlander"]this is the thrid expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the thrid expand item
expand 4
this is the thrid expand item
Posted on

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
5
hours
2
1
minutes
1
1
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
-50
-3
days
0
-2
hours
0
-3
minutes
-4
-9
seconds
-5
-6
Posted on

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.

Posted on

T(-) Countdown w/ T(-) Countdown Events

T(-) Countdown

[tminus t="+40 seconds" style="naboo" event_id="1932" omitweeks="true" launchtarget="countdown"]Launch![/tminus]

Hello world

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

T(-) Countdown Control

[tminus cid="1031" style="naboo" event_id="1932"]
[tminus cid="1031" style="naboo" event_id="1932"]
This is the fireworks div that can be targeted
Posted on

Collapse-O-Matic Content Filtering

Without Filter Attribute (default off)

Plain Text

[expand title="plain text"]This is just some blibber blabber text[/expand]
plain text
This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

With Filter Attribute False

Plain Text

[expand title="plain text" filter="false"]This is just some blibber blabber text[/expand]
plain text
This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode" filter="false"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

With Filter Attribute True

Plain Text

[expand title="plain text" filter="true"]This is just some blibber blabber text[/expand]
plain text

This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode" filter="true"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]
text with shortcode

This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

Posted on

Print-O-Matic Icon Inline-Block CSS

This is how you modify the print-icon to have it show up in a simple menu. If we start with a simple right-aligned menu:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me]</p>

See how the icon jumps to it’s own line?

Expand All | Collapse All |

Let’s fix that.

Step one, assign a some new CSS rules for an id element:

#my_print_id {
    display: inline-block;
}
#my_print_id:before,  #my_print_id:after{
    content: none;
}

Step two, insert a roll-your-own* version of the shortcode like so:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | <span class="printomatic pom-small" id="my_print_id"><input type="hidden" id="target-my_print_id" value="article"></span></p>

BAM, it’s working*:

Expand All | Collapse All |

*Note: the roll-your-own method shown above only works for print-o-matic versions 1.5.7 and older. This will not work with print-pro-matic or versions 1.6.0 or newer.

Now lets’s try something new. We have added tag and class attributes to version 1.6.0 so we can now do something like:

The Jedi Way

.my_print_class {
    display: inline-block;
}
.my_print_id:before, .my_print_id:after{
    content: none;
}

And we add our shortcode with the new tag and class attributes:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me printstyle="pom-small" class="my_print_class" tag="span"]</p>

Expand All | Collapse All |