Using different Survey Themes depending on embedded data variable

You can change the theme if you know CSS and jQuery.

Based on embedded data value, you will have to adjust the styling of the theme.

Follow this discussion to learn more about custom CSS:
https://www.qualtrics.com/community/discussion/1878/custom-css

Florian

Did you find a solution to this as we are faced with the same requirement?

> @Mohammedali_Rajapakar_Ugam said:
> You can change the theme if you know CSS and jQuery.
>
> Based on embedded data value, you will have to adjust the styling of the theme.
>
> Follow this discussion to learn more about custom CSS:
> https://www.qualtrics.com/community/discussion/1878/custom-css

I have a similar project and tried to change the theme based on jQuery. I added the jQuery to the 'Header' section in Look and Feel.

<script>
if ('${e://Field/BrandName}'=='A') {

jQuery('.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton').css({
'background' : '#EB5A00'
});

jQuery('.Skin #Buttons #NextButton:focus, .Skin #Buttons #PreviousButton:focus').css({
'background' : '#EB5A00',
'outline' : '0'
});

jQuery('.Skin #Buttons #NextButton:hover, .Skin #Buttons #PreviousButton:hover').css({
'background' : '#EB5A00',
'border-color' : '#EB5A00'
});

jQuery('.Skin #Buttons #NextButton:active, .Skin #Buttons #PreviousButton:active').css({
'background' : '#EB5A00',
'border-color' : '#EB5A00'
});

jQuery('.Skin label.q-checkbox, .Skin label.q-radio').css({
'border' : '1px solid #EB5A00'
});

jQuery('.Skin label.q-radio.q-checked').css({
'background-color' : '#EB5A00'
});

jQuery('.Skin label.q-radio.q-checked.q-focused').css({
'background-color' : '#EB5A00'
});

jQuery('.Skin label.q-checkbox.q-checked').css({
'background-color' : '#EB5A00'
});

jQuery('.Skin label.q-checkbox.q-checked.q-focused').css({
'background-color' : '#EB5A00'
});

jQuery('.Skin label.MultipleAnswer.q-checked.q-focused,.Skin label.SingleAnswer.q-checked.q-focused').css({
'background' : '#EB5A00'
});

jQuery('.Skin label.MultipleAnswer.q-checked,.Skin label.SingleAnswer.q-checked').css({
'background' : '#EB5A00',
'border-color' : '#186b8f',
'color' : '#fff'
});
}
</script>

Similarly I created other cases for other brands. My code seems to identify the brand and apply the correct case. However, in the correct case, the code doesn't work when an answer is selected or changed. (Most probably the q-checked and / q-focused doesn't seem to work). When I navigated to the back page and click on 'Next', I see that my custom theme applied but when I try to change the answer, the custom theme remains.

!



I used Minimal Blue theme as my base and in the image, I clicked 'Yes' first and the default theme applied (my code didn't seem to work). However when I navigated back and clicked 'Next', my theme seemed to have applied but when I try to change my option, the new option is selected using the default theme and my custom jQuery theme remains (not getting unselected).

It seems like the jQuery works only on page load and stops working in the page until the next or back button is pressed (or maybe page is refreshed). It doesn't work on clicks/hover.

Is there any way to make this work? Thank you!