Basics of CSS in bucket.io - Background Transparent
Advanced customization is a feature located at the Design Page, recommended for users with advanced developing skills since it is all about writing code. If you are feeling adventurous, rest assured that you can reset it to the original format. Here are some basic tips to change the design aspect of your funnel (if you are having problems seeing pictures in this article, click any and they will expand).
Background Transparent
Bucket.io embeddable quizzes behave as pop-ups that cover the main page where the quiz is being embedded. Therefore, we present a solution that might help to make the background transparent and highlight the modal with the questions.
Step 1: Advance Customization
Add the following code in the Advanced Customization of the quiz:
body{background-color: transparent;}
html{background-color: transparent;}
.modalBucket {
background-color: transparent !important;
}
Step 2: Website
In the website just below where the embed code generated by bucket.io was entered, please add this line of code:
<style>
.modal-content-bucket{
background-color: transparent !important;
}
</style>