Skip to main content

Applying a Branded Theme Manually in Qualtrics

 

When creating a new blank survey project in Qualtrics (or duplicating a survey), you can either choose an existing branded theme, or you can apply a custom one. To apply a custom branded theme manually, follow the steps below.

Changing the Theme

After creating a new blank survey from scratch, first navigate to the “Look and feel” section of your project. The default theme will likely be an existing U of A theme.

Instead of this theme, scroll to the bottom of the list. Select “Blank” and apply changes.

Selecting a blank theme

Note

These instructions apply to Qualtrics' "new survey taking experience" layout – if you are working in an older survey, select to choose this new experience under "Layout" (if you don't see "Layout" then you are in the new experience already).

New survey taking experience option

 

Adding a Survey Title

Then under “General” within the left sidebar menu, “edit” the Header and add a title for the survey styled with Heading 1.

Adding a survey title in the header
Selecting Heading 1 format

 

Applying Styles

Next, go to the “Style” page from the sidebar menu. Update the primary color to #0C234B (or any other brand color).

Changing primary color

 

From the same page, scroll down to the bottom and look for the “Custom CSS” text box.

Adding custom CSS

 

Copy and paste the following block into this section:

	/* UA font */
	@import url('https://use.typekit.net/emv3zbo.css');

	#page {
 	font-family: "proxima-nova"!important;
 	color: #333;
 	/* setting top blue border */
 	border-top: 15px solid #0c234b;
	}

	#survey-canvas {
 	max-width: 45rem;
	}

	#header {
 	text-align: center;
	}

	.question-display {
 	font-weight: 500!important;
	}

	/* add background behind text only questions */
	.question.db {
 	background: #F2EFEA90;
 	border-radius: 10px;
	}

	/* override button styles */
	.navigation-button {
 	border-radius: 30px;
 	padding: 0 1.5rem!important;
 	font-size:1rem!important;
	}

	#navigation #next-button:hover {
 	background-color: #1E5288;
	}

	/* center buttons instead of right-aligned */
	#navigation #secondary-navigation {
 	display:none;
	}

	#navigation {
 	justify-content: center;
	}

	/* hide Qualtrics plug */
	.plug-container {
 	display: none;
	}

 

Adding a Logo

Under the “Logo” page from the sidebar menu, upload your logo and set its placement to “Centered” and adjust the size if necessary.

Adding and adjusting the logo

 

Finally, make sure to apply all of these changes. Your survey project is now themed!