Changing header and background color based on an embedded data | XM Community
Skip to main content

Hello,
I'm curious if there is a way to change both the header and background color of a survey based on an embedded data field. For example:
If Sample = G, show respective banner for G group and a black background
If Sample = H, show respective banner for H group and a blue background
If Sample = I, show respective banner for I group and a white background
I was able to get the headers to show for each group by setting up an embedded field for header URL and piping in HTML under Header in Look and Feel. Is there is a way to include background color with this? My survey currently has a white background for all three group, since white is the default under Look and Feel.
Any help is appreciated.

Hi Diana,
It sounds like this is similar to the issue we had. Our solution below in case of any help.
Like you an embedded data field, but we hosted the CSS for the theme on github.
Below is the code we used, we had to have the logos separately (and hosted on Qualtrics) which may not be necessary in your case.



Hi Steve,
Thank you for the reply. I'm not familiar with CSS and was wondering if you would be able to walk me through the code and what to change?
Thank you!

Hi there, adding the below to the Survey's Header should work to change the background color, where "Color1" is an Embedded Data field that contains a hex code:

Thank you so much, Tom! This worked for me.

Original comment:

Hi there, adding the below to the Survey's Header should work to change the background color, where "Color1" is an Embedded Data field that contains a hex code:

<style>
.Skin, .SkinInner {
background-color: ${e://Field/Color1} !important;
}
</style>

 

Leave a Reply


Terms & Conditions