Personnalisation des jeux ​

L'éditeur de Clickncom vous permet de modifier de nombreux styles des éléments de vos pages. Cependant, tout n'est pas possible via l'éditeur. Clickncom a une option permettant de charger dans votre jeu une feuille de style. Avec cette option, vous pourrez faire toutes les modifications que vous souhaitez (à condition de maitriser html et css)

Modifier le style d'un élément ​

Si vous avez l'option css activée sur votre jeu concours :

• une icone à droite de la barre d'outil vous permet d'accéder à la modification de la feuille de style (par défaut cette feuille de style est vide, et ce que vous mettrez dedans sera de nouvelles directives ajoutées au jeu concours)
• dans l'éditeur qui s'ouvre suite au click sur un élément (partie gauche de l'éditeur), tout en bas, se trouve un sélecteur css permettant de cibler cet élément spécifique.

Copiez le sélecteur de l'élément souhaité et ajoutez votre style personnalisé.

Chaque page et chaque élément a une ou plusieurs classe spécifique permettant de les cibler. Des classes correspondant aux types de pages et aux types d'éléments sont également présentes afin de pouvoir les cibler

Exemples ​

Ajustement des textes ​

Ajout d'un padding sur les textes du jeu pour éviter que le texte ne soit trop collé aux bords sur mobile

.cnc.page p {
  padding-left: 10px;
  padding-right: 10px;
}

Quiz ​

/* Ajout de marge */
.quiz {
  margin: auto 7px !important;
}

/* Personnalisation de la couleur de la réponse du participant */
.quiz .block.selected:not(.wrong):not(.correct) {
  background-color: #f4a932;
}

/* Hauteur des blocs de réponses */
.quiz .block,
.quiz .block-image {
  padding: 5px 6px 5px 6px !important;
  min-height: auto !important;
}

Animation du logo ​

Redimensionnement et rotation du logo

@keyframes scalingdh {
  from {
    transform: rotate(-5deg) scale(0.5);
  }
  to {
    transform: rotate(5deg) scale(1.2);
  }
}

/* Application de l'animation sur l'élément Logo */
.page-welcome-1 .element-logo img {
  animation: scalingdh 1s infinite alternate;
}

Arrivée du titre par la gauche ou la droite ​

@keyframes slidefromleft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes slidefromright {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
/* Application sur l'élément text de l'arrivée par la gauche */
.page-welcome-1 .element-text {
  animation: slidefromleft 2s;
  animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
/* Application sur l'élément description de l'arrivée par la droite */
.page-welcome-1 .element-description {
  animation: slidefromright 2s;
  animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
}