Changing header and background color based on an embedded data | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Changing header and background color based on an embedded data

  • Jul 21, 2022 11:17 PM UTC
  • 5 replies
  • 858 views
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:

View original

5 replies

Level 1 ●
Forum|alt.badge.img+2
  • SteveP
  • Level 1 ●
  • Jul 26, 2022 3:54 PM UTC

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.



Forum|alt.badge.img
  • DianaP
  • Author
  • Jul 26, 2022 10:23 PM UTC

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
  • Jul 28, 2022 1:17 PM UTC

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:

Forum|alt.badge.img
  • DianaP
  • Author
  • Jul 28, 2022 6:09 PM UTC

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

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Apr 8, 2024 8:18 PM UTC

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