Set color in CSS editor depending on primary / secondary colors | XM Community
Skip to main content

Hi! Is there a way to set the color of an element in de CSS editor to change according to the primary/secondary colors chosen in the Look&Feel?

For example, I want the previous/next buttons to be the primary color, then change to the secondary when hovering. If I leave the color empty, the platform will take the secondary color as default. So now I just inserted the hex code there, but I want to avoid changing it every time.

/* Style next & previous buttons */
.Skin #Buttons #NextButton, 
.Skin #Buttons #PreviousButton {
    text-align: center !important;
    padding: 0px !important;
    min-width: 100px !important;
    height: 50px !important;
    border-radius: 25px !important;
    font-weight: bold;
    font-size: 16px !important;
}
#NextButton,
#PreviousButton {
    background-color: #0E55B3 !important; /* PRIMARY */
    color: white !important;
}
#NextButton:hover,
#NextButton.q-checked,
#NextButton:focus,
#PreviousButton:hover,
#PreviousButton.q-checked,
#PreviousButton:focus {
    background-color: #FBA53C !important;
    color: #192743 !important; /* SECONDARY */
}

 

For anyone interested, I couldn't make a JS in the header work to fetch the primary and secondary colours in the look and feel, but I found a workable and easy alternative.

The goal is to easily adjust the main colours of for a survey with a lot of CSS styling. It's useful when your main survey colours change frequently.

Put this on top of your CSS code:

/* Main colors for this survey */
:root {
    --main-color-1: #30B3AF; /* same as PRIMARY (buttons) */
    --main-color-2: #B3DCD8; /* same as SECONDARY (headers) */
    --main-color-3: #FFDC64; /* TERTIARY (hover) */
}

Then use var(--main-color-1) to call the colour in the rest of the script. For example:

#NextButton,
#PreviousButton {
    background-color: var(--main-color-1) !important;
    color: white !important;
}
#NextButton:hover,
#NextButton.q-checked,
#NextButton:focus,
#PreviousButton:hover,
#PreviousButton.q-checked,
#PreviousButton:focus {
    background-color: var(--main-color-3) !important;
    color: #192743 !important;
}

 

@JohannesCE I used to stumble into a pretty similar problem. My client want a custom theme that they can tweak without any coding knowledge and I can’t find a way to get data from the Look & Feel editor.
Can you share with me how did you try to fetch the colors in Look & Feel?

Hi @dxconnamnguyen, I think that the CSS code I provided is the easiest way. If you put them all the way on top with some description it's workable. It also has the advantage that you can use more than two theme colors (I use 5).

It's in theory possible to get the primary and secondary colors from the Look & Feel editor, but the problem is there is no place to put the JS in that page. 

When I inspect the element, the primary and secondary colors appear to be set using inline styles on elements with classes ._1vrIU. So the JS schold be something like:

<script type="text/javascript">
Qualtrics.SurveyEngine.addOnReady(function() {
    // Get primary and secondary colors from the provided HTML structure
    var primaryColor = jQuery('#lfe-primary-color ._1vrIU').css('background-color');
    var secondaryColor = jQuery('#lfe-secondary-color ._1vrIU').css('background-color');

    // Set the colors as global CSS variables
    document.documentElement.style.setProperty('--global-primary-color', primaryColor);
    document.documentElement.style.setProperty('--global-secondary-color', secondaryColor);
});
</script>

But if you use it in the header, the elements won't be there so it won't work. 

If anyone finds a way, I'd like to know!

Leave a Reply


Terms & Conditions