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.

>> Warning

We advise you to contact a member of your technical team before any handling. We have optimised the design to provide the best possible experience for your respondents. Advanced graphic customisation can lead to some display errors and in some cases have an adverse impact on your respondents' experience. MyFeelBack cannot be held responsible for any customisations made by its customers.

______________________________________________________________

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:

}

______________________________________________________________

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.

___________________________________________

Avez-vous trouvé votre réponse?