Changing Banner color without altering primary color | XM Community
Skip to main content
Solved

Changing Banner color without altering primary color

  • December 12, 2019
  • 1 reply
  • 293 views

Forum|alt.badge.img+5
Does anyone know if this can be done with CSS? I want to change my banner color to white without changing my primary color. Normally changing the primary color also changes the banner color. This is the code I am trying currently but it is not working. Skin .skininner { color:#ffffff }

Best answer by IsabelPosada_Voce

Hello @uhrxx005 you have to follow this steps to do that, open a preview of the survey, after that go to the banner and right click on the banner and select "inspect" (the last option), or ctrl+shift+i. It will appear a window on the right side of your screen with the code, change the color of the .Skin #progress bar and copy those lines of the code and paste it on the look and feel- style- css. You have to paste something like this with the color you want. If this works remember to accept my answer to your question! Have a nice day .Skin #ProgressBar tr td:first-child { color: #fff; position: absolute; left: 0; line-height: 18px; border-left: none; width: 100%; padding-top: 4px; padding-left: 4px; }

1 reply

IsabelPosada_Voce
QPN Level 5 ●●●●●
Forum|alt.badge.img+57
  • QPN Level 5 ●●●●●
  • 121 replies
  • Answer
  • December 23, 2019
Hello @uhrxx005 you have to follow this steps to do that, open a preview of the survey, after that go to the banner and right click on the banner and select "inspect" (the last option), or ctrl+shift+i. It will appear a window on the right side of your screen with the code, change the color of the .Skin #progress bar and copy those lines of the code and paste it on the look and feel- style- css. You have to paste something like this with the color you want. If this works remember to accept my answer to your question! Have a nice day .Skin #ProgressBar tr td:first-child { color: #fff; position: absolute; left: 0; line-height: 18px; border-left: none; width: 100%; padding-top: 4px; padding-left: 4px; }