Basics of CSS in bucket.io - Background Transparent

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>
    • Related Articles

    • Basics of CSS in bucket.io - Content box

      Advanced customization is a feature located at the Design Page, recommended for users with advanced developing skills since it is all about writing code, however if you are feeling adventurous rest assured you can reset it to the original format. ...
    • Basics of CSS in bucket.io - Buttons

      Advanced customization is a feature located at the Design Page, recommended for users with advanced developing skills since it is all about writing code, however if you are feeling adventurous rest assured you can reset it to the original format. ...
    • Basics of CSS in bucket.io - progress bar

      Advanced customization is a feature located at the Design Page, recommended for users with advanced developing skills. Here are some basic tips to change the design aspect of your funnel (if you are having problems seeing pictures in this article, ...
    • Basics of CSS in bucket.io - Text Fields

      Advanced customization is a feature located in the Design section, and is recommended for users with advanced developing skills because it involves understanding and writing code. However, for the adventurous types, it's helpful to know that the ...
    • Basics of CSS in bucket.io - Text Color

      Advanced customization is a feature located at the Design section, and is recommended for users with advanced developing skills, since it requires writing code. However, if you are feeling adventurous and want to give it a shot, please know that you ...