Change Survey Look and Feel based on Location/Brand/Product

You can use a bit of both. Set the settings for the main survey.

Then use CSS accordingly for the questions that are related to other parts of the organization.

You can also change the logo if needed via JavaScript like this:

Thanks for replying Jester. If possible I would only want to do it based on the start of the survey depending on the respondents location. I would prefer to do it using CSS in the look and feel. Are you able to help me with the code I would need to use?

You will need to change a few areas.

Something like this should do the trick. It should be added as part of the HTML in question, and should change the background to a light gray:

<style>
.Skin, #SurveyEngineBody {
background:#CCCCCC!important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.Skin #SkinContent {
background:#CCCCCC!important;
}

.Skin .SkinInner {
background: transparent!important;
}
</style>

Please note that you should be careful not to change the text for the question afterwards without doing it in the HTML, as you otherwise risk losing the additional CSS.

Instead of the background is it possible to change the radio button on multiple choice questions and next/previous button?

Yes it is :)

This changes the radio button color:

.Skin label.SingleAnswer>span::before{

border:2px solid #006600;

}

This changes the previous and next buttons. Both background and text color:

.Skin #Buttons #NextButton {
color: #003366;
background-color: #CC00CC;
}
.Skin #Buttons #PreviousButton {
color: #000099;
background-color: #00FF00;
}

Hello Jesper. 

Thanks for your reply. The CSS code for next and previous work fine. The radio button code did not work for me…

Is it possible to use Embedded Data to control which colour is displayed when the survey starts?

Hi,

Could you send a screen shot of what the question looks like with the radio button? Both in preview and in setup? Then I can maybe help you to get it to work.

As long as you use HTML in a question, and use <style></style> to add the CSS, then it should be possible to use piped text from embedded data. The easiest would be to just have the color code directly in a field (Called “Color” and having “#00CC00” as the value) like this:

.Skin #Buttons #PreviousButton {
color: ${e://Field/Color};
background-color: #00FF00;
}