Layout presets are XML documents containing module layout configuration settings. A bunch of layout presets are already included into the package and are available right after installation. New layouts can be easily created using existing ones as a guidline.

The following layouts are available right after installation, descriptions provided are valid only if there is enough horizontal space available to the module:

  • Auto - digits displayed from left to right with labels to the right of the digits, event descriptions above and below the counter block.
  • Horizontal compact - digits displayed from left to right with labels below the digits, event descriptions above and below the counter block.
  • Horizontal compact titles inline - digits displayed from left to right with labels below the digits, event descriptions inline - before and after the counter block.
  • Horizontal compact wrapping - same as Horizontal compact but non-responsive. Counter units will wrap to the next line if there is not enough horizontal space.
  • Horizontal lables left - same as Auto but with labels to the left of the digits.
  • Vertical - digits displayed in column with labels to the right of the digits.
  • Vertical compact - digits displayed in column with labels below the digits. Non-responsive.
  • Vertical labels left - same as Vertical but with labels to the left of the digits.

Responsive Rules

All layouts listed above, except "Horizontal compact wrapping" and "Vertical compact" are responsive. When there is not enough space in a template position, the module will first slightly scale down its elements size. When required scale falls below a certain value module will switch to a more compact layout automatically. This algorithm ensures that the counter display is always readable.

The following chart describes layouts behavior - starting from full width position to the most narrow one:

  • Auto -> Horizontal compact -> Vertical -> Vertical compact
  • Horizontal compact -> Vertical -> Vertical compact
  • Horizontal compact titles inline -> Horizontal compact -> Vertical -> Vertical compact
  • Horizontal compact wrapping - not applies
  • Horizontal lables left -> Horizontal compact, but with lables on top of digits -> Vertical labels left -> Vertical compact, but with lables on top of digits
  • Vertical -> Vertical compact
  • Vertical compact - not applies
  • Vertical labels left -> Vertical compact, but with lables on top of digits

Changing Responsive Rules

Default layout for each preset is defined by the following nodes:

  • Event texts position <event_text_pos> - vert / horz
  • Counter layout <layout> - vert / horz
  • Lables position <labels_pos> - right / bottom / left / top

Consider the settings above as responsive behavior rules for scale = 1, i.e. when there is enough horizontal space available to the module.

More responsive behavior rules are located inside <responsive /> node of layout XML. <responsive value="0"> will disable responsive feature and the node can be left empty. <responsive value="1"> requires that you add several <scale /> child nodes to <responsive /> node. Scale nodes must be ordered ascending by value, i.e. with lowest values coming first.

Each <scale /> node can contain the following layout details:

  • Event texts position <event_text_pos> - vert / horz
  • Counter layout <layout> - vert / horz
  • Lables position <labels_pos> - col / row

After you create a custom layout preset yourself you can select it in an unpublished module's configuration and test in preview window (open preview using the button in "Layout" pane). This will not affect your site front-end and you can feel free to experiment.

Miscellaneous Layout Settings

  • Paddings <paddings> - defines minimum number of digits dedicated to each time unit. All built-in presets share the same settings which suit the vast majority of usage scenarios.
  • Labels vertical align <labels_vert_align> - for layouts with labels placed to the left or to the right of the digits, available options are: "middle", "top", "bottom", high", "low", "superscript" and "subscript" and define how labels are vertically alighed with digits (normally they are smaller). The options are self-explaining.
  • Hide highest zeros <hide_highest_zeros> - default 1 (yes). All built-in presets share the same settings but you can create personalized custom presets copying on of exisiting ones, changing "Hide highest zeros" setting to 0 (no). This option defines how counter units with zero value are displayed if there are no non-zero time units higher that a given one. E.g. if time interval is 1 week, 2 days, 0 hours, 15 minutes and 1 second and all time units are enabled in module configuration, by default the counter will show interval as is - 1 week, 2 days, 0 hours, 15 minutes and 1 second. With "Hide highest zeros" disabled the counter will display 0 years, 0 months, 1 week, 2 days, 0 hours, 15 minutes and 1 second.
  • Allow lowest zero <allow_all_zeros> - default 0 (no). All built-in presets share the same settings which suit the vast majority of usage scenarios. This option defines how counter units with zero values are displayed if all lower units are disabled in module configurations. E.g. if you choose not to display seconds but the counter interval is less than 1 minute, "minutes" unit will be automatically replaced by "seconds" display (default behavior). With "Allow lowest zero" enabled the counter will keep showing 0 minutes until the interval remains below 1 minute, thus looking somewhat ambiguos - 0 minutes left but event deadline still not reached. It is recommended to keep default setting (no).

One of the built-in layout presets is shown in the sample below: auto.xml - default layout which will automatically adapt to the horizontal space available.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
<paddings>
<years>1</years>
<months>2</months>
<weeks>1</weeks>
<days>2</days>
<hours>2</hours>
<minutes>2</minutes>
<seconds>2</seconds>
</paddings>
<layout>horz</layout>
<event_text_pos>vert</event_text_pos>
<labels_pos>right</labels_pos>
<labels_vert_align>middle</labels_vert_align>
<hide_highest_zeros>1</hide_highest_zeros>
<allow_all_zeros>0</allow_all_zeros>
<responsive value="1">
<scale value="0.5">
<layout>vert</layout>
<labels_pos>col</labels_pos>
</scale>
<scale value="0.65">
<layout>vert</layout>
<labels_pos>row</labels_pos>
</scale>
<scale value="0.8">
<layout>horz</layout>
<labels_pos>col</labels_pos>
</scale>
</responsive>
</layout>

You can find more layout presets in modules/mod_smartcountdown3/layouts folder of your site. Use them as a guidline for creating your customized layout presets. Put you custom preset to modules/mod_smartcountdown3/layouts giving the file a unique name with .xml extension and it will appear in "Layout Preset" drop-down in module configuration automatically.

Layout Overrides

Some of layout settings can be overridden using the controls on "Layout Overrides" pane in module options. This is not a full replace of a layout preset change because overridden values will have effect for full-width module display only (i.e. when responsive rules are not yet applied). All further layout transformations in response to template position width changes will be totally controlled by responsive rules listed in the currently selected layout preset. If none of built-in layout presets fit your needs you will have to create a custom one to get full control over the module layout on all screens.