Tutorial Categories

CSS Template Hooks Tutorial

Updated: 04/17/2013

What is CSS Template Hook?

CSS Template Hooks allow you to set up a "hook" on a specific question (or action) that you can then apply CSS to in your survey's theme settings.

More technically speaking, a hook is a text string that is added to the question's outer-most div that you can then use to apply CSS to anything inside the question. With a little CSS knowledge you can take control of the way your survey is formatted on a question by question basis.

What can I use CSS Template Hook for?

Removing (or adding) borders
Changing Text Size or Color
Hiding Elements
Formatting Tables
Etc...(The possibilities are endless!)

What is CSS?

CSS or Cascading Style Sheets allows you to customize the way your web page appears. It is called "cascading" style sheets because you can add as many as you'd like as long as they do not conflict with one another.

Do I need to know CSS for this?

If you're trying to do really complex stuff, then yes. However, we have a number of pre-made hooks available. If you're only really looking to do these simpler things, then you don't need to know CSS. You can just copy and paste what! Please see the "Related Articles" section for more information.

Note: We are a self service tool so our regular support team does not have as much advanced training in CSS as say our Professional Services Department (unless they are CSS template Hook related). To learn more about CSS, please visit this excellent resource for self-teaching CSS: http://www.w3schools.com/css/default.asp.

How do I set up a CSS Template Hook?

In this example, we'll be walking through how to hide a question title.

Setting up a Hook

Our very first step is to set up the CSS Template hook within the question you want to adjust.

1. Edit the question you'd like to affect with CSS

2. Scroll to the Look and Feel section of the question editor

3. Enter your hook in the Template CSS Hook field and click Save Question

Your hook can be anything in plain words. If you're trying to hide something, you might want to call it "hide" or "hidetitle" or something like that -- anything that means something to you! It's really just a reference point for the CSS in the theme to connect to.

TIP: You can have multiple hooks in one question, separated by a space. So if you have two hooks, "hide" and "another hook" you'd have:

Note: We have some pre-made CSS hooks available for you to use. These are listed below in the Related Articles section.

Setting Up Your CSS

1. Go to Preview Survey > Advanced

2. Select the Append option (The append option will append your CSS code to the existing survey CSS)

Note: If you are a seasoned HTML/CSS writer, or have already made adjustments to your theme you can use the Replace tab instead.

3. Enter the CSS code in the Append Styles (CSS) field

You want to start off your CSS with:

.xxx

You would replace xxx with whatever template hook you created. In this instance it would be the following:

.hide

From there, you're going to want to add the actual CSS

For this example, we're going to be hiding the question title, so we'll need to add a selector (in this case this will be the div class for question title), and declaration (to learn more, please visit: http://www.w3schools.com/css/css_syntax.asp)

.sg-question-title {display:none;}

When finished, it will look like this:

.hide .sg-question-title {display:none;}

4. After you've added the appropriate code to the Append section, click Save

5. Preview your survey - your question title should now be hidden:

How to find the CSS selector?

If you work with CSS a lot, you most likely have a web developer tool that you use to find these selectors. We recommend using either FireBug (Firefox) or WebDevelopers (for Chrome or Firefox).

Using one of these tools, you can find the selector by completing the following steps:

1. Preview your survey

2. Right click the element you want to find the selector for (in this example, the Question Title), and click Inspect Element

3. The div class should automatically highlight. This is how you can tell what element you'll need to use as your selector. In this instance it is sg-question-title. Always make sure when creating your selector to only use a period '.' for class and a pound sign '#' for ids.

Reference Materials:

What's the difference between a Class selector and an ID selector?

Please refer to http://www.w3schools.com/css/css_id_class.asp for more information.

Useful Terms

Class: This is used to designate a style for a group of elements. (To learn more, see: http://www.w3schools.com/css/css_id_class.asp).

ID: This is used to designate a style for just a single element on your site. (To learn more, please see: http://www.w3schools.com/css/css_id_class.asp).

Selector: This is the HTML element that you're looking to style. This is generally a class or id.

Declaration: This is what defines the styles you're applying. It consists of a property and a value in the following format: {property:value;}

Property: This is similar to an HTML tag, it is what defines how the styles in your CSS should look to the web.

Value: This section defines what you'd like the property to do. So for example, if you are trying to change a color (property) to red, you'd indicate: {color:red;}

CSS Syntax

If you're adding multiple css styles to a css line, please be sure to always end your value with a semi colon and separate your property and value with a colon.

For example: