top of page

HTML And CSS Layouts for Lucit Dynamic Templates

Lucit Dynamic creatives are generated using HTML, CSS (and Javascript) in a responsive way to create the final image that will be rendered on the digital out-of-home screen.

We automatically turn the final rendered HTML into individual JPEG images that can work on any out-of-home screen. This is handled automatically by the Lucit Rendering Engine.

This means, that any digital screen that can display a JPEG, can display dynamic creatives from Lucit.

Widths, Heights and Positions

A key concept in the Lucit Template Designer is that heights, widths and absolution positions are based on percentages and not pixels.

The ensures that the templates are perfectly responsive to changing screens sizes (board formats)

All template content is contained with special container div that is fixed to exactly 100% height and width of the screen (using vw and vh CSS units)


The basic HTML and CSS that make up the container looks like the following

As you can see by the styles applied to the html, body and the "container" element, the template will always be the same height as the screen it is targeted at.

Element Divs

Each element in the designer has a corresponding div in the HTML that is generated for it.

You can view the html for your template on the HTML tab of the code editor

Each element will fall into one of the following main types


id is always "rectangle_default_bg"

Only one exists in a template and its primary purpose is to provide a background for the canvas to set a background color


A raw text element x-objectcode="text"

Can contain any amount of text


x-objectcode="asset_img" and data-value as well as the background style contains an image macro

Although not considered dynamic fields in the strictest sense, they do contain a macro that references the image object to display


x-objectcode="{shape_id}" and normally contains an svg element as its first child

These are added with the Shapes tool

Dynamic Text

Represents some dynamic text linked to an inventory item. x-objectcode="{macroid}" and data-value typically is a reference to the macro itself

Adding Dynamic Data elements generate these elements - such as Title or Price

Dynamic Image

Similar to Dybamic Text except they render an image.

Adding dynamic images create these fields

Background Element

This element is created by default and does NOT appear in the layers editor.

It is designed to provide a canvas for changing the background color. When organizing layers, this one will always be at the bottom

The HTML and CSS for this element looks like the following

In the Template Designer, the only control for this layer is the Background Color under Appearance on the Canvas Tab

Text Element

Text elements are added using the Text elements in the toolbar

The HTML in the Code Editor for these elements looks like the following

  • x-objectcode : Can be one of any of the text object codes. Common examples are text or paragraph

  • id : Randomly Generated and unique

  • class :

    • lc_dt_text required for all text type elements

    • lc_dt_text_editable allows you to edit the element inline

    • lc_format_fit_text auto sizes it to fit the box

Image Element

Image elements are added by uploading images in the toolbar

These elements use macros to identify the uploaded image on the template

These macros resolve to the url of the image

The HTML in the Code Editor for these elements looks like the following

  • x-objectcode : always asset_img

  • id : Unique id, always prefixed with img

  • class :

    • lc_dt_asset : Required on all uploaded images

    • lc_dt_image : Required on all uploaded images

    • lc_dt_image_center_contain : This is a example formatting class

  • data-value : This contains the image macro. It resolves to the actual image URL. The object is represented by the lcuid of the lucit image object

  • style : All images are rendered as backgrounds on the primary div

Shape Element

Shapes are HTML objects, normally SVG's that are added to your template using the Shapes section in the toolbar

When adding a shape, the resulting HTML will look something like the following

  • x-objectcode : The code representing this particular shape

  • id : A uniqe id for this element

  • class :

    • lc_dt_object - All shapes have this

    • lc_dt_object_svg - If the object is an svg.

The div content itself, then contains the HTML shape code. Note the svg element for a square in the example

Important : svg should have width and height at 100% and pointer-events set to none

Dynamic Text Element

Dynamic text elements are linked to macros and are added using the Dynamic Data Elements section in the toolbar

When adding these elements, the HTML will look something like the following

  • x-objectcode : An id representing the dynamic element

  • id : Unique id, always prefixed with data_source_text

  • class :

    • lc_dt_data : Required on all dynamic elements

    • lc_dt_text : Required on all text elements

  • x-placeholder : Text that is displayed to the user when the macro has not resolved to a value - Used in previews and when posting. This value is set by the Placeholder Helper text in the Object Settings for the element

  • x-fieldname : When prompting for this value, templates will use this name

  • data-value : This contains the field macro that resolves to this value. See the macro reference

Dynamic Image Element

Dynamic image elements are similar to Dynamic Text elements except that they render as a data connected image to the underlying data object

Dynamic image elements are added using the Dynamic Data Elements in the toolbar and are identified by the small image squares next to each one

When adding these elements, the HTML will look something like the following

  • x-objectcode : An id representing the dynamic element

  • id : Unique id, always prefixed with data_source_img

  • class :

    • lc_dt_data : Required on all dynamic elements

    • lc_dt_image : Required on all image elements

  • x-placeholder : The url to the image that will be used a placeholder. This can be changed in the Object Settings dialog Edit Placeholder Image

  • x-fieldname : When prompting for this image, templates will use this name

  • style : Image elements render using the css background-image property of the element

  • data-value : This contains the field macro that resolves to this image. See the macro reference

Classes Reference

Classes are used for 2 primary purposes:

  • Tagging

  • Formatting

Tagging classes are just used to identify elements of a specific type and do not provide any visual formatting.

Formatting classes, add built in standard formatting.

Tagging Classes


All elements have this class. This identifies the element as part of the layer structure in the template


Represents an object (for example, a shape)


An svg object.


Indicates a non-data connected element


An element that is connected to data


All image elements (static or dynamic)


A static uploaded asset (usually an image)


A text element - Static or Dynamic


The data-value is actually a custom field function


If a text field has this, you can edit it in the designer by double-clicking on it

Formatting Classes


Applied to the background element


Center and fill the image to the box


Stretch and Fill the image to the width and height of the screen.


Center but do not crop the element in the box


Shrink or Grow the text in the box. This is applied when Font Size is set to "Auto"


No special formatting


Format a price as US dollars


Short - like $10K


Round down without decimals


Put the cents in superscript


standard nanp format


Uses hyphens only


Adds a degree symbol for temperature


Uses dots

Element CSS

When using the Lucit Template Designer, most operations either add/remove classes, or, directly edit the CSS

Here is an example of the css for a text element

Note the use of percentages for positioning and size.

The remaining css styles are all industry standard. The rendering engine is based on Chrome so any CSS styles supported by chrome will parse and render correctly

All CSS for the template is available in the CSS tab of the code editor

Independent Edit Mode

By default, your template is on "All Sizes" mode which means that all CSS changes are applied to all sizes of your template

See Screen Format Reference for more information on Lucit Screen Formats

This is the recommended mode to start with when you first start building your template

Once you begin to need to create changes on individual sizes of your template, you will then switch you template into independent mode by selecting "Each Size Independently" on the Canvas Tab -> Editor Mode section

When this happens you get the following message

Warning, changing to Individual Editor mode will enter a mode where you can edit each size independently. All changes will only apply to each size and this is NOT REVERSABLE. If you switch back to Global Editor mode, you will lose individual editor mode changes you have made.

Once you hit ok, you can now edit each size, independent of the other sizes.

Under the hood, the template designer copies all of the css for the elements into CSS Media Queries that match each size

Here is an example for 3 different screen sizes

Each size variant has it's own set of media queries, and now, when you edit the elements in the designer, only the appropriate size change.

This setting does, however, introduce the following limitation :

You cannot edit the global CSS anymore.

When you open it in the code editor, you will be greeted with the following message, and the CSS section is greyed out

You are in individual edit mode. Changes to HTML and CSS will not function as expected. HTML and Javascript Changes are global and will affect ALL sizes, GLobal CSS Changes are disabled, Use the right-click "Edit CSS" menu on each individual element to edit the CSS for each element

In order to access the underlying CSS for the element, you will need to right-click on it, and choose "Edit CSS / HTML"


Under the hood, the Lucit Template Designer is completely customizable, not just through the HTML and CSS discussed here, but with custom functions and custom formatting functions.


Commenting has been turned off.
bottom of page