> How can you bring countdowns and timers broadcast This pack is a collection of various Clocks and Countdowns for live streams and events. Each template has a CSS file for customizing colors and fonts in addition to several built-in visual, layout, and functionality options. --- > [!TIP] Get this item in the [SPX Store](https://spxgraphics.com/store/#product-Countdown-and-Timer-Pack-(OGraf)). ![[Pasted image 20260302162013.png]] A collection of various templates from the Countdowns Template Pack. Each template has a CSS file for customizing colors and fonts in addition to several built-in visual, layout, and functionality options. They can be used as-is or modified for the needs of the user. The Countdown pack consists of multiple templates which are HTML graphics used via [[Live Streaming Software|CasparCG or other HTML-capable playout systems]], such as OBS, vMix, Ecamm, etc. The templates are easy to use and can be modified conveniently from the SPX user interface. ## Installation SPX templates or extensions from the SPX Store are usually available as zip files for manual installation and as an executable installer for Windows machines. See knowledgebase articles on [[Installing Templates]]. ## Customization >[!WARNING] REMEMBER to make backup copies of the original files before making any changes. The template can be used as-is for different purposes from the SPX UI. For advanced modifications or styling, the CSS and Javascript files can be modified. Please see the HTML, CSS, and Javascript source code for options, comments, and additional developer information. ### Color change All templates uses a **customize.css** stylesheet file for a global color theme settings and this can be changed globally for all templates and they can be overwritten in each template's CSS styles. ### Font change - place a new font file in the fonts subfolder - link font file to the template by modifying CSS font file links ## Templates The Countdown pack comes with the following templates with varying designs and functionality. ### Generic countdown ![[Pasted image 20260302162043.png]] **The Generic countdown** template is a versatile tool for creating on-screen countdowns and clocks. It has two running modes: - A realtime clock - Countdown The countdown can be shown in several ways (days, hours, minutes, seconds, and various combinations. This countdown also includes time offset (in +/- minutes). The template comes with several example CSS themes and more can be created as needed for different layouts, fonts, and color schemes. The on-screen position can be customized to be top/middle/bottom/left/center/right using CSS properties. in the [[Theme Files|theme files]]. ![[Pasted image 20260302162253.png]] ### Countdown with background image ![[Pasted image 20260302162354.png]] Countdown with a background image (Countdown\_BG\_Image\_SRC.html) is a template that is designed to display the countdown with a background image. For easy customization, use your own images as a background. The template has the option to pick a background png-image from a folder and it can also have transparency for advanced effects and layer with video and other templates. ### Countdown cartoony ![[Pasted image 20260303095125.png]] Countdown cartoony (Countdown\_Cartoony\_SRC.html) is a very basic quiz/question timeout graphic with cartoony animations. Once the time reaches 0 the graphic "drops" out of the frame. See the source code for changing styles and animations. ### Speaker timer ![[Pasted image 20260302162401.png]] Speaker timer (Countdown\_Speaker\_SRC.html) is a professional speaker timer (countdown) for live corporate events. The graphic is designed to be shown on an off-camera monitor to a speaker and has a progress bar and bright colors for notifying the speaker about the remaining time. Colors and timing rules can be modified in the files. The template comes with several example Theme files and more can be added by the user. The template also has a dropdown selector for picking a logo image from a folder. See a [[Stage Timer]] on this template ### Countdown ring ![[Pasted image 20260302162409.png]] The countdown ring (Countdown\_Ring\_SRC.html) is a template with a round progress indicator. The graphic is shown on the screen with PLAY and the countdown can be started with the CONTINUE command. Customize your own colors by changing the properties in the CSS file. ### Top corner countdown ![[Pasted image 20260302162415.png]] Top corner countdown (Countdown\_Top\_Corner\_SRC.html) is a Minimalistic text strap with several running modes: time, date, time date, countdown, and additional information text. The template has built-in controls for left and right positioning. ### Stopwatch ![[Pasted image 20260302162419.png]] Stopwatch has the option to change a background image or leave it transparent, so it can be used as an overlay over a video. Stopwatch is shown on the screen with SPX's PLAY command and the timer is started and paused with subsequent CONTINUE commands. Please note th stopwatch can also be triggered with external devices (such as the [[External Control|Stream Deck]]) or from an external application using [[Control api|control API]] commands. Read this article on using API commands for more information. ### API Counter API Counter template demonstrates the use of [[Control api|SPX Control API]] and how it can be used to update a graphic on-screen. This template can be used as a click counter or other use cases requiring showing an incrementing score. The template has two additional functions: - setValue() - changeValue() The current value can be *set* by sending the desired new integer value to the template; such as **setValue(10)**. The current value can be *changed* by sending a modifier to the template; such as **changeValue(-4)** would decrement by **4**, whereas invoking  **changeValue(100)** would increment the value by **100**. --- ## Read next - [[Installing Templates]] — how to install SPX templates and extensions - [[Countdowns Pack]] — the premium version of this countdown collection - [[Theme Files]] — customize template colors and fonts with CSS