Astuces CSS pour améliorer le rendu de vos campagnes Qualifio

CSS est un langage de style qui permet de modifier l’affichage des polices, des couleurs, des marges, la hauteur, la largeur, les images d’arrière-plan, les positionnements d’éléments et bien d’autres choses. Sans être expert en CSS il est très facile de modifier certains éléments de vos concours Qualifio pour les personnaliser. Voici quelques astuces simples que vous pouvez utiliser dans vos concours:

Où écrire son code CSS?

Dans l’étape « Apparence » de votre campagne > « Modifier l’Apparence » > CSS.

Quelques Astuces

Les codes suivant peuvent être copiés et collés directement dans Qualifio. Vous pouvez changer les valeurs, les codes couleurs, etc. pour personnaliser vos concours en respectant au maximum votre charte. Référez vous à la légende de la capture d’écran ci-dessous pour comprendre ce que les codes modifient. A l’intérieur de chaque code sont inscrit des commentaires (exemple : /* Commentaire */). Ces commentaires peuvent être copié avec le code et vous permettront de savoir ce à quoi correspond chaque ligne de CSS.

 

1. Modifier la couleur de la Tool bar :

#responsive_tools {
/*Change color from the toolbar*/
background-color: #560100;
}

2. Ajouter des bords arrondis et une ombre portée à votre zone de jeu

#qualifioBox {
/*Add rounded edges to the game zone*/
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;/*Add a shadow to the game zone*/
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-o-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

3. Modifier la taille, la couleur et ajouter un soulignement aux sous-titres

h2.campaign_step {
/*Increase font size*/
font-size: 20px;/*Change the text color*/
color: #EDD100;/*Add dashes under the subtitle*/
border-bottom: 3px dotted;
padding-bottom: 10px;
}

4. Modifier le rendu de vos boutons

.bouton {
/*Increase font size*/
font-size: 17px;/*Make a gradient*/
background: rgb(237,209,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,209,0,1) 0%, rgba(188,163,0,1) 94%, rgba(237,209,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,209,0,1)), color-stop(94%,rgba(188,163,0,1)), color-stop(100%,rgba(237,209,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(237,209,0,1) 0%,rgba(188,163,0,1) 94%,rgba(237,209,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(237,209,0,1) 0%,rgba(188,163,0,1) 94%,rgba(237,209,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(237,209,0,1) 0%,rgba(188,163,0,1) 94%,rgba(237,209,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(237,209,0,1) 0%,rgba(188,163,0,1) 94%,rgba(237,209,0,1) 100%); /* W3C *//*border color*/
border-color: #9b8600;/*Change the text color*/
color: #6d5d00;/*text shadow light*/
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.bouton:hover {
/*Increase font size*/
font-size: 17px;/*Make a gradient*/
background: rgb(216,44,39); /* Old browsers */
background: -moz-linear-gradient(top, rgba(216,44,39,1) 0%, rgba(158,32,28,1) 94%, rgba(216,44,39,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,44,39,1)), color-stop(94%,rgba(158,32,28,1)), color-stop(100%,rgba(216,44,39,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(216,44,39,1) 0%,rgba(158,32,28,1) 94%,rgba(216,44,39,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(216,44,39,1) 0%,rgba(158,32,28,1) 94%,rgba(216,44,39,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(216,44,39,1) 0%,rgba(158,32,28,1) 94%,rgba(216,44,39,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(216,44,39,1) 0%,rgba(158,32,28,1) 94%,rgba(216,44,39,1) 100%); /* W3C *//*border color*/
border-color: #631311;/*Change the text color*/
color: #ffffff;/*text shadow dark*/
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

5. Supprimer l’affichage d’un élément

(Par exemple, le bouton « Règlement »)

#s_reglement {
/*Hide an item*/
display: none;
}

6. Utiliser une polices de caractères personnelle

Chargez vos propres polices de caractère dans votre compte Qualifio

qualifio

Qu’est-ce que Qualifio ?

Qualifio est la plateforme de référence dans le marketing interactif et la collecte de données. Elle vous permet de créer et de publier facilement des contenus viraux (quiz, jeux-concours, enquêtes et 50+ autres formats) sur tous vos canaux.En savoir plus