Easy-to-use CSS tips for your Qualifio campaigns

CSS

What is CSS?

CSS is a style-language that lets you modify fonts, colors, margins, height, width, background images and a lot of other stuff. But it’s also VERY scary for a lot of people. We’re here to help. We won’t make you a CSS expert in a blog article but you’ll see that it’s quite easy to add a few short lines of codes to impress and pimp your campaign. Here are a few simple tips you can easily use in your own campaigns :

Where should I insert my CSS code?

In the ‘Look and feel’ step of your campaign, click on ‘Change Look and Feel’, then go the the ‘CSS’ tab.

A few pieces of code

You can directly copy/paste the following codes in Qualifio. You can of course change the values, the color codes, etc. to customize your campaigns while respecting your graphic specifications. The legends of the screenshot here-under can be used to understand what the codes are directly modifying.

In each codes, you’ll find what we call comments :/ * Comment */. They can be included and copy pasted in Qualifio – they don’t have any impact on the code but just help you understand on what element you’re currently working.

1. Change the toolbar’s color

#responsive_tools {
/*Change toolbar’s color*/
background-color: #560100;
}

2. Add rounded edges and a drop shadow to you game zone

#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. Change the size, color & underline your subtitles

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. Change the look and feel of your buttons

.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. Hide an item

(For example : to hide the « rules » button)

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

6. Use your own fonts

How to upload your own fonts in your Qualifio account

No excuses anymore – let’s create crazy campaigns!

qualifio

What is Qualifio?

Qualifio is the leading platform for interactive marketing and data collection. It allows you to easily create and publish viral content (quizzes, contests, surveys and 50+ other formats) to all your channels.Learn more