Печать

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:

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:

Changing Responsive Rules

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

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:

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

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.