Centre d'assistance

Survey CSS snippets

Pas de commentaire

Use your own CSS to customize the look of your surveys to match your branding and design needs. By adding custom CSS, you have total control over every aspect of the survey style. You can add you CSS on the survey appearance page which you can find in each survey via Settings > Appearance.

The custom CSS can also be saved in themes and reused across multiple surveys.

The example CSS snippets below can be used directly in your survey, or you can use them as a starting point for your own cool survey designs. If you want to have a specific design but you don’t have any knowledge of CSS, or do not have the time, you can contact our design team to provide you with a price quote for a custom design.

More info on CSS can be found here: https://www.w3schools.com/css/

Survey CSS examples

You can use custom fonts in your CheckMarket survey by using Google Webfonts.

  • Go to https://fonts.google.com/  and find the font that you want to use.
  • Select the font by clicking the + sign, next a black box will appear on the bottom of the page.
  • Click the black box, to open the drawer.
  • Copy the CSS code @import url(‘https://fon….
  • Paste the @import code on the first line, before all other CSS code in your survey

In the example below we used the Raleway webfont

@import url(‘https://fonts.googleapis.com/css?family=Raleway&display=swap’);

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body,
h1,
h2,
h3,
.heading-table,
.greeting,
button,
.ladda-button,
th.question,
td.question,
table,
.nps input,
input,
input,
textarea,
select,
button,
.matrixTable .sub-question,
.radio label,
.checkbox label,
.ratingscale .innerCell {
font-family: 'Raleway', sans-serif;}

The CSS snippet below will hide the radio buttons and/or checkboxes in your survey.

/*This hides the radio button*/
.radio input[type="radio"]{
display: none;
}

/*This hides the checkbox*/
.checkbox input[type="checkbox"]{
display: none;
}

The CSS snippet below will modify the text of your survey’s “next” button. The same principle can be used to change the text of the ‘Previous’ or ‘Finish’ button.

We added some comments in the snippet that explains how to target specific survey languages in your survey.

/* Remove the current displayed text in each language */

button.button.ladda-button.nextButton {
    color: transparent;
}

/* Display a new text on the button, the code below, targets every available language of the survey, read the info below, if you want to target a specific survey language*/

button.button.ladda-button.nextButton:after {
    content: 'Bevestig';
    color: #fff;
    padding-right: 65px;
    font-size: large;
}

/* INFO */

/*target text button in English - use the css selector below to target specific language, if not used, the text will be the same in each language :lang ([language code])> Depending the text that needs to be displayed, play*/

/*around with the padding, to assure the text is aligned properly in the middle of the button*/

/*END INFO */

:lang(en)>button.button.ladda-button.nextButton:after {
    content: 'Confirm';
    color: #fff;
    padding-right: 50px;
    font-size: large;
}

/* target button on specific survey page*/

/*use : .page-xx */

/*The example below shows you how to target the next button on page 8 of your survey. */

/*Keep in mind to update the css if pages are added in your survey (this way you can target any element on a specific page:.page-8 button.button.ladda-button.nextButton { color: transparent;}*/

The CSS snippet below will allow you to change the text of your surveys finish button. In the example below, we replaced the Finish text with Confirm your vote

button.button.ladda-button.finishButton.nextButton:after {
    content: 'Confirm your registration';
    color: black;
    margin-left: -40px;
}

button.button.ladda-button.finishButton.nextButton {
    content: '';
    color: transparent;
}
.btn-group-lg>.btn,
.btn-lg {
    color: transparent !important;
}

button.button.startButton.btn-lg:after {
    content: 'Start';
    color: #FFF;
    padding-right: 60px;
}

/* INFO */

/*target text button in English - use the css selector below to target specific language, if not used, the text will be the same in each language :lang ([language code])> Depending the text that needs to be displayed, play*/

:lang(nl)>button.button.startButton.btn-lg:after {
    content: 'Begin';
    color: #FFF;
    padding-right: 100px;
}
/*END INFO */

The CSS snipped shows that you can change the Slider’s handle by another icon.

The icon we used in this example, is a heart icon.

  1. Upload the image that you want to use in your media library.
  2. Resize the icon in your media library using the resize tool:
    Resize file in media library
  3. Double click the image to get the full image URL.
.rangeslider__handle {
    background-image: url(URL TO FILE IN MEDIA LIBRARY ) !important;
    background-size: 100% !important;
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .1));
    -moz-box-shadow: 0;
    -webkit-box-shadow: 0;
    box-shadow: none;
    -moz-border-radius: 50%;
    -webkit-border-radius: 0%;
    border-radius: 0;
}

.rangeslider__horizontal {
    height: 4px;
    width: 100%;
}

.rangeslider {
    background: #000000;
    position: relative;
    height: 3px;
}

.rangeslider__filled {
    background: #000000;
    height: 10px !important;
}

.rangeslider__fill {
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}

.rangeslider__handle {
    background: none;
    border: none;
    top: -15px !important;
}

Download the image icon used in this example

Tip: resize the image to 32 x 32 px

Show a full width progress bar over the full width of your survey.

The color of the progress bar can be set in the Progress bar tab of your surveys appearance.

/*Progressbar*/

.progressWrapper {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
}

.progress {
    width: 100%;
    overflow: hidden;
    height: 10px;
    margin-top: 0;
}

.progress-text {
    display: none;
}

By default, de selected banner will be displayed at the width in pixels of your survey. The CSS snippet will show the banner across the entire width and top of the survey

/*add full width banner with logo to your survey*/
/*the banner image can be set in the survey appearance > Banner tab*/

.banner div.center,
.banner h1.center {
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    align-content: center;
    margin: 0 auto;
    background: #000;
    padding-top: 20px
}

.banner div.center img,
.banner h1.center img {
    padding-bottom: 10px
}

.pageWrapper {
    /* Margin to ensure that the survey is not under the banner */
    margin-top: 5rem;
    /* Margin to ensure that the survey is not under the footer */
    margin-bottom: 5rem;
}
/*add full widht footer with logo to your survey*/

.footer:after {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 4rem;
    background-color: #000;
    left: 0;
    background-image: url(URL TO LOGO MEDIA LIBRARY);
    background-repeat: no-repeat;
    background-size: 4rem;
    background-position: center;
    content: '';
    color: transparent
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.