Customize v7 designs

Every survey using a v7 design, such as the v7 base design template or one of the Design templates for v7, is an HTML page whose HTML body contains these sections:

Header — Repeats on the top every page, and may include a progress bar, a Skip navigation button, page logo, language selector, etc. All the elements are customizable.
Content — Main content of the page containing any combination of text and questions.
Navigation — Includes the navigation buttons like Begin Survey, Next, Back, and Finish.
Footer — Repeats on the bottom of every page and includes the Powered by Medallia logo, copyright notice, and links for additional information. The appearance of the content may be styled, but the content may not generally be changed (unless you use a custom footer).

Survey pages start with a header block, followed by a content block, and end with a footer block, all on an HTML body.

When customizing a v7 design:

Use accessible CSS (especially in the choice of colors).
Images must have alt attribute for accessibility, and they must pass accessibility requirements when the image is more than decoration.
Use Medallia icons for speed and accessibility.

For more information, see Shared assets accessibility.

Tip: The CSS editor does not mark any syntax errors. Paste your CSS code into an external editor, such as CSS validation service, to verify that it's properly formatted.

Logos

The v7 design uses one logo element, the Page_logo, for all pages. This logo is part of the default design and is declared in the design, and a separate image is available for each customization.

For the sharpest images, Medallia recommends sizing to 50% or 100% or their actual size.

Apple Retina

Apple Retina displays have twice as many pixels for width and height. To provide the best rendering on these displays, images must be twice as large as on other devices. To ensure logos look good regardless of the device, upload images 200% larger than normal, and then reduce the size that they are displayed in by 50% via the image's CSS.


Dimension	Image size for Retina support	Image size for Non-Retina support
Width	600-1000px	300-500px
Height	100-200px	50-100px

Adjust the size of the image

/* Logo size adjustment */
/* Assumes the image has a 1000px width to account for retina display */
.layout_logo { 
	width: 50%;
}

/* Logo size adjustment -- narrow screen (mobile) */
@media screen and (max-width: 768px) {
  .layout_logo {
	width: 90%;
	height: auto;
  }
}

Tip: A common best practice is to obtain logo in a vector file (eg. .svg, .ai). This provides the most flexibility if resizing is required. Use tools like Photoshop, Illustrator or Sketch into the file formats accepted by Admin Suite Designs (.jpg .gif .png).

Center logo

When the survey omits the language selector, you may center the logo on the page by hiding the language-selector cell and increasing the width of the logo cell:

/* Center the logo on the page */
 .layout_mainHeaderLeft { 
  margin-left: auto; 
  margin-right: auto; 
}

/* If logo is too large */  
.layout_logo {
    max-width: 50%;
}

/* Hide the language selector */
.layout_mainHeaderRight {
  display: none;
}

For more information, see Header.

Alternative text

Images must have an Alternative text or Alt text (alt attribute) for accessibility purposes, and they must pass all the accessibility requirements. Note that logos do not need to have an Alternative text if they can be classified as purely decoration. For more information, see An Alt decision tree.

Note: Though not recommended, you can achieve different logos for mobile and desktop devices using custom CSS.

Background

The default background color or image depends on the template you choose.

Change background

/*Background color for the page*/
html {
  background:#FFFFFF;
}
body {
  background:none;
}

Use an image

/* Full-screen background image */
html {
  background: url( 'https://example.com/images/page_logo.jpg' ) 100% center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}
body {
  background: none;
}

The value in the url() function is the full URL to the image file. For more information, see Using Custom CSS and Additional images.

Tip: For background image or color, follow the same sizing recommendations described for logos in Logos. Generally, a 1024x860 size image should comfortably fit most screens.

Colors

The default template uses these colors:

Color palette for the default v7 design

To change the color of:

Fonts, see Fonts.
Navigation buttons, see Navigation buttons.
Progress bar, see Progress bar.
Choice set items in focus, see Color and thickness of the hover and focus borders. Use this to change the color and thickness of the border around choice set elements when the pointer is hovering over the element, or when the element has focus.

Customize choice set colors

/* Selected rating grid buttons color */
.indicatorCircle_circle_isSelected {
    background: #3f88de;
}

/* Selected vertical radio button color in Multiple choice - one element */
.indicatorRadio_indicatorRadioContainer_isSelected {
  border: 8.4px solid #3f88de;
}

/* Selected checkbox color in Multiple choice - many element */
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
    background: #3f88de;
    border: 2px solid #3f88de;
}

Note: A bug exists on some versions of Chrome which results in border lines not always displaying for vertical radio buttons and checkboxes. Do not adjust the code to account for this Chrome bug; instead, upgrade the browser version. However, if you cannot upgrade the Chrome version, include this code in the template as a workaround to this issue:

/* Prevent border lines from disappearing in Chrome when zooming out */ 
.group_optionContainer {
	border-bottom: thin solid #dae0ea;
}

Fonts

Most font customizations change the font color (color), font-family (font-family), size (font-size), or spacing (padding or margin). Medallia strongly advises you to stick to web-safe fonts that are guaranteed to be available natively on most devices and every browser can render.

Restriction: Medallia does not host custom font files, which should be done on the company's end. See Adding custom fonts, below, on limitations on using custom fonts.

Common font customizations

All fonts in a survey:

/* All fonts in the survey */
body {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
}

Text blocks:

/* Text blocks only */
.layout_text {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    padding: 32px 0;   /* Font spacing */
}

Question text:

/* Question text (prompt) only */
.questionCaption {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
}
.question_questionTitle {
    padding: 10px 0;    /* Font spacing for question text */
}

Grid text:

/* Grid text attributes, left to right (text appears to the left of grid) */
.rowOption_leftCaption {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
}

/* Grid text attributes, top to bottom (text appears on top of the grid) */
.rowOption_topCaption {
  color: #213144;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 18px;
}
			  
/* Grid anchors */
.anchor {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
}
			  
/* Radio button answers in vertical and grid format, only */
.layout_answers {
    color: #213144;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    margin: 0 0 32px;   /* Font spacing */
}

Validation error text:

/* Validation error text */
.validation_validationBlock {
    font-size: 15px;
}

Global error message text:

/* Global error message */
.layout_globalErrorBlock {
    font-size: 16px;
    padding-bottom: 32px;   /* Font spacing */
}

Select message text:

/* Hide the "Select all that apply" message that appears (when spacing is very small) */
.longform_multiSelectMessage {
    display: none;
}

Add custom fonts

Before adding a custom or proprietary font, always explore a web-safe font that is similar enough to the desired custom font to avoid potential quality issues. Using custom fonts have some of these limitations:

It increases load-times and can impact the performance of surveys, especially on mobile devices. Be sure to test performance on the target devices; consolidate and reduce the number of fonts in use.
If the custom font belongs to a third party, a license to commercially use it is required.
If the survey taker's browser is unable to download the web font, it falls backs to another font to render. For fallback fonts, use web-safe fonts to make sure every browser renders it. Note that certain browsers may directly hang if they are unable to locate the custom font source if the host site is non-responsive, without resorting to the fallback font.
For Internet Explorer support, use EOT fonts.
You should maintain the location that hosts the custom fonts. Contact your Medallia expert before making any move to prevent any survey display incident.
Font file have to be hosted on secure URLs (https) to match surveys.
Medallia cannot control how and whether email clients render fonts. For emails, use web-safe fonts.

Embed a custom font

Use @font-face to display a specific font when branding purposes require so:

@font-face {
  font-family: ExampleFontFamily;
  src: 	url("https://www.example.com/examplefont.woff") format("woff"),
	url("https://www.example.com/examplefont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}

For more information, see Font-face rule.

Base64 encoding

An option to host custom fonts is applying Base64 encoding. Base64 is an encoding scheme that converts binary data into text character, embedded into the HTML via a data URL scheme.

To support embedded Base64 data, use the src property in the @font-face declaration:

@font-face {
 font-family: ExampleFontFamily;
  src: url(data:font/ttf;base64,AAEAAAATAQAABAAwR1BPU+Df...
}

For more information, see Serving up BAse64-encoded custom fonts.

Color and thickness of the hover and focus borders

All input elements on the survey have borders that change color and thickness when the pointer hovers over them, or when they are selected. By default, most of these elements have a 1-pixel thick border with a gray color:

 border: 1px solid #dae0ea;            /* Gray, 1px border */

This is the global definition makes the borders 3-pixel blue for all of the elements. You can change this setting to change all of them:

/* 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 #3f88de; /* Blue, 3px border */
}

Border color for drag and drop containers

Use this CSS to customize the border color on hover for drag and drop containers, such as the ones in Ranking order:

/*This example uses the purple color. Any supported color can be used*/

.ReorderableItem_drop_target,.ReorderableItem_selected {
  box-sizing: border-box;
  border: 2px solid #703E97;
}
.ReorderableList_draggable_list:focus,.ReorderableList_draggable_list>:focus {
  outline: 2px solid #703E97;
}
.DraggableItem_preview {
  max-width: 100%;
  border: 2px solid #703E97;
  background-color: #fff;
  box-shadow: 0 13px 38px 3px rgba(112,62,151,.37);
}
.DraggableItem_number_container {
  box-sizing: border-box;
  background-color: #703E97;
}
.DraggableItem_drop_target {
  box-sizing: border-box;
  border: 2px solid #703E97;
}

Survey title in the browser tab or window

The survey title defines the content of the label that appears in the browser's tab or window title. For more information, see Survey settings.

Header

The header repeats on the top every page, and may include a progress bar, "skip navigation" button, page logo, and language selector elements.

Call-outs to the header elements: progress bar, skip nav link, header layout container with its left container for the page logo and the right container for the language selector, and a bottom border line separating the header from the content

The entire header is a <header> HTML block element that contains the other elements, each of which are customizable with CSS, as described elsewhere in this topic.

<header>
	<div class="progressbar_progressBar">
		<div class="progressbar_progressBarIndicator"></div>
	</div>
	<a class="layout_skipNav" href="#content">Skip to Content</a>
	<div class="layout_layoutContainer">
		<div class="layout_mainHeader">
			<div class="layout_mainHeaderLeft">
				<img class="layout_logo" src="...">
			</div>
			<div class="layout_mainHeaderRight"></div>
		</div>
	</div>
</header>

Customize the header block

header {
    border-bottom: 1px solid #dae0ea;  /* Thin line at bottom of header */
    background-color: #fffffff;        /* Header background color: white */
}

To define a transparent header, set the background color to none:

header {
    background: none;                  /* Header with transparent background */
}

Main header

The main header block contains the page logo on the left, and language selector on the right. The language selector only appears when the survey is available in multiple languages.

<div class="layout_mainHeader">
	<div class="layout_mainHeaderLeft">
		<img class="layout_logo" src="...">
	</div>
	<div class="layout_mainHeaderRight"></div>
</div>

mainHeader block contains mainHeaderLeft for the logo and mainHeaderRight for the selector

Important: The mainHeader block is contained in a general layout container that applies to the whole page. That container sets the min and max widths for the page content. Those width settings are optimized for a responsive web page design. Avoid changing those widths.

The main header block has limited customization opportunities. These default settings affect the spacing and positioning of the page logo and language selector blocks:

/* Container for the page logo and language selectors */
.layout_mainHeader {
    padding: 32px 0;      /* Padding top and bottom: 32px each */
    min-height: 54px;     /* Entire header height is at least 118px (32+32+54) */
}
/* Left cell: holds page logo image */
.layout_mainHeaderLeft {
    width: 70%;           /* Page logo can be up to 70% of container width */
}
/* Right cell: holds language selector */
.layout_mainHeaderRight {
    width: 30%;           /* Left and Right width must total 100% */
}

Language selector

By default, the Choose language text above the language selector is hidden. To display the language selector label:

#languageSelector .dropdown_dropdownLabel {
  display: block;        /* Show the language selector label*/
}

The Language selector only appears on the first page. For more information, see Survey settings.

Page logo

See Logos.

Progress bar

The progress bar appear at the very top of every page except the first page. It is a visual indicator of the survey taker's progress through the survey. The default look is a green bar that advances from the left side of the page.

Note: The complete percentage indicator is not configurable. It only serves for accessibility purposes.

Style the color of the indicator bar and the uncompleted section of the indicator, and set the height (thickness) of the bar

Customize the progress bar

/* Progress bar background, or incomplete area */
.progressbar_progressBar {
    background-color: #dae0ea;    /* Color of incomplete area */
    height: 6px;                  /* Height of the bar */
}

/* Progress bar */
.progressbar_progressBarIndicator {
    background-color: #5dc95b;    /* Color of the progress bar */
}

Hide the progress bar

Click Survey settings or use:

.progressbar_progressBar {
    display: none;
}

The Skip to Content link is an accessibility element that allows users of screen readers and keyboard users to jump directly to the page with the first question. The link is the first element on a page and it is hidden from view. This allows screen readers and keyboard navigators to locate it without parsing the rest of the page (keyboard users can press Tab to navigate to link and make it appear).

The Skip to Content button is visibly hidden on the page, but screen readers interpret it to allow users to jump to the first page of survey content.

To customize the link's background and text colors when the link is visible:

/* When the Skip navigation button has focus (is selected) */
.layout_skipNav:focus {
    color: #ffffff;             /* Text color white */
    background-color: #1b75bc;  /* Background color */
}

Important: The text of the link is always Skip to Content and cannot be changed. For more information, see "Skip Navigation" Links.

"Required" indicator

Content elements that require an answer include an indicator icon and text to inform the survey taker of the requirement.

A survey question showing the "Required" indicator

To hide the Required indicator:

/* Hide the required icon and text */
.validation_requiredBlock {
  display: none;
}

/* Display 'Select all that apply' for choose many, which is currently nested inside the required icon */
.longform_multiSelectMessage.validation_requiredBlock {
  display: block;
}

Comment boost colors

The default Comment boost employs blue, gray, and white colors:

Comment boost colors.

To customize the labels, text, and progress bar colors:

/*This example uses the orange color. Any supported color can be used*/

/* Labels */
.qualityMeter_qualityMeterContainer_isActive .qualityMeter_qualityMeterLabel { 
  color: orange;
}

/* TextArea */
.textarea_textareaContainer:hover { 
  box-shadow: 0 0 0 3px orange;
}

/* Progress Bar */
.progressBarStep_progressStep_isActivated { 
  background-color: orange;
}

Date picker colors

The default Date picker employs blue, gray, and white colors:

Callouts to the calendar picker objects: icon, day box, and selected date

To customize the calendar picker and the button that opens the picker colors:

/* Calendar icon - Opens the calendar picker */
.calendar_calendarIcon, .calendarDatePickerButton .calendar_calendarIcon {
    color: #0088cc;                  /* Gray */
}

/* Calendar icon - Calendar picker is open */
.calendar_calendarIconContainer_isActive .calendar_calendarIcon {
    color: #fff;                     /* White */
}

/*Calendar icon background - Calendar picker is open */
.calendar_calendarIconContainer_isActive {
    background: #3f88de;             /* Blue */
    border: 1px solid #3f88de;       /* Blue, 1px border */
}

/*Calendar icon border - hover and focus */
.calendar_calendarIconContainer:focus, .calendar_calendarIconContainer:hover {
    box-shadow: 0 0 0 3px #3f88de;    /* Blue, 3px border */
}

/* Calendar picker day box border - hover and focus */
.day_day:focus, .day_day:hover {
    box-shadow: 0 0 0 3px #3f88de;    /* Blue, 3px border */
}

/* Calendar picker, selected date - circle background color */
.indicatorCircle_circle_isSelected {
    background-color: #3f88de;        /* Blue */
}

/* Calendar picker, selected date - numeral color */
.calendar_calendarIconContainer_isActive {
    color: #fff;                     /* White */
}

The navigation buttons switch between survey pages. The first page of the survey typically has a single button, either Begin Survey or Finish (for single-page surveys). The last page — after the survey has been submitted — and error pages do not have a navigation buttons. All other pages have a Back button and either a Next or Finish button.

Navigation buttons showing a single 'Begin Survey', and a pair of 'Back' and 'Finish'.

The navigation section is a <nav> HTML element that contains one or more button containers, which each contain a button:

<nav class="navigationButtons_navigationButtonsContainer ...">
	<div class="navigationButtons_pageButtonContainer">
		<button class="... button_button ..." >...</button>
	</div>
	<div class="navigationButtons_pageButtonContainer">
		<button class="... button_button ..." >...</button>
	</div>
</nav>

Customize shapes and general appearance

/* All buttons */
.button_button {
    border: none;             /* No visible border */
    border-radius: 4px;       /* Rounded corner */
    font-size: 18px;          /* Size of label text */
    padding: 16px 20px;       /* Padding between text and border */
    width: 100%;              /* Use all available cell for the button */
    text-align: center;       /* Center the label horizontally */
    vertical-align: middle;   /* Center the label vertically */
}

/* Navigation button container, may hold one, two, or three navigation buttons */
/* Usually the container holds one or two buttons, but for the Bazaarvoice form, it may hold three.*/
.navigationButtons_navigationButtonsContainer {
    text-align: center;       /* Center the buttons in their cells */
    padding: 32px 0;          /* Padding above and below the buttons */
    width: 100%;              /* Use all of the container width to hold the buttons */
}

/* When the container has just one button */
.navigationButtons_navigationButtonsContainer_hasOneButton .navigationButtons_pageButtonContainer button {
    width: 50%;               /* Use half the available space when only one button */
}

Customize specific primary buttons (Begin, Next, and Finish)

The default design uses different colors for primary and secondary buttons, and additional colors when the button has focus or the pointer is hovering over the button. A primary button is the ideal path through the survey pages, while secondary buttons provide alternative paths.

Button backgrounds change color when the button has focus or is in hover state.

.beginButton, 
.nextButton, 
.finishButton {
}

Customize button colors

/* Primary buttons include: Begin, Next, and Finish */
.button_button_isPrimary {
    background-color: #3f88de;     /* Primary button, normal: blue */
    color: #ffffff;                /* Text is white */
}
.button_button_isPrimary:focus, 
.button_button_isPrimary:hover {
    background-color: #226ec8;     /* Primary button, focus or hover: darker blue */
}

/* The secondary button is Back */
.button_button_isSecondary {
    background-color: #e2e2e2;     /* Secondary button, normal: light gray  */
    color: #5b5b5b;                /* Text color: very dark gray */
}

.button_button_isSecondary:focus, 
.button_button_isSecondary:hover {
    background-color: #c9c9c9;     /* Primary button, focus or hover: darker gray  */
}

The footer repeats on the bottom of every page, and includes the Powered by Medallia logo, copyright declaration, and required links. For more information, see Custom survey footers.

Footer example showing the logo, copyright, and links.

The entire footer is a <footer> HTML block element that contains a <div> block, which contains the content:

<footer>
	<div class="layout_footer">
		//Footer content here
	</div>
</footer>

Customize links

The default links in the footer are:


Link text	Link
Survey Support	`https://surveysupport.medallia.com/`
Other Contact Info	`https://www.medallia.com/contact`
Privacy Policy	`https://www.medallia.com/privacy`

Customize color and spacing

footer {
    background-color: #ffffff;         /* Footer background color */
}
.layout_footer {
    font-size: 12px;                   /* Text size in footer */
    padding-bottom: 32px               /* Padding below the contents to page bottom */
}
.layout_footer .layout_medalliaLogo {
    font-size: 24px;                   /* Size of the Medallia logo icon */
    padding-bottom: 8px;               /* Padding above and below the Medallia logo */
}
.layout_footer .layout_legalLinks a {
    padding: 0 2px;                    /* Padding left and right of each link */
    color: #213144;                    /* Link text color */
}

Page animations

The default design uses animation to "slide" the page up onto, and to "fade-in" to the screen when the page loads.

To disable the animations one the first or all pages:

/* Disable animation for all pages */
.layout_layoutContainer_fadeIn, .layout_layoutContainer_fadeInUp{
    animation: none;
}
/* Disable animation for the first page only */
.page-0 .layout_layoutContainer_fadeIn, .page-0 .layout_layoutContainer_fadeInUp{
    animation: none;
}

Character spacing on mobile displays

The v7 designs use a larger font size and element spacing to improve accessibility and readability. However, this expand scrolling on small, mobile device screens, which can lead to an increased abandonment rate.

To reduce the font size and spacing for surveys targeted to small mobile device screens:

@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_answer {
        margin: 0 0 5px;
    }

    /* Reduce font Size for validation block */
    .validation_validationBlock {
        font-size: 15px;
        padding-bottom: 5px;
    }

    /* Hide long-form multi-select message */
    .longform_multiSelectMessage {
        display: none;
    }

    /* For anchor-text with lots of characters (such as a grid that includes 
       the headings Extremely Satisfied, Satisfied, Neutral, Dissatisfied, 
       Extremely Dissatisfied), use these setting to reduce the font-size 
       on mobile devices
    */
    .anchor {
        font-size: 12px;
        line-height: 1em;
    }
}

Tip: To decrease scrolling across desktop and mobile devices, remove @media screen and (max-width: 768px) and brackets surrounding the nested portion of the settings.

Customize v7 designs

Logos

Background

Colors

Fonts

Color and thickness of the hover and focus borders

Survey title in the browser tab or window

Header

Progress bar

"Skip to content" link

"Required" indicator

Comment boost colors

Date picker colors

Navigation buttons

Footer

Page animations

Character spacing on mobile displays