About the Themes Tab
The Themes tab of the Admin page allows Brand Administrators to create branded dynamic themes for their whole brand to use. With this tool, administrators can create an unlimited number of branded themes, and then restrict who has access to what using permissions. This makes it easier than ever to create beautiful custom themes that comply with your brand’s personal sense of style.
Creating a New Theme
- In the Themes tab, select New Theme.
- Name your theme.
- Go to the General section.
- If desired, create a header. You can click edit beneath the field to open a rich text editor and add font effects, images, and basic HTML.
Qtip: Instead of adding a logo here, wait until you reach the Logo section in Step 13.
- If desired, create a footer. You can click edit beneath the field to open a rich text editor and add font effects, images, and basic HTML.
- Choose whether the progress bar is on the top, the bottom, or whatever the default is for the layout the user selects.
- Go to the Style section.
- Select a primary color. This affects different features based on the selected layout, but is generally the color applied to the selected answers, progress bars, and back / next buttons.
Attention: In order to have an accessible survey (with a visible focus indicator that is not only indicated by color), you must use a dynamic theme with the “Classic” layout. You will also need to ensure that your primary theme color has a high enough contrast with the focus indicator in the classic layout. If it doesn’t, you will either need to change your theme’s primary color or use custom code to change the indicator color.
- Choose a font.
- Choose the level of contrast between the colors in the foreground (text, buttons, borders, etc.) and the colors in the background.
- Choose question spacing.
- If desired, add custom CSS. You can click edit to open a larger CSS window to work in.
Qtip: Custom CSS requires programming knowledge to implement. Qualtrics Support does not offer assistance or consultation on custom coding. You can always try asking our community of dedicated users instead.
- Go to the Logo section.
- Upload or select a logo.
- Determine whether this logo is floating (shows exactly as the image is uploaded), or if it is a banner (adding a block of color behind the image).
- Choose the placement of the logo.
- Choose the max height of the logo.
- Determine how the logo will scale on mobile.
- Go to the Background section.
- If you select a Background Type of Color, you will be able to select or enter the hex code for a particular color.
- If you select a Background Type of Photo, you will be able to upload a photo, decide if there’s an Overlay of color over it, and decide the opacity of the overlay.
- Select the Foreground Contrast. This can make text more readable or images appear sharper.
- Go to the Icons section.
- A Favicon is the icon that appears on a tab when the theme is opened.
- The Apple Touch Icon is what will appear if someone bookmarks a survey with this theme, or adds the survey to their home screen.
- The Open Graph Image will appear when texting the survey’s link on some iPhones and Androids, and when sharing the survey link on social media such as Facebook or LinkedIn.
- When finished, click the save icon.
You can delete a theme by selecting it from the menu on the left, and then clicking the Delete button on the menu.
While building a theme, there are a few options to help you understand how the theme will appear when in use.
Using the dropdown in the upper-right, preview the theme with different layouts.
To see the theme on a desktop vs. mobile device, toggle the icons on the top of the preview.