Customizing the Colors Used in Your Widget

When our widget displays on your website it will use a pre-defined color scheme for most of it's elements. Some elements, such as background color and text color will be inherited from the current background color and text color that is specified on your website in the section our widget appears.

#Forcing Custom Colors for All Widgets on Your Site

Our default colors for elements such as the gauge poll may not suit your individual website design. It is possible to customize nearly every aspect of your poll widget. Currently we only support doing this by adding CSS, however we hope to add full customization support in the editor soon. To vote for features and upcoming development see our roadmap.

Writing and altering CSS is relatively simple to do, however you may need a developer to help you with this.

Below is an example of a gauge poll widget and it's CTA ('call to action') with a custom color theme:

In order do change these colors you need to add some CSS to your website that targets the .klixEmbed CSS class.

Ideally you should add this CSS to your existing website stylesheet, or to the head of your website template. It is also possible to just paste it directly above your embed code, just before the opening <div class="klixEmbed" tag.

Here is the CSS use for the example above with /* comments */ to explain the various CSS classes and what they do.

#Example Custom Color CSS

<style>
    /*styles affecting the widget as a whole*/
    .klixEmbed { 
        padding: 5px; 
        color: white; /* font color */
        background-color:  rgb(36, 41, 51);
    } 

    /*all widget links*/
    .klixEmbed a {              
        color: white; 
    }

    /*color of animated rectangles next to Live Poll */
    .klixEmbed .liveAnim rect {        
        fill: orange !important;
    }

    /*the draggable circle*/
    .klixEmbed .draggableCircle circle {
        /*the pulsing outer edge of the draggable circle*/
        stroke: orange !important;
        stroke-opacity: 0.9 !important;
        stroke-width: 4;
        /*the color of the draggable circle*/
        fill: rgb(102, 26, 230) !important;
    }

    /*the icon within the draggable circle*/
    .klixEmbed .draggableCircle svg {
        fill: white !important;
    }

    /*the semicircular path of the draggable circle*/
    .klixEmbed .gaugePath {
        stroke: rgb(166, 173, 187) !important;
    }

    /*the arrows that appear above an un-answered poll*/
    .klixEmbed .arrows {
        fill: orange !important;
        stroke: orange !important;
    }

    /*the gauge needle*/
    .klixEmbed .needle {
        fill: orange !important;
    }

    /*the circle at the base of the needle*/
    .klixEmbed .needleCircle circle {
        fill: rgb(102, 26, 230) !important;
    }
    /*the icon within the circle at the base of the needle*/
    .klixEmbed .needleCircle svg {
        stroke: white !important;
        fill: white !important;
    }

    /*the cta overlay*/
    .klixEmbed .overlay {
        background-color:  rgb(36, 41, 51) !important;
    }

    /*the button within the cta overlay*/
    .klixEmbed .overlay .cta_link {
        background-color:  rgb(102, 26, 230) !important;
    }
</style>

#Forcing Custom Colors on a Single Widget Instance Using CSS

In order to tweak the colors of a specific widget, you need to first give it a unique id and then target that id using CSS.

Alter your embed code and add a html id element with a name of your choosing to the <div> tag. i.e.

Change: <div class="klixEmbed"

To: <div id="klixEmbed1" class="klixEmbed"

Then, ensure any CSS rules you have written are changed to target that specific instance rather than all embeds. You can do this by beginning your rule with your identifier, i.e.

<style>
    #klixEmbed1 {  
        padding: 5px;                      
        color: white; 
        background-color:  rgb(36, 41, 51);
    }            
    #klixEmbed1 a {
        color: white; 
    }
</style>

Notice how .klixEmbed (targets any klixEmbed class)... has changed to #klixEmbed1 (targets just the element with id #klixEmbed1).

#Dark and Light Theme Support

Because we inherit background color and text color from your website, this means our widget will automatically switch from dark to light mode based on your existing website styles.

In the following examples the poll widget has customized the colors for some of the main elements using CSS (similar to those above), but inherits it's text color and background color from the existing website CSS.

This means switching to dark to light mode on the website, automatically switches the poll colors from dark to light also.