1. Help Center
  2. Tips and designs hacks

Code your own templates guideline

There's two options to create your own unique template. Use Zuuvi Studio or code it. If you are tech-able use this guide. 

File Structure

A Zuuvi template consists of the following. An index.html containing all markup, css and js, an images folder containing any images referred from the markup and css and a fonts folder for any custom fonts you might need. When uploading your template compress it all in a .zip file

Naming files

All filenames must be properly named, using only letters (from a-z), numbers, dashes, underscores and dots ([A-Za-z0-9\-\_\/\.]) 

External JS and CSS

The system does not support external CSS as it might conflict with the site the banner is running on.

You may refer to external js, as long as the referenced script does not manipulate the banner. So please do refer to external libraries, please do not refer to your animation script.

Note: All external files must be loaded over HTTPS.

The banner wrapper

Every banner template must have a wrapping element enclosing the whole banner markup. The element must have the id banner.

You should also add the data-zuuvi-duration to the wrapper, which should be the total animation duration of your banner. Note: this can be found by using timeline.duration, if you are using TimelineLight or TimelineMax.

The width and height of the banner should also be defined using data-zuuvi-width and data-zuuvi-height. Note: these numbers should be given in pixels and should not contain px or any other type of annotation.

Google fonts

You can enable Google fonts to be available as a global setting for your banner.
Just add the attribute data-zuuvi-google-font="enabled" to your banner wrapper.
Any font-family styling used on elements inside the banner wrapper will be kept. Only the global font-family for the banner will be changed when using the Google font option.

 

Fields

To make content editable in your banners, use the attribute data-zuuvi-field. Doing this will create a content input in the editor’s sidebar. Use the data-zuuvi-label to control the label text.

Note: All fields must have an id to ease reuploading existing templates. 

Text field

Perfect for all your single line text needs.

Text area

Used when you need multiline text.

Max length on text

To limit a text field or textarea use the data-zuuvi-maxlength attribute.

Font size and line height

To be able to change the fontsize and/or line-height of a text field or textarea, you can use the attribute data-zuuvi-textmodifier.

Set the data-zuuvi-textmodifier attribute to fontsize or lineheight (without the dash). Seperate them by a comma if you want both present.

 Auto font size

Zuuvi can change the font size of a text field live in the editor.

This feature can help containing the text inside a specific area.
Just add a div wrapper around the p tag, that has defined a width and/or height, and set data-zuuvi-textmodifier="autofontsize" on the p tag.

Clicktags

To make clicktags in your banner add the attribute to a link. You can have as many clicktags as you want in your banner.

 

Images

To insert an image, add the attribute to an image tag and set the value to image.
Note: will only work with img tags.

Each image must have a width and a height, so the parser knows the desired image size.

 

Videos

To insert a video, add the attribute to an video tag and set the value to video.
Note: will only work with video tags.

Each video must have a width and a height, so the parser knows the desired video size.

You should add one source tag for each of the formats (mp4, webm, ogg) you wish the template to require.

 

Color

For when you need to have the ability to change the background color and nothing more of an element. Not to be confused with the attribute data-zuuvi-colorchange.

 

Special attributes for fields

Show/hide element

If you want the user to be able to show and hide an element, use the attribute data-zuuvi-showhide.

 

Optional class

Sometimes it is nice if a user can enable a custom CSS class on a specific field, this can be done using the attribute data-zuuvi-modifier. It takes two comma-seperated values where the first is the CSS class and the second is the label you want to show to the user.

 

Movable element

If you want to enable the user to move objects around in the banner, then this can be done using the attribute data-zuuvi-movable on any field. It accepts a comma-seperated list in which the values x (horizontal movement) and y (vertical movement) can be set.

 

Color change

To let the user change color of either background, text or both use the attribute data-zuuvi-colorchange on any text field. It accepts a comma-seperated list where you can set background and text.

Insertion point

If you want to be able to change an element, but want to write to another element inside it, you can use data-zuuvi-insertionpoint. The value should be an id of a child element. The content will then be written into that element instead, but all effects (movability, optional classes etc.) will affect the original element.

 

Slides

Typically you will want to group your fields somehow. You might have a banner with three products, or two messages with a background image each. For that you can use slides.

A slide is made by adding the attribute data-zuuvi-slide="true" to a wrapper.

You should also add the data-zuuvi-keyframe attribute, to tell the system, where on the timeline your slide is visible.

 

Animation

As of now we recommend to only use TimelineMax by Greensock for animation, as it implements functionality needed by the Zuuvi editor.

For documentation on creating animations with TimelineMax go here: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

We provide a wrapper for TimelineMax, that extends the timeline with control over your videos.

 

Loading TimelineMax and Zuuvi.js

To create animations first load TimelineMax and the Zuuvi wrapper. The zuuvi wrapper can be accessed through _zuuvi.

 

Creating the timeline

All banners must have a global variable zuuviTimeline containing the timeline. Use the _zuuvi wrapper to create the timeline if you need video playing capabilities.

The timeline will autoplay when ready (i.e. when all resources are ready).

Controlling videos on the timeline

To control video playback on the timeline, use the playVideo and pauseVideo to play and pause.

 

Cookies

In general cookies are allowed though discouraged. But the user has the possibility to say that they do not want any cookies set at all. If the cookie ZOPTOUT is set and has the value 1, then you are not allowed to set any cookies in your banner, and you should check for this yourself.

 

Examples

Where do I start?

To get you started we have made a minimal banner with no content. This can be found in where_to_start.zip.

 

Banner with slides

We have also created a small banner with some content to show you the basics. This can be found in banner_with_slides.zip.

Video banner

In the file 300x250_videobanner.zip you will find a very basic video banner, which purpose is to show how the video timeline works.