Design templates for v7
Design templates provide a starting for your survey designs, saving you time and promoting best practices. These designs are tested and approved by the design, engineering and product departments.
All these templates are based on the v7 base design template. They all enable you to customize the colors of different survey page elements and shapes of buttons based on your branding guidelines. For more information, see Customize v7 designs.
Tip: Because retina displays have higher pixel density, images that render as expected on regular screens might render as slightly blurry on retina displays. Design experts recommend using images that are 2x the display size so that they render optimally on retina screens.
Design template 1: Standard
The v7 Design 1: Standard has the same layout as the out-of-the-box v7 template.
Image sizes
- Logo:
- 600-1000px width by 100-200px height (optimized for retina display).
- 300-500px width by 50-100px height (not optimized for retina display).
-
Favicon (optional):
- 16px width by 16px height.
Template code
/***Design v7 Standard Theme ***/
/********** LOGO CUSTOMIZATIONS ************************************************/
/*** Logo size adjustment ***/
/* Assumes the image is 200% intended size to account for retina display */
.layout_logo {
height: 50%;
}
/*** Logo size adjustment -- narrow screen (mobile) ***/
@media screen and (max-width: 768px) {
.layout_logo {
max-width: 90%;
height: auto;
}
}
/********** OPTIONAL: HEADER BACKGROUND COLOR & BORDER CUSTOMIZATION ***********/
/* header {
background-color: #000000;
border-bottom: none;
} */
/********** BACKGROUND COLOR CUSTOMIZATION *************************************/
html {
background: #FFFFFF;
}
body {
background: none;
}
/********** PROGRESS BAR CUSTOMIZATION *****************************************/
/*** Progress bar ***/
.progressbar_progressBarIndicator {
background-color: #5DC95B;
}
/********** QUESTION & ANSWER HOVER & SELECTION COLOR CUSTOMIZATIONS ***********/
/*** Hover and Focus on the Question options ***/
.dropdown_dropdownSelector:focus, .dropdown_dropdownSelector:hover, .hasNoTouch .option_input:focus+.option_optionContainer, .hasNoTouch .option_input:hover+.option_optionContainer, .hasNoTouch .cellOption_input:focus+.cellOption_indicatorContainer, .hasNoTouch .cellOption_input:hover+.cellOption_indicatorContainer, .textarea_textareaContainer:hover, .textarea_textareaContainer_isFocused, .layoutListItem_layoutListItemContainer_hasHighlights:hover, .layoutListItem_layoutListItemContainer_hasHighlights:focus, .dropdown_dropdownListItem:hover, .dropdown_dropdownListItem:focus, .hasNoTouch .option_optionContainer:hover, .hasNoTouch .option_optionContainer_hasBoxShadow, .textField_textField:focus, .textField_textField:hover, .calendarTextfieldInput:hover, .calendarTextfieldInput:focus, .calendar_calendarIconContainer:focus, .calendar_calendarIconContainer:hover, .hasNoTouch .day_day:focus, .hasNoTouch .day_day:hover {
box-shadow: 0 0 0 3px #1B6EC2;
}
/*** Selected rating grid buttons color ***/
.indicatorCircle_circle_isSelected {
background: #1B6EC2;
/* color: #213144; */ /* Optional: Use darker font color when selected answer color is light */
}
/* Optional: Adjusts font color within grids for when a light highlight color is used */
/* .indicatorCircle_label_isSelected {
color: #213144;
} */
/*** Selected vertical radio button (Choose One) color ***/
.indicatorRadio_indicatorRadioContainer_isSelected {
border: 8.4px solid #1B6EC2;
}
/*** Selected checkbox (Choose Many) color ***/
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
background: #1B6EC2;
border: 2px solid #1B6EC2;
}
/* Calendar Icon Primary Color */
.calendar_calendarIcon, .calendarDatePickerButton .calendar_calendarIcon {
color: #1B6EC2;
}
.calendar_calendarIconContainer_isActive {
background-color: #1B6EC2;
}
/* Calendar Icon Secondary Color (White) */
.calendar_calendarIconContainer_isActive .calendar_calendarIcon {
color: #FFFFFF;
}
/* Optional: Dropdown Max Height Adjustment */
/* When setting max-height value, use a multiple of 55px, since that aligns to height of an individual list item */
/* .dropdown_dropdownList.dropdown_dropdownList_isActive {
max-height: 330px;
padding: 3px;
overflow: auto;
box-sizing: border-box;
} */
/********** FONT CUSTOMIZATIONS ************************************************/
/* Adjusts color + font family of all text in the survey that are not links or error validations */
body {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Optional: Dark Background & Light Body Text Color Combinations Only - Adjusts font color for text within selectable containers */
/* .dropdown_dropdownContainer, .calendarTitle_calendarTitleLabel, .weekdayHeaders_weekdayHeadersContainer, .layout_answer, .modal_modalContainer, .tooltip_tooltipContentContainer {
color: #213144;
} */
/* Adjusts color + font family of all error validations */
.layout_globalErrorBlock, .validation_errorBlock {
color: #E03131;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all text in the survey are links */
a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all footer links within the survey */
.layout_footer .layout_legalLinks a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Recommended: Decrease Font Size on Mobile If Your Client is Optimizing for Response Rates Over Accessibility */
@media screen and (max-width: 768px) {
/* Reduce Font Size on Question */
.questionCaption {
font-size: 18px;
line-height: 1.2;
display: block;
}
/* Reduce Padding on Questions */
.question_questionTitle {
padding: 10px 0;
}
/* Reduce Padding on Text Blocks */
.layout_text {
padding: 10px 0;
}
.layout_answers {
margin: 0 0 5px;
}
/* Reduce Font Size for Validation Block */
.validation_validationBlock {
font-size: 15px;
padding-bottom: 5px;
}
/* Hide Longform Multiselect Message */
.longform_multiSelectMessage {
display: none;
}
}
/********** BUTTON CUSTOMIZATIONS **********************************************/
/*** Primary button background & font color customization - Includes Begin Survey, Next, and Finish ***/
/* Primary button - color upon display */
.button_button_isPrimary {
background-color: #1B6EC2;
color: #FFFFFF;
}
/* Primary button - colors upon hover & focus */
.button_button_isPrimary:focus,
.button_button_isPrimary:hover {
background-color: #1A5793;
color: #FFFFFF;
}
/*** Secondary button background & font color customization - Back button only ***/
/* Secondary button - color upon display */
.button_button_isSecondary {
background-color: #E2E2E2;
color: #5b5b5b;
}
/* Secondary button - colors upon hover & focus */
.button_button_isSecondary:focus,
.button_button_isSecondary:hover {
background-color: #C9C9C9;
color: #5b5b5b;
}
/* Optional: Adjust button shape to be rounded */
/* .button_button {
border-radius: 100px;
} */Design template 2: Split Pane
The v7 Design 2 Split Pane (also known as Orion template) offers a split pane view of the survey side by side with a prominently displayed image.
Restriction: v7 Design 2 Split Pane is currently incompatible with TripAdvisor Promote Widget. Avoid using this template when using TripAdvisor Promote.
Image sizes
- Logo:
- 600-1000px width by 100-200px height (optimized for retina display).
- 300-500px width by 50-100px height (not optimized for retina display).
-
Side image:
- 780px width by 1112px height.
-
Favicon (optional):
- 16px width by 16px height.
Template code
/***Design v7 Orion Theme ***/
/********** SIDE BY SIDE LAYOUT, HEADER, AND BACKGROUND COLOR CUSTOMIZATION ***********/
/* Header, Side by Side Layout on Desktop, & Background Customizations */
header {
background-color: #FFFFFF;
border-bottom: none;
}
@media screen and (min-width: 769px) {
#survey {
position: fixed;
width: 100%;
height: 100%;
background: url(http://via.placeholder.com/1000?text=image);
background-size: contain;
background-position: right;
background-repeat: no-repeat;
overflow: auto;
}
#survey > div {
width: 60%;
background-color: #FFFFFF;
min-height: 100%;
}
}
/* Mobile-Specific Customizations */
@media screen and (max-width: 768px) {
.page-0 header:after {
content: ' ';
display: block;
background: url(http://via.placeholder.com/1000?text=image) 0 -100px;
/* Optional: Adjust positioning of the image */
background-size: cover;
background-repeat: no-repeat;
height: 200px;
}
#survey > div, .layout_mainHeaderLeft, .layout_mainHeaderRight {
width: auto;
}
}
/*Optional: Remove side pane from mobile*/
@media screen and (max-width: 768px) {
#survey > div {
width: 100%;
}
#survey {
background: none;
}
}
/* Loading Indicator */
#survey .loadingContainer {
width: 82px;
height: 82px;
background: none;
min-height: 0px;
}
/********** LOGO CUSTOMIZATIONS ************************************************/
/*** Logo size adjustment ***/
/* Assumes the image is 200% intended size to account for retina display */
.layout_logo {
height: 50%;
}
/*** Logo size adjustment -- narrow screen (mobile) ***/
@media screen and (max-width: 768px) {
.layout_logo {
max-width: 90%;
height: auto;
}
}
/********** PROGRESS BAR CUSTOMIZATION *****************************************/
/*** Progress bar ***/
.progressbar_progressBarIndicator {
background-color: #5DC95B;
}
/********** QUESTION & ANSWER HOVER & SELECTION COLOR CUSTOMIZATIONS ***********/
/*** Hover and Focus on the Question options ***/
.dropdown_dropdownSelector:focus, .dropdown_dropdownSelector:hover, .hasNoTouch .option_input:focus+.option_optionContainer, .hasNoTouch .option_input:hover+.option_optionContainer, .hasNoTouch .cellOption_input:focus+.cellOption_indicatorContainer, .hasNoTouch .cellOption_input:hover+.cellOption_indicatorContainer, .textarea_textareaContainer:hover, .textarea_textareaContainer_isFocused, .layoutListItem_layoutListItemContainer_hasHighlights:hover, .layoutListItem_layoutListItemContainer_hasHighlights:focus, .dropdown_dropdownListItem:hover, .dropdown_dropdownListItem:focus, .hasNoTouch .option_optionContainer:hover, .hasNoTouch .option_optionContainer_hasBoxShadow, .textField_textField:focus, .textField_textField:hover, .calendarTextfieldInput:hover, .calendarTextfieldInput:focus, .calendar_calendarIconContainer:focus, .calendar_calendarIconContainer:hover, .hasNoTouch .day_day:focus, .hasNoTouch .day_day:hover {
box-shadow: 0 0 0 3px #1B6EC2;
}
/*** Selected rating grid buttons color ***/
.indicatorCircle_circle_isSelected {
background: #1B6EC2;
/* color: #213144; */ /* Optional: Use darker font color when selected answer color is light */
}
/* Optional: Adjusts font color within grids for when a light highlight color is used */
/* .indicatorCircle_label_isSelected {
color: #213144;
} */
/*** Selected vertical radio button (Choose One) color ***/
.indicatorRadio_indicatorRadioContainer_isSelected {
border: 8.4px solid #1B6EC2;
}
/*** Selected checkbox (Choose Many) color ***/
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
background: #1B6EC2;
border: 2px solid #1B6EC2;
}
/* Calendar Icon Primary Color */
.calendar_calendarIcon, .calendarDatePickerButton .calendar_calendarIcon {
color: #1B6EC2;
}
.calendar_calendarIconContainer_isActive {
background-color: #1B6EC2;
}
/* Calendar Icon Secondary Color (White) */
.calendar_calendarIconContainer_isActive .calendar_calendarIcon {
color: #FFFFFF;
}
/* Optional: Dropdown Max Height Adjustment */
/* When setting max-height value, use a multiple of 55px, since that aligns to height of an individual list item */
/* .dropdown_dropdownList.dropdown_dropdownList_isActive {
max-height: 330px;
padding: 3px;
overflow: auto;
box-sizing: border-box;
} */
/********** FONT CUSTOMIZATIONS ************************************************/
/* Adjusts color + font family of all text in the survey that are not links or error validations */
body {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Optional: Dark Background & Light Body Text Color Combinations Only - Adjusts font color for text within selectable containers */
/* .dropdown_dropdownContainer, .calendarTitle_calendarTitleLabel, .weekdayHeaders_weekdayHeadersContainer, .layout_answer, .modal_modalContainer, .tooltip_tooltipContentContainer {
color: #213144;
} */
/* Adjusts color + font family of all error validations */
.layout_globalErrorBlock, .validation_errorBlock {
color: #E03131;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all text in the survey are links */
a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all footer links within the survey */
.layout_footer .layout_legalLinks a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Recommended: Decrease font size on mobile if your client is optimizing for response rates over accessibility */
@media screen and (max-width: 768px) {
/* Reduce Font size on Question */
.questionCaption {
font-size: 18px;
line-height: 1.2;
display: block;
}
/* Reduce Padding on Questions */
.question_questionTitle {
padding: 10px 0;
}
/* Reduce Padding on Text Blocks */
.layout_text {
padding: 10px 0;
}
.layout_answers {
margin: 0 0 5px;
}
/* Reduce Font size for Validation block */
.validation_validationBlock {
font-size: 15px;
padding-bottom: 5px;
}
/* Hide longform multiselect message */
.longform_multiSelectMessage {
display: none;
}
}
/********** BUTTON CUSTOMIZATIONS **********************************************/
/*** Primary button background & font color customization - Includes Begin Survey, Next, and Finish ***/
/* Primary button - color upon display */
.button_button_isPrimary {
background-color: #1B6EC2;
color: #FFFFFF;
}
/* Primary button - colors upon hover & focus */
.button_button_isPrimary:focus,
.button_button_isPrimary:hover {
background-color: #1A5793;
color: #FFFFFF;
}
/*** Secondary button background & font color customization - Back button only ***/
/* Secondary button - color upon display */
.button_button_isSecondary {
background-color: #E2E2E2;
color: #5b5b5b;
}
/* Secondary button - colors upon hover & focus */
.button_button_isSecondary:focus,
.button_button_isSecondary:hover {
background-color: #C9C9C9;
color: #5b5b5b;
}
/* Optional: Adjust button shape to be rounded */
/* .button_button {
border-radius: 100px;
} */Tip: For an external monitor and browser expanded in width, use this to adapt the background size:
#survey { background-size: 41%, auto; }Design template 3: Dark background image, White text
The v7 Design 3 Dark background image, white text (also known as Serenity template) features a dark image as its background with white text throughout the survey.
Image sizes
- Logo:
- 600-1000px width by 100-200px height (optimized for retina display).
- 300-500px width by 50-100px height (not optimized for retina display).
-
Background image:
- 1920px width by 1200px height.
-
Favicon (optional):
- 16px width by 16px height.
Template code
/***Design v7 - Serenity Theme ***/
/********** LOGO CUSTOMIZATIONS ************************************************/
/*** Logo size adjustment ***/
/* Assumes the image is 200% intended size to account for retina display */
.layout_logo {
height: 50%;
}
/*** Logo size adjustment -- narrow screen (mobile) ***/
@media screen and (max-width: 768px) {
.layout_logo {
max-width: 90%;
height: auto;
}
}
/********** HEADER CUSTOMIZATION ***********************************************/
/* Remove border separator between header and survey content */
header {
border-bottom: none;
}
/********** BACKGROUND IMAGE CUSTOMIZATION *************************************/
html {
background: url(http://via.placeholder.com/1000?text=image) 100% center black no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
body {
background: none;
}
/********** PROGRESS BAR CUSTOMIZATION *****************************************/
/*** Progress bar ***/
.progressbar_progressBarIndicator {
background-color: #5DC95B;
}
/********** QUESTION & ANSWER HOVER & SELECTION COLOR CUSTOMIZATIONS ***********/
/*** Hover and Focus on the Question options ***/
.dropdown_dropdownSelector:focus, .dropdown_dropdownSelector:hover, .hasNoTouch .option_input:focus+.option_optionContainer, .hasNoTouch .option_input:hover+.option_optionContainer, .hasNoTouch .cellOption_input:focus+.cellOption_indicatorContainer, .hasNoTouch .cellOption_input:hover+.cellOption_indicatorContainer, .textarea_textareaContainer:hover, .textarea_textareaContainer_isFocused, .layoutListItem_layoutListItemContainer_hasHighlights:hover, .layoutListItem_layoutListItemContainer_hasHighlights:focus, .dropdown_dropdownListItem:hover, .dropdown_dropdownListItem:focus, .hasNoTouch .option_optionContainer:hover, .hasNoTouch .option_optionContainer_hasBoxShadow, .textField_textField:focus, .textField_textField:hover, .calendarTextfieldInput:hover, .calendarTextfieldInput:focus, .calendar_calendarIconContainer:focus, .calendar_calendarIconContainer:hover, .hasNoTouch .day_day:focus, .hasNoTouch .day_day:hover {
box-shadow: 0 0 0 3px #1B6EC2;
}
/*** Selected rating grid buttons color ***/
.indicatorCircle_circle_isSelected {
background: #1B6EC2;
/* color: #213144; */ /*Optional: Use darker font color when selected answer color is light */
}
/* Optional: Adjusts font color within grids for when a light highlight color is used */
/* .indicatorCircle_label_isSelected {
color: #213144;
} */
/*** Selected vertical radio button (Choose One) color ***/
.indicatorRadio_indicatorRadioContainer_isSelected {
border: 8.4px solid #1B6EC2;
}
/*** Selected checkbox (Choose Many) color ***/
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
background: #1B6EC2;
border: 2px solid #1B6EC2;
}
/* Calendar Icon Primary Color */
.calendar_calendarIcon, .calendarDatePickerButton .calendar_calendarIcon {
color: #1B6EC2;
}
.calendar_calendarIconContainer_isActive {
background-color: #1B6EC2;
}
/* Calendar Icon Secondary Color (White) */
.calendar_calendarIconContainer_isActive .calendar_calendarIcon {
color: #FFFFFF;
}
/* Optional: Dropdown Max Height Adjustment */
/* When setting max-height value, use a multiple of 55px, since that aligns to height of an individual list item */
/* .dropdown_dropdownList.dropdown_dropdownList_isActive {
max-height: 330px;
padding: 3px;
overflow: auto;
box-sizing: border-box;
} */
/********** FONT CUSTOMIZATIONS ************************************************/
/* Adjusts color + font family of all text in the survey that are not links or error validations */
body {
color: #FFFFFF;
font-family: "Open Sans", Arial, sans-serif;
}
/* Darken font color for text within selectable containers */
.dropdown_dropdownContainer, .calendarTitle_calendarTitleLabel, .weekdayHeaders_weekdayHeadersContainer, .layout_answer, .modal_modalContainer, .tooltip_tooltipContentContainer {
color: #213144;
}
/* Adjusts color + font family of all error validations */
.layout_globalErrorBlock, .validation_errorBlock {
color: #E03131;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all text in the survey are links */
a {
color: #FFFFFF;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all footer links within the survey */
.layout_footer .layout_legalLinks a {
color: #FFFFFF;
font-family: "Open Sans", Arial, sans-serif;
}
/* Recommended: Decrease Font Size on Mobile If Your Client is Optimizing for Response Rates Over Accessibility */
@media screen and (max-width: 768px) {
/* Reduce Font Size on Question */
.questionCaption {
font-size: 18px;
line-height: 1.2;
display: block;
}
/* Reduce Padding on Questions */
.question_questionTitle {
padding: 10px 0;
}
/* Reduce Padding on Text Blocks */
.layout_text {
padding: 10px 0;
}
.layout_answers {
margin: 0 0 5px;
}
/* Reduce Font Size for Validation Block */
.validation_validationBlock {
font-size: 15px;
padding-bottom: 5px;
}
/* Hide Longform Multiselect Message */
.longform_multiSelectMessage {
display: none;
}
}
/********** BUTTON CUSTOMIZATIONS **********************************************/
/*** Primary button background & font color customization - Includes Begin Survey, Next, and Finish ***/
/* Primary button - color upon display */
.button_button_isPrimary {
background-color: #1B6EC2;
color: #FFFFFF;
}
/* Primary button - colors upon hover & focus */
.button_button_isPrimary:focus,
.button_button_isPrimary:hover {
background-color: #1A5793;
color: #FFFFFF;
}
/*** Secondary button background & font color customization - Back button only ***/
/* Secondary button - color upon display */
.button_button_isSecondary {
background-color: #E2E2E2;
color: #5b5b5b;
}
/* Secondary button - colors upon hover & focus */
.button_button_isSecondary:focus,
.button_button_isSecondary:hover {
background-color: #C9C9C9;
color: #5b5b5b;
}
/* Optional: Adjust button shape to be rounded */
/* .button_button {
border-radius: 100px;
} */
Design template 4: Background image, white blocks
The v7 Design 4 - Background image, white blocks (also known as Dark Peaks template) features a background image of any color combination, with white blocks around page elements so that they are visible against the background image.
Image sizes
- Logo:
- 600-1000px width by 100-200px height (optimized for retina display).
- 300-500px width by 50-100px height (not optimized for retina display).
-
Background image:
- 1920px width by 1200px height.
-
Favicon (optional):
- 16px width by 16px height.
Template code
/*** Design v7- Dark Peaks Theme ***/
/********** LOGO CUSTOMIZATIONS ************************************************/
/*** Logo size adjustment ***/
/* Assumes the image is 200% intended size to account for retina display */
.layout_logo {
height: 50%;
border: 0;
}
/*** Logo size adjustment -- narrow screen (mobile) ***/
@media screen and (max-width: 768px) {
.layout_logo {
max-width: 90%;
height: auto;
}
}
/********** HEADER CUSTOMIZATION ***********************************************/
/* Black header by default with spacing on the bottom */
header {
background-color: black;
border-bottom: none;
margin-bottom: 20px;
}
/********** BACKGROUND IMAGE CUSTOMIZATION *************************************/
html {
background-image: url(http://via.placeholder.com/1000?text=image);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
/********** DO NOT EDIT - WHITE BLOCKS AROUND QUESTION ELEMENTS ****************/
.questionBlock, .layout_globalErrorBlock {
background-color: #FFFFFF;
padding: 20px;
}
.questionBlock,
.invitationErrorFooterNode {
margin-bottom: 20px;
}
.calendar_calendarContainer {
width: auto;
}
.questionBlock.ratingGridQuestion.ratingGridQuestion_hasOneRow .question_questionTitle {
background: #FFFFFF;
margin: -20px;
padding: 20px;
}
.questionBlock .question_questionTitle {
padding-top: 0;
}
.layout_answers {
margin-bottom: 20px;
}
.questionTextNode, .textNode {
background: #FFFFFF;
display: block;
width: auto;
padding: 20px;
margin: 20px 0;
}
.calendarQuestion .question_questionTitle {
background-color: #FFFFFF;
margin: -20px;
padding: 20px;
}
.additionalValidationNode {
background-color: #FFFFFF;
padding: 20px;
margin-top: -40px;
}
/********** PROGRESS BAR CUSTOMIZATION *****************************************/
/*** Progress bar ***/
.progressbar_progressBarIndicator {
background-color: #5DC95B;
}
/********** QUESTION & ANSWER HOVER & SELECTION COLOR CUSTOMIZATIONS ***********/
/*** Hover and Focus on the Question options ***/
.dropdown_dropdownSelector:focus, .dropdown_dropdownSelector:hover, .hasNoTouch .option_input:focus+.option_optionContainer, .hasNoTouch .option_input:hover+.option_optionContainer, .hasNoTouch .cellOption_input:focus+.cellOption_indicatorContainer, .hasNoTouch .cellOption_input:hover+.cellOption_indicatorContainer, .textarea_textareaContainer:hover, .textarea_textareaContainer_isFocused, .layoutListItem_layoutListItemContainer_hasHighlights:hover, .layoutListItem_layoutListItemContainer_hasHighlights:focus, .dropdown_dropdownListItem:hover, .dropdown_dropdownListItem:focus, .hasNoTouch .option_optionContainer:hover, .hasNoTouch .option_optionContainer_hasBoxShadow, .textField_textField:focus, .textField_textField:hover, .calendarTextfieldInput:hover, .calendarTextfieldInput:focus, .calendar_calendarIconContainer:focus, .calendar_calendarIconContainer:hover, .hasNoTouch .day_day:focus, .hasNoTouch .day_day:hover {
box-shadow: 0 0 0 3px #1B6EC2;
}
/*** Selected rating grid buttons color ***/
.indicatorCircle_circle_isSelected {
background: #1B6EC2;
/* color: #213144; * Optional: Use darker font color when selected answer color is light */
}
/* Optional: Adjusts font color within grids for when a light highlight color is used */
/* .indicatorCircle_label_isSelected {
color: #213144;
} */
/*** Selected vertical radio button (Choose One) color ***/
.indicatorRadio_indicatorRadioContainer_isSelected {
border: 8.4px solid #1B6EC2;
}
/*** Selected checkbox (Choose Many) color ***/
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
background: #1B6EC2;
border: 2px solid #1B6EC2;
}
/* Calendar Icon Primary Color */
.calendar_calendarIcon, .calendarDatePickerButton .calendar_calendarIcon {
color: #1B6EC2;
}
.calendar_calendarIconContainer_isActive {
background-color: #1B6EC2;
}
/* Calendar Icon Secondary Color (White) */
.calendar_calendarIconContainer_isActive .calendar_calendarIcon {
color: #FFFFFF;
}
/* Optional: Dropdown Max Height Adjustment */
/* When setting max-height value, use a multiple of 55px, since that aligns to height of an individual list item */
/* .dropdown_dropdownList.dropdown_dropdownList_isActive {
max-height: 330px;
padding: 3px;
overflow: auto;
box-sizing: border-box;
} */
/********** FONT CUSTOMIZATIONS ************************************************/
/* Adjusts color + font family of all text in the survey that are not links or error validations */
body {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Optional: Dark Background & Light Body Text Color Combinations Only - Adjusts font color for text within selectable containers */
/* .dropdown_dropdownContainer, .calendarTitle_calendarTitleLabel, .weekdayHeaders_weekdayHeadersContainer, .layout_answer, .modal_modalContainer, .tooltip_tooltipContentContainer {
color: #213144;
} */
/* Adjusts color + font family of all error validations */
.layout_globalErrorBlock, .validation_errorBlock {
color: #E03131;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all text in the survey are links */
a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Adjusts color + font family of all footer links within the survey */
.layout_footer .layout_legalLinks a {
color: #213144;
font-family: "Open Sans", Arial, sans-serif;
}
/* Recommended: Decrease Font Size on Mobile If Your Client is Optimizing for Response Rates Over Accessibility */
@media screen and (max-width: 768px) {
/* Reduce Font Size on Question */
.questionCaption {
font-size: 18px;
line-height: 1.2;
display: block;
}
/* Reduce Padding on Questions */
.question_questionTitle {
padding: 10px 0;
}
/* Reduce Padding on Text Blocks */
.layout_text {
padding: 10px;
}
.layout_answers {
margin: 0 0 5px;
}
/* Reduce Font Size for Validation Block */
.validation_validationBlock {
font-size: 15px;
padding-bottom: 5px;
}
/* Hide Longform Multiselect Message */
.longform_multiSelectMessage {
display: none;
}
}
/********** BUTTON CUSTOMIZATIONS **********************************************/
/*** Primary button background & font color customization - Includes Begin Survey, Next, and Finish ***/
/* Primary button - color upon display */
.button_button_isPrimary {
background-color: #1B6EC2;
color: #FFFFFF;
}
/* Primary button - colors upon hover & focus */
.button_button_isPrimary:focus,
.button_button_isPrimary:hover {
background-color: #1A5793;
color: #FFFFFF;
}
/*** Secondary button background & font color customization - Back button only ***/
/* Secondary button - color upon display */
.button_button_isSecondary {
background-color: #E2E2E2;
color: #5b5b5b;
}
/* Secondary button - colors upon hover & focus */
.button_button_isSecondary:focus,
.button_button_isSecondary:hover {
background-color: #C9C9C9;
color: #5b5b5b;
}
/* Optional: Adjust button shape to be rounded */
/* .button_button {
border-radius: 100px;
} */