Smart Countdown module comes with default configuration and ready to be used right out of the box. Just select the event date and fill in the event title. But if you wish to personalize the module appearance and functions (and probably you will) there is a handful of options and setting you can change.
To configure Smart Countdown module you have to edit it in Modules manager of Joomla backend. Configuration options and settings are grouped in sections.
Each section, its settings and options are described in detail below. (Some basic knoledge of CSS is required for the style and layout configuration.)
"Basic" options screen:
Event date and time - target time to countdown to or to count up from. Keep in mind that this value is interpreted as belonging to the same time zone as set in your Global configuration "Server Time Zone" setting. If the event takes place in a different time zone than your server is configured for you need to apply time zone correction manually.
Hide time unit if zero - an option to hide the greatest time units if their current value is 0. So if your counter value is 0 days 0 hours 20 minutes 30 seconds with this option ON (default) it will show 20 minutes 30 seconds. If the value is 1 day 0 hours 20 minutes 30 seconds it will still show 1 day 00 hours 20 minutes 30 seconds. With this option OFF all zero values (if any) will be always displayed.
Show module - choose counter mode change rule. Available options are:
- Show both countdown and count up (auto): default setting. Countdown to event time will be displayed before the event and count up from event time afterwards. This setting has a special meaning when the module is used with an "events import" plugin
- Show countdown only: countdown to event time will be displayed before the event and the module will be hidden after the countdown is over
- Show countup only: the module will be only rendered after the event time and will show a count up
- Countdown will start before event (various options, from 1 minute to 24 hours): The module will be rendered some time (the interval selected) before the event and will show count up afterwards
- Count up will stop after event (various options, from 1 minute to 24 hours): The module will countdown to the event time and will show count up from event and will be visible for the selected time interval only.
Texts for countdown and count up modes will be displayed before the counter box depending on the current counter mode. These texts may be HTML formatted (literally may be any safe html code including pictures and links - both as absolute URLs starting with http://). If only text is entered it will be styled according to Layout and Style settings (see next section).
Smart Countdown supports custom labels: labels text can now be replaced by custom text(s) or characters that may act as digits separator (":" between hours, minutes and seconds e.g.). Labels also may be hidden for some digits. This setting is a defined by a "template-style" string in Basic Settings "Custom Labels". If you select "Yes" for Custom Lables you will have to provide a string as a template. This string defines labels for days, hours, minutes and seconds starting from days. Individual settings (separated by '|') may be applied. '%' stands for "do not use custom label at this position". If you provide less than 4 '|'-separated values the labels that have no value in template will not be displayed at all. In the sample screenshot below (%|:|:) the counter will look as 11 Days 23:11:11. Something like this - D|H|M|s will result in 11D 23H 11M 11s and so on. If you plan to use this feature make sure that counter layout is appropriate - separators look better when inline. In the current version you can also use an image as separator - '&' in labels template stand for the places where the selected (in "Separator Image" setting) image will appear. "Separator Blinking" if set to "Yes" makes all separators (text and image) to blink once per each 2 seconds. Standard full-text labels ('%' positions in template) remain visible all the time.
"Automatic redirection" options:
Redirect on countdown zero - if set to Yes will automatically redirect your visitor's browser according to the options below.
Redirection menu - a menu item of your site to recirect to.
Redirection URL - a custom URL (absolute or relative) to redirect to. Takes priority over "Redirection menu" so if a value is provided in this field the previous setting will be ignored.
"Layout" options screen:
Event Text position - top, bottom, left or right.
Counter layout: Horizontal - counter digtis groups in one line, Vertial - counter digtis groups in column.
Horizontally Center All - try to horizontally center the module box inside the space provided by the template position the module is published in. May be useful for horizontal layouts when template position is much wider than the counter module.
"Space between" settings - define the distance in px between counter elements. The effect depends on the layout selected.
"Styles" options screen:
Module width - by default countdown module will occupy 100% of its container's width. If you need to limit the width of the module, enter desired value (px) into this field. Leave at 0 for "no limit".
Module padding - 0 by default but if you have to adjust module padding for your particular template, enter value (px - all sides) into this field.
Module background CSS - custom background property in a shorthand form (color image repeat position). If left empty (default) module background is transparent. Use this setting to add custom color or background image (image url - as absolute URL)
Event text size - font size for event text.
Labels position layout - Top, Left, Right or Bottom. Defines the position of unit labels relative to digits. These options are valid for all counter layouts, but not all combinations may look good.
Labels vertical alignement - valid for Left or Right label positions only. Defines vertical labels position relative to digits.
Digits Size scale - most of the animation profiles are scalable. Select a value (from 20% to 150%). This value is a multiplicator only. The actual digits size will depend on the profile in use.
Counter labels size - font size for labels.
Next fields - styles for countdown elements. All elements (text, counter block, digits and labels) are DIV elements, so the styles used can not only be typography customization (fonts, colors, etc.) but also layout and positioning (padding, width, etc.). All styles must be separatedand ended by semicolon (standard css notation).
Minium reserved space for days value - auto (default). If set a value in px, horizontal space will be reserved for days digits so that when the number of digits change (e.g. from 9 days to 10 days and vice versa), the rest of the digits will not change their positions in the module.
Zero-pad days - no padding (default) option will show days as a regular integer number (e.g. as 1-digit number for values from 0 to 9, as 2-digits number for values from 10 to 99 and so on). In case if your counter design requires a fixed-size days presentation (i.e. to combine with a background image) you can select a padding value (from 2 to 5) from this list, so that days value will be padded with zeros up to selected digits count.
Digits Animation pane in detail:
Animation Profile - a list of installed animation profiles. There are several profiles installed automatically when you install the module. When you install (see below) more profiles they also appear in this list. Select the desired profile, save and you will see your new setting in "Selected profile info and preview".
Preview mode - this setting is for preview purposes only. The real mode (counting down or counting up) of the counter instance depends on the target event data and time selected, so this setting will have no effect on the module in frontend of your site. Animations may (and tend to) have distinct settings for "down" and "up" mode. All sliding animations that are preinstalled use this feature (the slide direction changes). Just select a desired mode here and save. The preview will show how selected profile will behave in selected mode. Useful for fine-tuning custom profiles.
Selected Profile Info and Preview - a composite control that includes
- Profile name (pulled from its XML definition) - optional
- Profile description (pulled from its XML definition) - optional
- Preview fields for all defined scopes. The profile may overload the animation program for certain digits. For example, you can make all digits except the seconds-low slide slower (seconds-low animation time can not exceed 1 second, evidently). If this is the case for the profile in use you can see how the digits will behave in "real life". Scope "*" means default - for all digits, scopes 0 to 6 stand for digit index starting from the lowest (seconds-low).
A thin border is always displayed around the digit preview. It will not be displayed in frontend (unless a border is defined in the profile itself). Here it serves to help you to observe elements positioning and alignment inside the digit area.
Custom Profile - one of the key features of Smart Countdown Pro is the possibility to create your custom profiles or edit (fine-tune) the installed ones. If one of the installed profiles is currently selected in "Animation Profile" list its XML data is auto-populated into this field, so that you can view and edit it. When you modify the profile's XML definition and save the "Animation Profile" list selection is switched to "--- Custom ---" automatically. This ensures that on the next "save" you work will not be overwritten by one of the existing profiles. Note that if you return to profiles selection, choose one from the list (except "--- Custom ---") and save, your custom profile data will be lost! So copy-paste it somewhere for future use if needed.
Custom Profile field is a simple text area. It is OK for fine-tuning a profile but if you like to create a new profile from scratch you would better use your favourite text editor that supports XML syntax and then copy-paste your work into "Custom Profiles" field.
Animation preview starts the next animation cycle every 5 seconds, so that you can work with animations that take longer than 1 second (may be needed if the scope of the animation is greater than 0, i.e. starting from seconds-high)
See Creating Animation Profiles for details.
Open a Support Ticket if you have problems installing or configuring Smart Countdown.