Before continuing, we recommend that you first check the articles dedicated to graphic customisation, which will help you understand how to adapt the appearance of your campaigns.
If, however, all the possibilities offered are not enough, you can also use an advanced graphic customisation tool.
We have optimized the different themes to provide the best possible experience for your respondents. Advanced graphical customization allows you to go even further. However, we recommend that you contact a member of your technical team during handling.
______________________________________________________________
Where can I find the advanced customisation tool?
In the editing part of your design, you will find on your right the Advanced CSS Customisation pane.
To open it click on the pictogram:
It displays the Advanced custom CSS pane:
You can directly enter your CSS code in the dedicated input field.
______________________________________________________________
Precautions for use
- To limit the scope of CSS rules and avoid some display errors, be sure to start the CSS selector with:
"& "
- For your rule to take precedence over existing rules you can add at the end of the declarations the following keyword:
!important
- The advanced CSS clause must start with:
{
- And must end with:
}
- Be sure to scrupulously respect the CSS language, as the advanced customisation tool does not have a means of validating the elements you enter. Examples of resources to understand CSS: https://www.w3schools.com/css/ or https://openclassrooms.com/
______________________________________________________________
Example of advanced customisation
You want to change the colour of the stars of a CSat item, when hovering over them, when the respondent is about to make his or her choice of rating.
Let's assume that you have this type of colour palette:
Go to the Advanced CSS Customisation panel.
__________________________________________________________________
For example, insert this type of customisation code (do not copy it):
{
.mfb-widget-scalerating.scale-rating.rating-value
{
&.rating-value-hover:nth-child(1):after{
color: #ff6300;
}
&.rating-value-hover:nth-child(2):after{
color: #ffba03;
}
&.rating-value-hover:nth-child(3):after{
color: #ffffff07;
}
&.rating-value-hover:nth-child(4):after{
color: #92d14f;
}
&.rating-value-hover:nth-child(5):after{
color: #00ad4f;
}
}
}
__________________________________________________________________
Then click on Save.
The colour of each star has been changed.
This will give this type of result when hovering the rating stars:
Do not hesitate to contact your technical team to help you customise your surveys.