CSS Format | XM Community
Solved

CSS Format

  • 14 June 2018
  • 5 replies
  • 223 views
M
I'm trying to use a custom image for the background of my survey.

However, any code that I paste into the 'Custom CSS' editor on the Look and Feel tab doesn't seem to be registering.
When I save the changes to the cSS editor - it simply leaves my survey preview as it originially looked.

I don't appear to be running into the same difficulty when I add java-script to individual questions, or to the header and footer sections.

Is there a particular prefix that I need to begin my code with on the CSS editor for it to be read by the system?
icon

Best answer by mattyb513 10 July 2018, 14:03

View original

5 replies

TomG
Rank
Userlevel 7
Badge +27
It might be helpful if you posted picture of your CSS.
LaurenK
Rank
Userlevel 7
Badge +13
Hey @Mark_R! Do you mind sending over a screenshot of your CSS code so our community members can take a look at it?
mattyb513
Rank
Userlevel 6
Badge +6
There are a few things that could be happening here - one of which could be CORS or other security-type concerns with the image you are using. Check the console to see if it shows any errors regarding the image URL you have provided.

Here is some CSS I use to change the image. This also changes the background of the survey questions to be slightly transparent.

```css
/* Place your CSS here */

#SurveyEngineBody {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3NMGjugWuELWraZ');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.Skin #SkinContent {
background: rgba(255,255,255,.9) !important;
}

.Skin .SkinInner {
background: transparent !important;
}
```

A good way to get around security concerns is to host the image in your Graphics Library of your account and then use that URL instead. You can see that I have done this in this CSS.

Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_20nAcnIybT3rNvT?Q_SurveyVersionID=current&Q_CHL=preview
U
Rank
Userlevel 6
Badge +5
@mattyb513 do you know what I am doing wrong. I am trying to set my background throughout the survey to be the same color. It looks correct when in the Look and Feel panel, but when I actually take the survey the background is defaulting back to white.

``#SurveyEngineBody {
background: url('f4f2f3Z');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.Skin #SkinContent {
background: url('f4f2f3Z');) !important;
}

.Skin .SkinInner {
background: transparent !important;
}``
mattyb513
Rank
Userlevel 6
Badge +6
```background: url('f4f2f3Z');``` needs to be ```background: #f4f2f3Z;```

You should only use the url attribute if you are referring to an image hosted online somewhere and are giving it the actual URL reference to that image.

Leave a Reply


Terms & Conditions