Quelques astuces CSS pour améliorer le design de vos campagnes Qualifio

Le langage 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. Le CSS est donc un code qui permet de modifier le design de vos campagnes marketing Qualifio.

Dans cet article, nous vous présentons quelques astuces, pour lesquelles vous n’avez pas besoin d’être un expert en CSS, qui vont vous permettre de personnaliser vos campagnes Qualifio.

Où écrire son code CSS?

Pour pouvoir modifier le design de vos campagnes grâce aux codes CSS, vous devez vous rendre sur votre campagne Qualifio, puis :

  • Aller dans l’étape « Apparence » de votre campagne
  • Cliquer sur « Modifier l’Apparence »
  • Sélectionner « CSS »

Quelques Astuces pour modifier le design de vos campagnes grâce aux codes CSS

Ci-dessous, nous allons vous présenter plusieurs codes CSS. Ces codes peuvent être copiés et collés directement dans votre campagne Qualifio.

Pour personnaliser le design, vous pouvez changer les valeurs, les codes couleurs, etc, présents dans les codes afin de respecter la charte graphique de votre entreprise.

A l’intérieur de chaque code sont inscrit des commentaires (exemple : /* Commentaire */). Ces commentaires peuvent être copiés 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

 

Vous souhaitez plus d’astuces pour améliorer le design de vos campagnes marketing Qualifio ? N’hésitez pas à consulter cet article

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