Guide
Note: This code is intended to be referenced by individuals looking to create and upload their own style sheets. If you are not familiar with CSS, you will need to have an IT person at your organization examine this sheet to develop a custom template. A custom style sheet can be used by referencing a page you have hosted on the web with the appropriate script, or by pasting sections of the code in the CSS Editor that appears when you click “Add Custom CSS” in the Look and Feel section.
The Page Background
#SurveyEngineBody {
background-color: #8E2800;
}
.Skin #Header {
background: transparent url(examplelogo.png) no-repeat scroll left bottom;
}
.Skin #Footer {
background: transparent url(examplelogo.png) no-repeat scroll left top;
}The Background of the Question Area
.Skin #SkinContent {
background-color: white;
}
Can Customize Width, Font
.SkinInner {
width: 650px;
font-family: Arial, Verdana, sans-serif;
font-size: 10pt;
}
The Logo Bar Background Color
.Skin #LogoBar {
background-color: #ffffff;
}
Use the Following to Add a Custom Logo
html .Skin #Logo {
filter: none;
background-image: none; /* remove the qualtrics logo for ie */
}
html .Skin #Logo {
height: 100px; /* image height here */
background: transparent url(examplelogo.png) no-repeat scroll left top;
}
The Buttons Background Color
.Skin #Buttons {
background-color: transparent;
text-align: right;
}
Progress Bar Color
.Skin .ProgressBarFill {
background: #990000;
}
The Question Text
.Skin .QuestionText {
font-size: 120%;
padding: 3px;
}
Is the Alternating Row Color on Questions Where it is Needed for Readability?
<ul>
<li> .LightBG is an accent color used on several question types.</li>
<li>/</li>
</ul>
.Skin .ReadableAlt,
.Skin .LightBG {
background: #FFFCF2;
}
Rank Order Drag and Drop Hover Color (Mouseover)
.Skin .RO .DND ul li:hover {
background:#E6ECF5 none repeat scroll 0 0;
}
To Make Logo Printable in Qualtrics Survey Skin. Not necessary, but Available if Needed.
@media print {
<ol>
<li>LogoBar {</li>
</ol>
display:block;
}
}
Is the Alternating Row Color on Questions Where it’s Not Needed?
.Skin .alt {
}
Change the Non-Alternating Color (Usually Doesn’t Need to be Touched)
.Skin .reg {
}
Is a Dark Background Color used an Accent in Several Questions?
.Skin .DarkBG {
}
<strong>Can be Used to Set the Border Color for all the Questions</strong>
.Skin .BorderColor {
}
Example of “Boxed Look.” Uncomment Below
.Skin .BorderColor {
border-color: #B55d3f;
}
.Skin .QuestionText{
padding:10px;
border-width: 0 0 1px 0;
border-style: solid;
background: #FFFCF2;
}
.Skin .QuestionOuter .InnerInner {
border-width: 1px;
border-style: solid;
}
.Skin .alt {
background: lightgray;
}
.Skin .ReadableAlt {
background: gray;
}
.Skin .LightBG {
background: yellow;
.Skin .DarkBG {
color: white;
background: black;
}
.Skin .BorderColor {
border-color: red;
}