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.
Relative to session start - special counter mode, is disabled by defualt. See Setting the counter relative to session start for details.
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.
Compact mode - check this option if you need a counter that occupies minimum space possible. Only one time unit (days, hours, minutes or seconds) will be displayed at a time. This option is useful when dealing with events in far future (or far past), so that days left/passed is the only data your site visitors should see. Nevertheless, this mode is reliable for all events: if counter "days" value is zero, hours left/passed will be displayed; minutes will be displayed if days and hours are zero and so on.
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.
Redirect on click - make the counter clickable, so that it can act as a link to the page/menu configured in module settings.
Confirm redirect - "Redirect on countdown zero" function now can be configured to show confirmation dialog, so that users can cancel redirection, e.g. if they are in the middle of filling a web form, etc. and do not wish to lose unsaved data.
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.
Show Module - By default the module is displayed on all screen sizes. If responsive scaling (see the options below) doesn't give desired results there is another "radical" method of getting the module look as responsive: conditional display with a duplicate. In order to use this method you have to create a copy of Smart Countdown module ("Duplicate" toolbar button in module manager will do the trick). Then change layout, styles and font sizes options in the copy to get it best looking on narrow displays. Leave the rest of module options (including position) intact. Then open "Responsive" pane and select one of "Width equal to or less than ...px" options. Save and return to original module configuration "Responsive" pane. Select corresponding "Width greater than ...px" there and save. Logically you have to select the same width value in both cases. After both modules are configured only one will appear on the page at each moment. When the screen grows the original module will be displayed and the other will be hidden, and vice versa. This workaround gives you complete control on module layout in different screen resolutions, e.g. on small screens you can opt for vertical counter layout while keeping horizontal layout on desktops.
Responsive enabled - enable/disable module responsive scaling.
Wider than 960px (%) - Scale in percents (100% = scale 1.0, i.e. original size) to be applied when the module is displayed on wide screens.
Less or equal to 960px (%) - Same as above but for screen widths <= 960px.
The rest of the fields add more reference screen widths. If you leave one ore more values empty (zero) they will be ignored.
Responsive behavior settings can be enabled and configured individually for each module instance. Scales configuration is up to you and depends on current module layout, its position and role in your template. A traditional method would be something like the screenshot above (although the numbers would be different, may be) - module becomes smaller on smaller screens, but in some scenarios you may prefer the opposite effect. E.g. imagine that there is a countdown in the footer of your page and it has 100% width space in your template (a single column footer). Making it actually 100% wide will look terrible on a desktop - it will be too big! So normally we setup the module so that it reads well and calls attention, i.e. having 30px average font size look. But on a smaller screen we can make the module bigger because we know that we still have unused margins in the module position (the footer in this example) and it will not break page layout. If the screen is even smaller (next reference width setting) so that horizontal margins around the module get consumed, we can scale it to a smaller value, and so on.
The fact that responsive settings are applied individually to each module instance allow you to experiment without affecting other Smart Countdown modules.
"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.
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.
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.
Event text size - font size for event text.
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.
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.
Counter labels size - font size for labels.
"Space between ..." settings - define the distance in px between counter elements. The effect depends on the layout selected.
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.
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.
"Styles" options screen:
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)
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).
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.