Theme and variations

SkelVanilla include themes based on bootswatch like core bootswatch LimeSurvey template, SkelVanilla include too colored theme inspirated by LimeSurvey Fruity theme.

Each theme come in 4 variations :

Aria : label, describe, live and hidden

LimeSurvey 3 already added some a11y improvement with usage aria-labelledby, SkelVanilla add more :

• The question help added to aria-describedby
• The dynamic help tips added to aria-describedby
• Usage of aria-live for dynamic text
• Usage of aria-hidden for question hidden by condition
• Usage of invalid with custom validity for input (can be deactivated)

Custom validity

SkelVanilla allow to set validity according to question settings.

You can test it on Test dynamic validate.

Relevant and mandatory question are set to required and validity is set with the text used by LimeSurvey for tips.

User still allowed to move previous or use index, but validation or move next is disable since validity of input is not fixed.

Using h2 or h3 for question

HTML5 allow usage of section and header : SkelVanilla use it by default for group, and allow you to use for question using an h2 or h3 title.

This option must be activated in Survey option (or globally) : when activated html is shown with header and section:

You can disable the head and the section on specific question: add skel-tagnoheader class on question Class name.

Default header size is h3 if group title are shown and h2 if not. You can force to be h2 with skel-tagH2 and h3 with skel-tagH3.

If you don’t enable global header and section : you can enable it for each question manually adding skel-tagheader to the question css classes. Bu default it’s a h2 header, you can set it to h3 with skel-tagH3. This can be used with Sub-group inside group.

Some decoration options

You can choose how question was wrapped : default one is none (something like Fruity core template). You have well wrapped (like vanilla core template) or inside a panel (more like boostswatch core template).

But you can choose too : the color of the question text and the question (using color helper of boostrap)

Decoration options different for each question

You can use Question CSS classe in advanced settings to set different value for each question.

Wrapper

• skel-wrap-well Use well wrapper for this question
• skel-wrap-panel Use panel wrapper for this question
• skel-wrap-none deactivate wrapper for this question

Color

• skel-color-none Use default body color for this question
• skel-color-primary Use primary color for this question
• skel-color-info Use info color for this question
• skel-color-success Use success color for this question
• skel-color-warning Use warning color for this question

Size

• skel-size-body Use default body size for this question
• skel-size-h2 Use h2 size for this question
• skel-size-h3 Use h3 size for this question
• skel-size-h4 Use h4 size for this question
• skel-size-h5 Use h5 size for this question
• skel-size-lead Use lead size for this question

Other tool

• skel-noquestion do not display question
• skel-inside put panel-body margin to have a sub-question without usage of skel-group
• skel-help-nothelp how help without the help icon
• no-footer-spacer disable margin after the question
• show-in-previous a fixed right or left margin of 3em

Sub-group inside group

SkelVanilla add some helper to create sub group of question. Usage of this system is powerfull but can be difficult.

To create sub group you have this css class:

• skel-start-group : start a group by adding a start tag before the question. The skelvanilla question class are set to this group, original question didn’t have class set by skelvanilla. The skel-group is added to the class.
• skel-end-group : close the group by adding a close tag.
• skel-start-group-question : remove the close tag of this question. Then hidding this question hide the whole group
• skel-no-question : remove whole question text part.

Remind to use previous part to set different wrapper for the question inside group. Usage with well and panel are tested. For panel, with skel-start-group class: panel header is the question. For question inside the group : 2 solution : you leave panel system and have multiple panel heading or you use panel-body skel-wrap-none class to be seen without the heading.

You have a complete demonstration of this function on Skelvanilla group in group with columns

Table fixed or no-more-table

For table question type : default behaviour for little screen is to show it with “no more table” system this shown table like a list of element. Like the default LimeSurvey template.

With SkelVanilla : you can add table-fixed and table-responsive class to disable this update. You can see the difference on this demo survey.

Table with fixed header

By default table have a fixed header, this system was tested with Chrome, Firefox and IE edge. You can test it at demo.sondages.pro.

You can globally disable the option, and set by question adding table-fixed-header CSS class to a question.

Some other minor functionality

– Show clear all : you can hide all clear all action with an On/Off button
– Top link action : you can choose to show or hide all possible action in the header. You can hide the core action, but you can show the next and the previous button if needed.
– Survey description : allow you to show description of survey i all page, not only on welcome page.
– Survey title : you can choose to hide surey title.
– Logo as banner : with logo as banner : you use it like a banner on whole header.
– and a lot of other functionality, best is to try !

Variation and adaptation

If you want only too fix some part : theme.css and custom.css are empty in SkelVanilla and stay empty. Then you can extend SkelVanilla and update one of this 2 files. You can choose to extend theme.css for your base theme, and use custom.css for specific survey.