Title: [Plugin: Countdown Timer] CSS – Class or ID for each time increment Last modified: August 19, 2016 --- # [Plugin: Countdown Timer] CSS – Class or ID for each time increment * Resolved [bborman](https://wordpress.org/support/users/bborman/) * (@bborman) * [15 years, 5 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/) * As far as I can tell, this plugin spits out one long string for the event countdown, like this: * ``` in 5 days, 9 hours, 7 minutes, 23 seconds ``` * In order to have more flexibility with the CSS, I would like to be able to have: * ``` in 5 days, 9 hours, 7 minutes, 23 seconds ``` * (or something like that – I just threw in span tags for simplicity) * Where in the PHP file would I edit to modify the HTML output? Or is this even possible without breaking the plugin? * Thanks in advance… * [http://wordpress.org/extend/plugins/countdown-timer/](http://wordpress.org/extend/plugins/countdown-timer/) Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/page/2/?output_format=md) [→](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/page/2/?output_format=md) * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 5 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813614) * [@bborman](https://wordpress.org/support/users/bborman/): * The best place to do it would be between lines 522 and 617. The `$s` variable is where the output string is built. * You could modify, for example, the code from something like: * `$s .= sprintf(_n("%d minute, ", "%d minutes, ", $resultantMinute, "fergcorp_countdownTimer"), $resultantMinute)." ";` * to * `$s .= '' . sprintf(_n("%d minute, ", "% d minutes, ", $resultantMinute, "fergcorp_countdownTimer"), $resultantMinute)." ";` * Thread Starter [bborman](https://wordpress.org/support/users/bborman/) * (@bborman) * [15 years, 5 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813616) * [@fergbrain](https://wordpress.org/support/users/fergbrain/): * Perfect, thanks! Exactly what I was looking for. * I appreciate devs like you who create quality plugins backed by outstanding support! * Well done. * [dbarned](https://wordpress.org/support/users/dbarned/) * (@dbarned) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813784) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) – This looks like just what I’m trying to do, but it doesn’t seem to be working. Not sure why. Any tips? * Thanks for the help and the plugin — it’s just great! * Doug * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813786) * [@dbarned](https://wordpress.org/support/users/dbarned/): * Can you pass along the URL you’ve implemented this on so I can take a look at the HTML output? * [dbarned](https://wordpress.org/support/users/dbarned/) * (@dbarned) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813787) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) * Thanks for your quick reply! * I’m afraid it was just me being an idiot 🙂 works perfectly! * Again, many thanks for taking the time developing and supporting your work. * Doug * [dbarned](https://wordpress.org/support/users/dbarned/) * (@dbarned) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813788) * Well, actually I spoke too soon. I get: * ```
  • in 5 months, 14 days, 4 hours, 27 minutes, 43 seconds,
    • ``` * But I can’t seem to get it to reflect any CSS styles I give each span. * If I switch each span to div I get my desired result (each value on a different line) it seems to break and display 2 sets of the data, the top one works but isn’t on separate lines and the bottom one is on separate lines but doesn’t count down 🙁 * I’m not allowed to put a live link on here I’m afraid. * Thanks for any ideas… * Doug * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813791) * [@dbarned](https://wordpress.org/support/users/dbarned/): * Two things: * 1) I think that “id” should actually be “class”, especially if you have more than one timer. * 2) Try disabling JS updating for the timer. The time is updated by re-writing the inner HTML of abbr with a given unique id (e.g. xa93f086a6806c83f405519636a9ec090). * Thread Starter [bborman](https://wordpress.org/support/users/bborman/) * (@bborman) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813792) * [@fergbrain](https://wordpress.org/support/users/fergbrain/): * I just now got around to editing the code, and am having the same issue as dbarned. * Disabling the JS upating DOES allow the code wrappers to work, but of course a live countdown is a must. * Is there any way that we can have both live updating and custom IDs? * Also, this may be a question for another thread, but would it be difficult to show the countdown with leading zeros? * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813793) * Yes. You can also modify js/fergcorp_countdownTimer_java.js the same way you modified the PHP. I did my best to port the script from PHP to JS, so things should look familiar. * You’ll need to modify strings where the “s” variable is set, which is between lines 113 and 207. * Using the above example, you’d modify: * `s = s + sprintf(_n(fergcorp_countdownTimer_js_language['minute'], fergcorp_countdownTimer_js_language[' minutes'], resultantMinute), resultantMinute) + ' ';` * to * `s = s + '' + sprintf(_n(fergcorp_countdownTimer_js_language[' minute'], fergcorp_countdownTimer_js_language['minutes'], resultantMinute), resultantMinute) + ' ';` * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813794) * [@bborman](https://wordpress.org/support/users/bborman/): Do you mean something more than the “Strip non-significant zeros” options? If so, can you start a new thread? * Thread Starter [bborman](https://wordpress.org/support/users/bborman/) * (@bborman) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813795) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) – Yes, here is a link to the new thread. * [http://wordpress.org/support/topic/countdown-timer-leading-zeros-option?replies=1#post-1922666](http://wordpress.org/support/topic/countdown-timer-leading-zeros-option?replies=1#post-1922666) * [dbarned](https://wordpress.org/support/users/dbarned/) * (@dbarned) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813798) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) — That did the trick, thank you! I do get an erroneous comma ‘,’ after seconds now though… but that’s not the end of the world. * Plugin Author [fergbrain](https://wordpress.org/support/users/fergbrain/) * (@fergbrain) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813799) * [@dbarned](https://wordpress.org/support/users/dbarned/): * Perhaps not the end of the world, but still annoying…and I don’t like annoying. * Solution: * There’s a regex replace at the end of the JS file that needs to be modified to: * `return s.replace(/(, <\/span> *)$/, "<\/span>"); //...and return the result ( a string)` * I think that’s right….regex can be tricky ([https://www.xkcd.com/208/](https://www.xkcd.com/208/)). * [dbarned](https://wordpress.org/support/users/dbarned/) * (@dbarned) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813800) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) – You, Sir, are a scholar and a gentleman! * Many thanks & have a great weekend 🙂 * Doug * Thread Starter [bborman](https://wordpress.org/support/users/bborman/) * (@bborman) * [15 years, 3 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/#post-1813801) * [@fergbrain](https://wordpress.org/support/users/fergbrain/) * Thanks for all the help with this! * So, when I enable the JS countdown, and modify the JS file as mentioned above, The result is two countdown timers – one live, and one that updates on refresh. * Where am I going wrong? Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/page/2/?output_format=md) [→](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/page/2/?output_format=md) The topic ‘[Plugin: Countdown Timer] CSS – Class or ID for each time increment’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/countdown-timer_384620.svg) * [Countdown Timer](https://wordpress.org/plugins/countdown-timer/) * [Frequently Asked Questions](https://wordpress.org/plugins/countdown-timer/#faq) * [Support Threads](https://wordpress.org/support/plugin/countdown-timer/) * [Active Topics](https://wordpress.org/support/plugin/countdown-timer/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/countdown-timer/unresolved/) * [Reviews](https://wordpress.org/support/plugin/countdown-timer/reviews/) * 24 replies * 4 participants * Last reply from: [fergbrain](https://wordpress.org/support/users/fergbrain/) * Last activity: [14 years, 10 months ago](https://wordpress.org/support/topic/plugin-countdown-timer-css-class-or-id-for-each-time-increment/page/2/#post-1813836) * Status: resolved