Aesthetic judgments are subjective. What might be visually appealing to you might not be visually appealing to me. These differences largely help to keep the world interesting. With that said, I do not find the new Qualtrics “skin” for Notre Dame to be visually appealing. It has an ugly odd combination of white logo container, blue button, and yellow/gold header container, in addition to some kind of very faint quasi-fleur-de-lis Rorschach inkblot pattern in the question field (I am not sure what it is, other than distracting) that strikes me as unpleasant. Furthermore, I think the progress button could use some attention.

Again, these things are subjective, so I can understand if you are completely happy with the new skin (or even like it). Perhaps, though, you might be interested in changing the skin to something a little bit different. For instance, if you need to create a custom skin for a specific project or for your center/department (just be sure to stay on the right side of brand standards). The following code will help you out with that. If you are new to CSS, do not worry; you can easily do everything that I have done here. Look for my comments within the code (demarked with /*) for hints about what is going on and how you can change things around.

One important thing to note is that this particular code will only work for the default Notre Dame brand skin (the one pictured above). If you want to change the CSS for one of the other skins, it will take some slightly different code (which I have and is just as easy to use).

The Progress Button

As previously noted, I think the default progress button could use some work. I can appreciate the slightly radiused corners, but I feel like it either needs more or none at all; as it is, it makes me think about someone using sandpaper to radius the edges on a piece of wood. It is not terrible by any stretch of the imagination, but we can definitely do better. You should always remember to change the button to text; there is no reason to leave it as a carrot. You can do this in a variety of different ways, but just be sure to do it.

.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
  background-color: #ae9142; /* This will change the background color of the 
  button to the luxurious (and brand standard) metallic gold; to change the 
  color, all you need to do is substitute different values; if you were into
  such things, this would be the place to add an image to your progress button
  (perhaps a galloping unicorn .gif might be nice) */
  border: 0px solid #ae9142; /* This will change the border color of the button;
  you will notice that there is no border here */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 20px; /* This adds rounded corners to the button; you can 
  decrease/increase the radius by decreasing/increasing the value */
  color: white; /* This sets the color of the text within the button */
  cursor: pointer; /* This sets what our cursor looks like when we go into 
  the button; I do not recommend making it a "do not click" cursor, but it 
  might be a great practical joke to play on your lab manager */ 
  font-size: 14px; /* This sets the font size of the text within the button */
  margin: 0px;
  padding: 10px 20px;
  text-align: center; /*This sets the alignment of the text */
  text-decoration: underline; /* I wanted to add an underline to the text, 
  but you can do something different or nothing at all */
  -webkit-appearance: none; }
  @media only screen and (min-device-width: 1024px) {
    .Skin #Buttons #NextButton:hover, .Skin #Buttons #PreviousButton:hover {
      background-color: #001328;
      border-color: #001328; }
    .Skin #Buttons #NextButton:active, .Skin #Buttons #PreviousButton:active {
      background-color: black;
      border-color: black; } }

That is a pretty straight-forward operation, right? You can fully customize the look of your progress button by manipulating a few different values within the code.

Code With Which You Can Experiment

The following chunks of code are absolutely necessary for our customized CSS to work. You should feel free to experiment with this code, but recognize that it will not do too much for the code that is going to do some heavy lifting later on. Be aware that altering some of this code can cause some problems with our customized code.

/* This is from where the default logo comes; there is no real 
need to mess with it. */
html .Skin #Logo, html .CSS3 .Skin #Logo {
  background: transparent url("logo.png") no-repeat 20px center; 
  background-size: 173px 72px;
  height: 72px;
  margin: 0px auto;
  max-width: 900px;
  padding: 25px 20px; }
/* This chunk of code changes the background. */
#SurveyEngineBody {
  background: url(bg.png); /* This is where the ugly background happens */
  background-size: fit;
  font-family: "Arial", "Helvetica Neue", "Helvetica", arial, sans-serif; }

The Important Stuff

All of the previous code is absolutely necessary to include in your custom CSS; the progress button code is not necessary, but it sure does make things look a bit tidier. The following code chunk is where we are going to make our improvements. In looking at the code, there are a few things you need to keep in mind. If you plan to use an official University of Notre Dame logo, you need to get it from the On Message page. You will need to do some pretty basic image manipulation to it, but it should not take much. I highly recommend getting a pdf and doing your manipulations in Illustrator or GIMP. You can then import the image into your Qualtrics library. I would also recommend using the official colors; the values are available at the On Message page.

Another thing to keep in mind is that I like this skin, but fully recognize that you may want to do something different. I like borders around the questions, others do not. I highly encourage you to tweak things to best fit your needs and your own style.

/* This is where you will insert the link for the logo, but the link will be 
different; you can orient the logo with the positions */
.Skin #LogoContainer {
  background: white url("link.to.your.qualtrics.library.image") no-repeat left center; } 
.Skin #HeaderContainer {
  background: #ae9142; } /* This is where you give color to the header bar; 
  notice we used the same gold color that we used on the button */
.Skin #Header {
  background: transparent;
  font-size: 16px;
  color: white;
  margin: 0px auto;
  max-width: 900px;
  min-height: 16px;
  padding: 13px 20px; }
.Skin .SkinInner {
  margin: 30px auto;
  max-width: 1200px;
  width: 100%; }
.Skin #SkinContent {
  background-color: transparent;
  border: 1px solid #E5E4E2; /* This is where you can place a border 
  around the questions */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

Something to Hang on the Refrigerator

After we get all of that put into the custom CSS editor, we should have something resembling the following skin (since you had to do your own logo work, there is a good chance it will not be exactly the same). Minor variations aside, we should have something that looks much better than the skin with which we started. We have a larger logo with better spacing, a very faint border around the questions, an improved progress button, and a nicely-colored logo bar. We could also change the color of the “Survey Powered by Qualtrics” button, but it would cost you two bits.

You see now that just a little bit of coding can dramatically change the appearance of our survey. Again, I urge you to incorporate these chunks of code and experiment with them. You can get a pretty good preview of what your new background will look like within the Look & Feel box, so do not worry that you will break something. In the end, this should serve as an excellent entry point for messing with CSS. A great man (either a president, a French writer, or a comic book character, depending on who you ask) once said, “With great power, comes great responsibility.” This is sage advice that you should take to heart when altering the look of your surveys.