Journey

Already a member?

Click here to log in.

Customizing Your Survey With CSS

Journey gives you a great deal of flexibility for customizing the look and feel of your surveys. Using Cascading Style Sheets, you can override the visual styling of every element on the page.

This guide documents all the standard page elements Journey uses to display your survey, and gives suggestions on how to alter their styling.

  1. Page Layout
  2. Questions
  3. Display Elements
  4. Welcome Page
  5. Exit Page

Page Layout

These CSS classes are used for the overall layout and structuring of survey pages.

 <div class="answerpage">
   <div class="pagetitle">Demographic Information</div>
   <div class="pagecount">Page 1 of 3</div>

   ...

   <div class="navbuttons">
     ...
   </div>
</div>

.answerpage

The entire content area of the page is wrapped in a div with the class “answerpage”. You might want to override the background-color of this element, for example, or put a border around it. (Note that the body of the page is still visible by default, so this background-color will only apply to the content area within the page. You can also override the body background-color in a separate CSS rule.)

You can also use margins or absolute positioning on the .answerpage class to alter the overall layout. This is a particularly powerful technique in combination with custom HTML headers. For example, if you wanted to add an informational column on the left side of each page and put the survey content next to it, you could add the following HTML custom content:

<div id="leftcolumn">
  <h1>My company</h1>
  <p>A survey for customers</p>
  <p>Any questions?  Email <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>

And then the following CSS rules:

.answerpage {
  margin-left: 210px;
}

#leftcolumn {
  position: fixed;
  width: 200px;
  top: 5px;
  left: 5px;
}

.pagetitle

This contains the title of the page currently being answered. Common customizations to this might be altering the font color, size, or face.

.pagecount

In multi-page surveys, this contains the current page number as well as the total page count in the format “Page X of Y”. In single-page surveys, this element is not present.

.navbuttons

This is the area at the bottom of each page that contains the “Previous Page”, “Next Page”, “Finish”, and/or “Finish Later” buttons, depending on which are appropriate on the current page.

Questions

Each question in Journey is displayed in its own div. Within that div, there are two major sections:

The structure of the question looks roughly as follows (in a somewhat simplified version):

<div class="question even layout-left"> 
  <span class="questionandcaption"> 
    <label class="caption" for="question_1234">Gender</label>
    <span class="questionbody"> 
      <input id="question_1234" name="question[1234]" type="text" value="" /> 
    </span> 
  </span> 
</div>

Important classes are as follows:

.question

This wraps the entire question block.

.even and .odd

These alternate for each question within a section of the page. You can use this to achieve a “zebra-striping” effect, as the default Journey styling does like so:

.even { background-color: transparent; }
.odd  { background-color: #ddd; }

.layout-left and .layout-top

As of this writing, Journey supports two layouts for questions:

The styling that achieves these is somewhat complicated and we don’t recommend attempting to alter it without great care. However, if you wish to apply certain styles based on the layout of the question, you can use these classes as part of a CSS selector. For example, to add a black line above all layout-top questions:

.question.layout-top { border-top: 2px black solid; }

Display Elements

Static text labels and dividers are treated for display purposes as just another type of question. Static text labels have layout or caption:

<div class="question"> 
  <span class="questionandcaption"> 
    <span class="questionbody"> 
      On this page, please rate all aspects of the conference on a scale 
      from 1 to 5, with 1 being the worst and 5 being the best.
    </span> 
  </span> 
</div>

Dividers are similar, but their questionbody contains a single empty div with class “divider”:

<div class="question"> 
  <span class="questionandcaption"> 
    <span class="questionbody"> 
      <div class="divider"></div>
    </span> 
  </span> 
</div>

By default, dividers are styled as follows:

.divider { height: 1em; }

You can easily override the height of the divider, or do some more complex effects. For example, to make the divider appear as a blue 3-pixel line:

.divider {
   background-color: #00f;
   height: 3px;
   margin-top: 5px;
   margin-bottom: 5px;
 }

Welcome Page

The welcome page of a survey is very similar to the answer page, structurally speaking:

<div class="answerpage">
  <div class="pagetitle">My Survey</div>

  <p>Welcome to my survey!  I made it with Journey.</p>

  <p>Please fill out the following pages with great care.</p>

  <div id="questionnaire_startbox">
    <h3>Welcome!</h3>
    <p>Please sign in to Journey to take this survey.</p>
  </div>
</div>

Several things to note:

It’s important to take care when overriding the #questionnaire_startbox styling, as its appearance and content can vary dramatically form user to user. For example, one common CSS fragment used to make page text white-on-black:

* { color: #fff; }
body, .answerpage { background-color: #000; }
.answerpage { background-color: #222; }
.odd { background-color: #444; }
input, textarea, select { background-color: #000; }

This will make the #questionnaire_startbox unreadable in some cases, as its default styling uses a white background, and our first CSS rule sets all elements to use white text by default. It’s tempting to fix this as follows:

#questionnaire_startbox { background-color: #000; }

This will work in most cases, but the view that shows the user their previous responses to the survey uses a table whose rows are zebra-striped, so this will still produce unreadable text because of the background colors of the rows. A better fix in this case might be:

#questionnaire_startbox * { color: #000; }

Then all text in the #questionnaire_startbox will be black, as per Journey defaults, so the default UI colors will work without a problem.

Exit Page

The exit page of a survey does not currently use the .answerpage layout. Here is an example exit page:

<body>
  <h1>Thank you!</h1> 

  <p>You have successfully submitted your answers to the Conference Feedback survey.</p> 

  <ul>
    <li> 
      <a href="/answer/prompt/1234">Go back to the front page of this survey &raquo;</a> 
    </li> 
    <li> 
      <a href="/">Go to the main page of Journey &raquo;</a> 
    </li> 
  </ul>
</body>

This is not particularly styling-friendly. We hope to increase the stylability of the exit page in future updates to Journey.