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

Changing header and background color based on an embedded data

  • July 21, 2022
  • 5 replies
  • 770 views
D
Forum|alt.badge.img

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.

Best answer by Tom_1842

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:

5 replies

S
Level 1 ●
Forum|alt.badge.img+2
  • SteveP
  • Level 1 ●
  • July 26, 2022

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
Forum|alt.badge.img
  • DianaP
  • Author
  • July 26, 2022

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
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • July 28, 2022

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
Forum|alt.badge.img
  • DianaP
  • Author
  • July 28, 2022

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

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • April 8, 2024

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>

 

    Terms & ConditionsAccessibility statement