Add white background to question block | XM Community
Solved

Add white background to question block

M
Hello everyone,

I have a question regarding the layout. For the entire survey, I added a picture as background. Now I would like to add a white background to each question block so that the question clearly sets itself apart from the background picture.

In the end, it should look like this: !

Can anyone help with a custom code?

Many thanks in advance!
icon

Best answer by Anonymous 4 October 2018, 11:39

View original

12 replies

A
Hello @Melissa

Add following code to custom css

.Skin #SkinContent {
margin: 0 auto;
background-color: white;
}
M
Thanks so much!
J
Could you share how you add a background picture for the entire survey?
Thanks!
A
> @JBM said:
> Could you share how you add a background picture for the entire survey?
> Thanks!

Paste the following css in the "Look and Feel" -> "Advanced" -> "Add custom css"

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

.Skin #SkinContent {
background:none;
}

.Skin .SkinInner {
background: transparent !important;
}
J
Thank you! And is it possible to add a backrgound pic to one block of questions only?
A
> @JBM said:
> Thank you! And is it possible to add a backrgound pic to one block of questions only?

Add the following code in the each question of block Or if you have multiple question on one page then paste the following code on only one question in js(onReady)

jQuery("#SurveyEngineBody").css({"background":"url('YOUR_IMAGE_URL')",
"background-size": "cover",
"background-repeat": "no-repeat",
" background-position": "center center"});

jQuery(".Skin #SkinContent").css({
"background":"none"
});

jQuery(".Skin .SkinInner").css("cssText","background : transparent !important");
J
> @Shashi said:
> > @JBM said:
> > Thank you! And is it possible to add a backrgound pic to one block of questions only?
>
> Add the following code in the each question of block Or if you have multiple question on one page then paste the following code on only one question in js(onReady)
>
> jQuery("#SurveyEngineBody").css({"background":"url('YOUR_IMAGE_URL')",
> "background-size": "cover",
> "background-repeat": "no-repeat",
> " background-position": "center center"});
>
> jQuery(".Skin #SkinContent").css({
> "background":"none"
> });
>
> jQuery(".Skin .SkinInner").css("cssText","background : transparent !important");

It doesn't seem to work... I am adding the code on the HTML box of the question. Here's what it looks like:

!
A
Hey @JBM

Follow this link and add in onReady function
J
> @Shashi said:
> Hey @JBM
>
> Follow this link and add in onReady function

Ok it worked! 😀 But now we can't see the text on top of the pic:

!

Any solution to this? Maybe adding a white box to the question?
U
Rank
Userlevel 6
Badge +5
@Shashi , is there anyway to make the white box slightly taller and wider? I used the code you posted above, but now the white box stops right at the edge of the question which doesn't look right. So the corner of the next button meets up with the bottom right corner of the white box. I would like there to be some added white space between the NEXT button and where the white box ends.
R
Per Shashi's guidance, I added the code (below) to the custom CSS. However, the text of the questions is not black. The only way I have found to change the color is limited to the Foreground Contrast, where high results in white text in a white box, and low contrast results in grey text in a white box.

code added
.Skin #SkinContent {
margin: 0 auto;
background-color: white;
}
A
Hi! How do I get the question container for just one question to be transparent and keep the remainder of the survey to have a white question container? I’ve managed to get them all to have a white container using “Look and Feel” but have no idea how to get just one question to have a transparent question container.

Leave a Reply


Terms & Conditions