About the theme editor

Theme options change the look of a survey without code. When you need more, for example your own CSS or JavaScript, create your own theme in the theme editor. Your theme extends a core theme: it inherits all files of that theme and stores only the files you change.

Note: The theme editor needs super administrator rights or the Themes permission, and it is made for users who know HTML and CSS.

1. Export, Extend, Rename and Delete: actions for the whole theme.
2. Theme and Screen: the theme and the page of the survey you work on.
3. The file you view, open in the code editor.
4. Copy to local theme and save changes: saves the file into your theme.
5. The files of the theme. Inherited marks files that come from the parent theme.
6. Preview: the selected page with your changes.

Create your theme

1. In the top bar, click Configuration, then Themes.
2. On the Survey themes tab, click ... next to Fruity TwentyThree, then Theme editor.
3. Click Extend. Core themes can't be edited directly, only extended.
4. Enter a name for your theme and click OK. The suggested name is extends_fruity_twentythree.

The Extend entry in the ... menu on the Themes page does the same. Your theme opens in the theme editor. On the Themes page it is listed as a User theme, with fruity_twentythree under Extends.

Tip: Extend Fruity TwentyThree, the default theme. The Theme list in the survey settings offers Fruity TwentyThree and the themes you extend from it.

Edit a file

The lists on the right show the files of your theme: Screen part files (Twig templates), JavaScript files, CSS files and Other files. Files marked Inherited come from the parent theme.

1. Under Screen, pick the page you want to change, for example Welcome or Question.
2. Click a file in the lists on the right. It opens in the code editor.
3. Make your change.
4. Click Copy to local theme and save changes. For a file your theme already has, the button is Save.

The message Changes saved successfully. confirms the save, and the file loses its Inherited label. Copy only the files you need to change: inherited files keep getting the updates of the parent theme. The Preview below the code editor shows the selected screen in the sizes Mobile, 640x480, 800x600, 1024x768 and Full.

Add your own CSS and JavaScript

Put your CSS into custom.css and your JavaScript into custom.js. The theme loads custom.css last, so your rules override the rules of the theme. For example, this rule shows the text of question 105 in bold:

#question105 .question-text { font-weight: bold; }

For the IDs and classes of questions and more examples, see Style questions with CSS.

Add pictures and other files

Under Other files, pick a file at Upload a file and click Upload. Files can be up to 40 MB. To show an uploaded picture in a Twig file, use:

{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}

Use your theme in a survey

1. Open the survey in the editor.
2. In the left toolbar, click Settings, then General.
3. Under Theme, pick your theme. The change saves by itself.

Export your theme

Export downloads your theme as a ZIP file, for example extends_fruity_twentythree.zip. Export one before bigger changes, as a backup. To install a theme ZIP file on another survey site, click Upload & install on its Themes page.

Next steps

• Theme options and presentation settings
• Manage themes
• Use a question theme

FAQ

Can I edit Fruity TwentyThree directly?

No. Core themes can't be edited directly, only extended. Extend the theme and edit your own copy.

Does my theme still get the updates of the parent theme?

Yes, for the files you don't copy. Inherited files keep getting the updates of the parent theme, so copy only the files you need to change.

How do I use my theme on another survey site?

Click Export in the theme editor to download the theme as a ZIP file. On the other survey site, click Upload & install on the Themes page.