Template Overloading

The frontend is driven by the template engine Twig. Examples and docs can be found here: https://twig.sensiolabs.org/documentation.
All templates can be found in \[plugin_dir]\templates, every template group in his own directory.

If you want to create your own, create for a new folder (name without umlauts, white spaces and special characters, only [a-z 0-9 -_]).
From now on you can access this new template in the SQuiz edit screen (right sidebar Templates) and you can assign it to a quiz.
You must not but you can copy and customize template parts from the standard, poll or survey folder.

Additionally you must create a style sheet file in \[plugin_dir]\assets\css which must be named like this:

squiz_frontend_[template directory name].css

As you can see, that the template directory name must follow the rules for valid unix filenames.

This stylesheet will be loaded after the standard stylesheet, so that you can overwrite the standard styles as you like. Btw. the standard frontend stylesheet will be loaded even if you use another template for a certain quiz. Missing template files (in your custom template folder) will be searched in standard so that is a kind of overloading mechanism. You can overload or customize some parts of a template and you can skip other parts if they are okay for you.

With version 3.0.0 stylesheet overloading affects all quizzes, polls or surveys grouped on one page together. That means if you have a page with two items (even if they are from different type) the overloaded stylesheet will affect both.

To avoid this you have to use an unique id or class for the new template and group all styles to this class or id. Best would be to set a class for the main container and use this in your stylesheet

<div class="squiz_container my_new_template" id="squiz_{{ item.id }}">
.my_new_template.squiz_container {
   width: 100%;
   position: relative;
   height: auto;
   overflow: hidden;
   border:3px solid #a35;


Leave a Reply

Your email address will not be published. Required fields are marked *