Did you know that it's possible to customize the Poll Result slides to feature a background graphic? Here are 3 examples:


Example #1



Example #2



Example #3



This can be accomplished by including a few extra lines of CSS that get pasted into the Branding & Custom CSS page. Here's how.


INSTRUCTIONS


Skill Level Involved: Moderate to Advanced


Before you start: You'll need a URL to the background image that you'd like to use. It needs to be accessible via an 'https' link (not 'http'). We recommend that you download the background image and then upload it into your app via 'Upload File Assets' (learn how to upload images into your app).


Next, you'll need to decide whether to customize the 'Light Background' color/theme or the 'Dark Background' color/theme. When you create poll questions, they default to the 'Light Background' color/theme. To learn how to switch your slides to a different theme, see our article on customizing poll behavior






Note: If you like "Example #3" above, that sample used a customized Dark Background theme.



SAMPLE CSS FOR CUSTOMIZING THE LIGHT BACKGROUND THEME:


.slide-light {
    background: #fff;
background-image: url("https://d3r1vvs66lg0fx.cloudfront.net/app-5773/825773007707857ffe93c89d183c777d.jpg");
}
.slide-light #slide h1 {
    color: #fff;
    font-family: verdana;
}
.bar-chart {
    font-family: verdana;
}
.slide-light .bar-chart td {
    background: #fff;
    color: #111;
}



SAMPLE CSS FOR CUSTOMIZING THE DARK BACKGROUND THEME:

.slide-dark {
    background: #fff;
background-image: url("https://d3r1vvs66lg0fx.cloudfront.net/app-5773/825773007707857ffe93c89d183c777d.jpg");
}
.slide-dark #slide h1 {
    color: #fff;
    font-family: verdana;
}
.bar-chart {
    font-family: verdana;
}
.slide-dark .bar-chart td {
    background: #fff;
    color: #111;
}



Choose your preferred CSS above and copy/paste it into the Custom CSS box.


To make changes to your CSS, make sure you are signed in as an Admin.

  • Go into your Admin settings
  • Under App Administration, click 'Branding & Custom CSS'
  • Scroll down to the first yellow box and type in your Custom CSS (see our basic guide here for more info)
  • Click Save at the bottom of the page and review your changes


IMPORTANT: For both examples above, the 'background-image' that is listed is a sample image file. Replace that long URL with your desired URL being careful to maintain the URL inside of the quotes " ".