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. Only admin users and other users with the design right can create new designs. Designs are always visible for everyone and available for everyone to use in the same organisation.

Designs can be created with the Design editor or with the CSS editor. The elements that can be changed with the Design editor have some limitations. For more advanced designs please activate the CSS-editor. Once the CSS-editor has been activated. It will overwrite any changes made with the design editor. 

This article contains the following sections:

• Create a new design
  • Design editor
  • CSS editor

Create a new design

The admin user and users who have the design right can manage designs like before under the top bar selection: materials.

To create a new design:

1. Go to the top bar and select materials
2. Choose from the left menu > design
3. All of the existing designs and Lyyti's ready-made designs will be listed on the main page
4. Select Add design
   
5. Fill in the basic information of the design: name, if the questions are by default one below the other or on the same row and if other users can also edit the design or only use the design
   
6. Save and continue
7. Choose to create the design with the design editor or the CSS editor
   

Note that if you select to create the design with the CSS editor, the design editor will not work anymore. All changes would then need to be done in the CSS code. 

It is also possible to create a new design by copying an existing one. To do this, click the three dots on the main Designs page and select Copy. If you copy a design that uses the CSS editor, no changes made with the design editor will be visible

Design editor

A new design can be easily created with the new design editor by just copy pasting the needed colours and other material in the design editor.

In the design editor it is possible to define only certain elements:

• Primary colour
• Button colour and button text colour
• Button roundness
• Fonts and font colours (You can choose a font from the selection or upload your own font)
• A logo
• Background colour or picture
• Default banners: top banner and/or bottom banner

Colours are added to the editor as hex colour codes or with the help of the colour picker.

After the design is ready, remember to publish the design and save it from the top right corner.

Note that if you select to create the design with the CSS editor, the design editor will not work anymore. All changes would then need to be done in the CSS code. 

It is also possible to create a new design by copying an existing one. To do this, click the three dots on the main Designs page and select Copy. If you copy a design that uses the CSS editor, no changes made with the design editor will be visible

CSS editor

For more advanced designs please select to create the design with the CSS editor instead of the design editor. In the CSS editor it is possible to edit more elements if the design. Using the CSS editor will overwrite the changes made on the design editor side and once it has been activated it cannot be deactivated.

You can find the technical documentation for the design CSS in here. There 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.

If you activate the CSS editor in your design it cannot be deactivated later so please only activate the editor if you have previous experience with the CSS code. 

After the design is ready, remember to publish the design and save it from the top right corner.