Changing header and background color based on an embedded data | XM Community
Solved

Changing header and background color based on an embedded data

  • 22 July 2022
  • 5 replies
  • 422 views
D
Badge

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.

icon

Best answer by Tom_1842 28 July 2022, 15:17

View original

5 replies

S
Rank
Badge +2

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.



D
Badge

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!

Tom_1842
Rank
Userlevel 7
Badge +27

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:

D
Badge

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

Tom_1842
Rank
Userlevel 7
Badge +27

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