Example style sheet

From QualtricsWiki

Note - this code is intended to be referenced by individuals looking to creating 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.



/* 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 the 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;
}
/* .ReadableAlt is the alternating row color on questions where it is needed for readability

• .LightBG is an accent color used on several question types.
  
• /
  

.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 {

1. LogoBar {
   

display:block;
}
}

/* Is the alternating row color on questions where it's not needed. */
.Skin .alt {
}
/* Is 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 {
}
/* can be used to set the border color for all the quesions */
.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;
}