Qualtrics

Project Details

URL: https://fitchgroup.eu.qualtrics.com/Q/ThemesSection
Bitbucket Repository: https://bitbucket.fitchratings.com/projects/FGMAR/repos/prototypes/browse/docroot/qualtrics

Requirements

1. CSS themed for the brand
2. PNG logo
3. Favicon

Creating / Updating a new theme

Creating a theme consists of six steps.

NOTE: When creating a new theme create a new CSS file in the repository and name it the same as the theme using lowercase and - instead of spaces.

1. Name

This is the theme name that is shown to the survey authors

2. General

This contains options for the header and footer text and the position on the progress bar either shown at the top or bottom.

Default options
Header: empty
Footer: empty
Progress Bar: Default

3. Style

Primary Color: #000000
Secondary Color: #000000
Font: Arial
Question Text: -
Answer Text: -
Foreground Contrast: High
Question Spacing: -
Multiple choice style: Yes
NPS style: No
Custom CSS:

@charset "UTF-8";
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
@import "https://fonts.googleapis.com/css?family=Lato:300,700,900,regular,100,300italic,100italic&subset=latin";

html {
  box-sizing: border-box;
}

* {
  margin-top: 0;
  box-sizing: inherit;
  font-family: Lato, arial, sans-serif !important;
  outline: none;
}

*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Lato, arial, sans-serif !important;
  font-size: 1rem;
  line-height: 1.58;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: scroll;
}

.Skin {
  font-family: unset !important;
}
.Skin #Wrapper {
  padding-top: 36px;
  background: #f2f2f2;
}
.Skin #ProgressBar {
  margin-top: 9px;
}
.Skin .SkinInner {
  width: 100%;
  max-width: 840px;
  margin-bottom: 48px;
  padding: 46px 24px 36px;
  background: #ffffff;
  border-radius: 6px;
}
.Skin #LogoContainer {
  padding: 0;
}
#Logo {
  margin-bottom: 24px;
}

.Skin .ProgressBarFill {
  background-color: #cc0033;
}

.Skin fieldset {
  padding: 0;
}

.Skin #Questions,
.Skin .QuestionOuter,
.Skin .MC .SAVR .QuestionBody,
.Skin .MC .MAVR .QuestionBody {
  overflow: visible;
}
.Skin .QuestionOuter .Inner {
  border: 0 none;
}

/* HEADINGS */
.Skin .QuestionOuter {
  padding-bottom: 48px;
}

.Skin .QuestionText {
  margin: 0 0 0.75rem 0;
  padding: 0;
  font-size: 20px;
  font-weight: 300;
}
.Skin .QuestionBody {
  padding-bottom: 0;
  font-size: 14px;
}

/* OPTIONS */
.Skin .ChoiceRow:hover,
.Skin .ChoiceRow:focus,
.Skin .Choice:hover,
.Skin .Choice:focus,
.Skin .RO .RB tr:hover,
.Skin .RO .RB tr:focus,
.Skin .CS .VRTL li:hover,
.Skin .CS .VRTL li:focus {
  background: #f5f5f5;
}

ul.ChoiceStructure,
li.Selection {
  margin-bottom: 0.75rem;
}
.Skin .LabelWrapper {
  margin: 0;
}

.Skin label.SingleAnswer,
.Skin label.MultipleAnswer,
.Skin label.SingleAnswer.q-checked,
.Skin label.SingleAnswer.q-checked.q-focused,
.Skin label.MultipleAnswer.q-checked,
.Skin label.MultipleAnswer.q-checked.q-focused {
  position: relative;
  padding: 0 0 0 24px !important;
  background: none;
}

.Skin .NPS label.SingleAnswer.q-checked,
.Skin .NPS label.SingleAnswer.q-checked.q-focused,
.Skin .NPS label.MultipleAnswer.q-checked,
.Skin .NPS label.MultipleAnswer.q-checked.q-focused,
.Skin .MC .SAHR .QuestionBody table td label {
  padding: 0px !important;
}

.Skin label.SingleAnswer:hover,
.Skin label.SingleAnswer.q-checked:hover,
.Skin label.SingleAnswer.q-checked.q-focused:hover,
.Skin label.MultipleAnswer:hover,
.Skin label.MultipleAnswer.q-checked:hover,
.Skin label.MultipleAnswer.q-focused:hover,
.Skin label.MultipleAnswer.q-checked.q-focused:hover {
  background: none;
}

.Skin label.MultipleAnswer > span::before,
.Skin label.MultipleAnswer.q-checked > span::before,
.Skin label.MultipleAnswer.q-checked.q-focused > span::before,
.Skin label.SingleAnswer > span::before {
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  display: block;
  transform: translateY(-50%);
}

.Skin label.MultipleAnswer.LabelPositionBELOW,
.Skin label.SingleAnswer.LabelPositionBELOW {
  padding: 0 12px !important;
}
.Skin .MAHR td label.q-checkbox,
.Skin .SAHR td label.q-radio {
  left: 50%;
  transform: translateX(-50%);
}

.Skin .MC .DL .QuestionBody {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.Skin .MC li .LabelWrapper {
  margin: 0 auto 0px auto;
}

/* BUTTONS */
.Skin #Buttons #NextButton,
.Skin #Buttons #PreviousButton {
  position: relative;
  height: auto;
  padding: 6px 18px 10px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  border: 0 none;
  border-radius: 5px;
  outline: none;
  transition: all 350ms ease;
  cursor: pointer;
  display: inline-block;
}

.Skin #Buttons #NextButton:hover,
.Skin #Buttons #NextButton:focus,
.Skin #Buttons #PreviousButton:hover,
.Skin #Buttons #PreviousButton:focus {
  text-decoration: none;
}

.Skin #Buttons #NextButton {
  background: #00cc99;
  border: 2px solid #00cc99;
  color: #ffffff;
}

.Skin #Buttons #NextButton:hover,
.Skin #Buttons #NextButton:focus {
  background: #00e0a8;
  border-color: #00e0a8;
  color: #ffffff;
}
.Skin #Buttons #PreviousButton {
  background: transparent;
  border: 2px solid #000000;
  color: #000000;
}
.Skin #Buttons #PreviousButton:hover,
.Skin #Buttons #PreviousButton:focus {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* FORMS */
#SkinContent .InputText,
#SkinContent .InputText,
#SkinContent .InputText,
#SkinContent .InputText,
#SkinContent .InputText,
#SkinContent .TextEntryBox,
#SkinContent input.TextEntryBox,
#SkinContent .TE textarea,
#SkinContent input[type="password"],
#SkinContent input[type="text"],
#SkinContent input[type="search"],
#SkinContent select,
#SkinContent textarea {
  width: 100% !important;
  height: auto;
  min-height: 38px;
  padding: 0.625rem;
  font-size: 14px;
  line-height: 1.2;
  background: none;
  border: 0.063rem solid #dddddd;
  border-radius: 5px;
  text-align: left;
  outline: none;
}
#SkinContent select {
  height: 38px;
}

.Skin .RO .RankInput + .LabelWrapper {
  margin-top: 6px;
  display: block;
}

/* MATRIX */
.Skin .Matrix table th.c1,
.JFEScope .Skin .q-matrix .LabelWrapper.table {
  padding-left: 0;
}

/* STATEMENT */
.Skin .SS .horizontalbar .SSTrack,
.Skin .horizontalbar .Slider .track {
  background: #dddddd;
  border-radius: 6px;
}

.Skin .horizontalbar .handle {
  cursor: ew-resize;
}

.Skin label.q-radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.JFEScope .Skin .q-matrix.mobile table th {
  outline: none;
}
.Skin .NPS label.q-radio {
  margin-top: 12px;
}

@media only screen and (max-width: 770px) {
  .Skin .SkinInner {
    padding: 36px 12px 0;
  }
  .Skin #LogoContainer {
    padding: 0;
  }
  .Skin .QuestionBody,
  .Skin .Matrix .QuestionBody {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .Skin .QuestionOuter {
    padding: 0;
  }

  .JFEScope .Skin .q-matrix .answered-indicator span {
    padding: 0;
  }
  .JFEScope .Skin .q-matrix.mobile table th {
    padding: 12px 0;
  }
  .JFEScope .Skin .q-matrix .dropdown-arrow .dropdown-up,
  .JFEScope .Skin .q-matrix .dropdown-arrow .dropdown-down {
    background-size: 60%;
  }
  .JFEScope .Skin .Matrix .q-matrix.mobile table td {
    padding: 12px 0;
    background: #ffffff;
  }
  .JFEScope .Skin .q-matrix .single-answer.mobile {
    margin: 0;
  }

  .Skin .ChoiceRow:hover,
  .Skin .ChoiceRow:focus,
  .Skin .Choice:hover,
  .Skin .Choice:focus,
  .Skin .RO .RB tr:hover,
  .Skin .RO .RB tr:focus,
  .Skin .CS .VRTL li:hover,
  .Skin .CS .VRTL li:focus {
    background: #ffffff;
  }

  .Skin .Matrix .QuestionBody,
  .Skin .SBS .QuestionBody,
  .JFEScope .Skin .q-matrix .answered-indicator {
    font-size: 14px;
  }
}

.Skin .LanguageSelectorContainer {
	margin: 0 0 24px;
    text-align: left;
}
#SkinContent select.Q_lang {
	max-width: 300px;
	height: auto;
}

.Skin .PGR .DragAndDrop .Group div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Skin .PGR .DragAndDrop .rank, .Skin .RO .DND .rank {
    width: 35px;
    height: 35px;
    padding: 0;
    font-weight: 900;
    line-height: 30px;
    border-radius: 100%;
}

.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div {
    width: 341px;
}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2,
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul {
    width: 100%;
}

.Skin .PGR .DragAndDrop .QuestionBody label {
    padding: 0 12px;
    text-align: left;
}
.Skin .PGR .DragAndDrop td.groupsContainerTd div>div {
    border: none;
}
.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li {
    padding: 8px 0 8px 40px;
}
.Skin .PGR .DragAndDrop .Group h2 {
    width: 100%;
    background: none;
    border: none;
}
.Skin .PGR .DragAndDrop .Group>div>ul {
    background: none;
    border: 2px solid #d2d2d6;
    border-radius: 4px;
}

span.LabelWrapper label>span {
    width: 100%;
}

4. Logo

Logo Image: Use a transparent PNG
Style: Floating
Placement: -
Max Height: leave empty
Mobile Scaling: leave empty

5. Background

Background Type: Color
Background Color: #FFFFFF
Foreground Contrast: High
Questions Container: -

6. Icons

Favicon: 32px X 32px transparent PNG
Apple Touch Icon: 196px X 196px transparent PNG
Open Graph Image:196px X 196px transparent PNG