Pages
Production
CSS
🎲 CODE ETOILE COULEUR
.sg-star-box label.sg-star-1
{
background-image: url(//widgixeu-library.s3.amazonaws.com/library/90008354/Stars_edf_enr_commerce.png);
}
.sg-star-box label.sg-star-1
{
background-image: url(//widgixeu-library.s3.amazonaws.com/library/90008354/Stars_edf_enr_commerce.png);
}
Taille de l’étoile
/*Agrandir ETOILE*/
.sg-star-box label.sg-star-0, .sg-star-box label.sg-star-0 {display: none;}
.sg-type-multimenu .sg-question-options, .sg-type-rank-table .sg-question-options, .sg-type-table .sg-question-options
{float: left;}
.sg-star-box {
padding: 7px;
overflow: visible;
display: flex;
gap: 17px;
}
.sg-6stars {
width: 200px;
}
.sg-star-box label {
transform: scale(1.5);
}
.sg-type-table .sg-table {
width: 100%;
}
.sg-type-multimenu .sg-question-options, .sg-type-rank-table .sg-question-options, .sg-type-table .sg-question-options {
width: 100%;
}
/*Fin Agrandir ETOILE*/
Intégration d’une nouvelle Police de caractère
*{outline: none!important;}/*Enlevé les Outline du questionnaire*/
/* Mise en place de police spécifique */
@font-face {
font-family: 'Styrene A';
src: url('fonts/styrene-a-regular.woff2') format('woff2'), /* Modern Browsers */
url('fonts/styrene-a-regular.woff') format('woff'); /* Older Browsers */
font-size: 16px;
color: #34617D;
letter-spacing: 0px;
line-height: 24px;
}
/* Fin Mise en place de police spécifique */
.sg-survey .sg-button
{
font-family: Arial!important;/* Police des bouttons*/
}
Intégration d’une nouvelle Police de caractère
Description : “row-110” représentent des indexations de la question étoile, ce qui signifie qu'il faudra ajouter une nouvelle classe pour chaque question.
/*Centrage étoile*/
th#row-110.sg-first-cell{display: none;}
th#col-10221.sg-single-cell.col-10221{display: none;}
.sg-type-table .sg-first-cell.sg-mock-th{border-bottom: 0px solid #ECF0F1;}
/*.sg-6stars{float:right;} Etoile à droite*/
.sg-6stars{margin:auto;}/* Etoile au centre*/
/*.sg-6stars{float:right;} Etoile à gauche*/
.sg-star-box label.sg-star-0, .sg-star-box label.sg-star-0:hover{display:none;}/*Masquage du "x" à gauche des étoiles*/
/*Fin Centrage étoile*/
Voici le résultat :
Design Question NPS
Voici les code pour changer la couleur des légendes et radios sur une question NPS.
/*Les chiffres*/
th.sg-cell.sg-cell-1.sg-cell-data.sg-first-cell{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-2.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-3.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-4.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-5.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-6.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-7.sg-cell-data{color:#E8363D;font-weight:bold;}
th.sg-cell.sg-cell-8.sg-cell-data{color:#F7C60A;font-weight:bold;}
th.sg-cell.sg-cell-9.sg-cell-data{color:#F7C60A;font-weight:bold;}
th.sg-cell.sg-cell-10.sg-cell-data{color:#37B466;font-weight:bold;}
th.sg-cell.sg-cell-11.sg-cell-data{color:#37B466;font-weight:bold;}
/*les radios*/
td.sg-cell.sg-cell-1.sg-cell-data.sg-first-cell{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-2.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-3.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-4.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-5.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-6.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-7.sg-cell-data{color:#E8363D;font-weight:bold;}
td.sg-cell.sg-cell-8.sg-cell-data{color:#F7C60A;font-weight:bold;}
td.sg-cell.sg-cell-9.sg-cell-data{color:#F7C60A;font-weight:bold;}
td.sg-cell.sg-cell-10.sg-cell-data{color:#37B466;font-weight:bold;}
td.sg-cell.sg-cell-11.sg-cell-data{color:#37B466;font-weight:bold;}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.