Please be aware that Lyyti is developed constantly and your view might not match 100% with the view described in this article.

This feature can be used with the following license packs: Starter, Basic, Professional and Enterprise.

A design creates the basic elements for the visuality of the registration page, mini event site and surveys. The design determines the colours, fonts and logo on the registration page. In Lyyti you can either use ready made designs: Lyyti Green and Lyyti Grey or create your own designs to match the brand colours and elements of your organisation.

Designs are created with the help of CSS code (a style sheet language). In order to create your own designs you need to know how to write CSS otherwise it is possible to order a new design or changes to an existing design from customer support.

This article contains the following sections:

• Create a new design
• Technical documentation for the CSS

Create a new design

You can create a new design or edit en existing design in the materials section:

1. Go to Materials 
2. Choose Designs from the menu on the left
3. You can create a new design from Add design button
4. If you want to preview or edit already existing design klick on the settings button next to the existing design. Here you can also delete an old design if it's not in use.

1. Give a name to the design.
2. Mark the design as Published only when it is completely done and ready to be used. 
3. Add the CSS code here in the code editor. Designs are created using CSS.
4. Add images and fonts to the design:
   • First, save the design before adding files.
   • Click Add image. Supported file types are jpg, png and gif, maximum file size is 5 MB. Recommended image size: 1920 x 1080 px. The image appears above immediately after upload. Copy the image file's address Lyyti gives you and paste it into the code. Please note that the file name is different from the file name on your computer.
   • Click Add font. Supported file types are ttf, otf, eot, woff and woff2, maximum file size is 5 MB. Copy the font file's address and add it into the code. Please note that the file name is different from the file name on your computer.
   • To delete a file take the mouse over an image and click Delete
5. Save the design.
6. Preview the design.
   • The preview mode shows you all the element's in Lyyti's registration process.
   • Not all elements appear on the page at the same time, but in preview mode you can see them for design purposes.

A design is always visible to everyone in your organisation as soon as the design is published. After that, anyone can use the design in their layouts and events.

Technical documentation for the CSS

You can find the technical documentation for the design CSS in here. You can there see a list of all elements that can be added to the design and one example code that you can copy and paste to your own new design and then set the wanted colours etc.