Use the css
and pagecss
tags to customize the look and feel of a specific question/table or survey page.
'css' tag applied to a single widget
1. What is your name?
type: text
css: div.i-questext {font-size: 40px}
'pagecss' tag applied to the survey page
2. Why do you feel this way?
type: textbox
pagecss: div.i-questext {font-weight: bold; color: blue;}
2B. Will you ever change your mind?
ap: n
type: text
Tip! It is generally preferred to put custom CSS in the local.css file in your survey if possible.
Details
- A
css
tag on a widget only applies to that widget. This means, for example, you could target a CSS selector to style the question text on a specific question. - A
pagecss
tag applies styling to the entire survey web page on which the parent widget resides. This means, for example, you could target a CSS selector and style the question text on a specific question, and it would also style other questions or any other text on the page. - When using the
css
tag, the CSS selector for the parent element ID, the "wrapper," and everything needed to target the specific element is automatically added for you. This makes it possible for yourcss
tag rule to only affect the specified element. - The
css
andpagecss
tags can support multiple rules. - You can reference CSS files hosted in your survey or another survey's Files applet using the
@import
statement on apagecss
tag.
Tip! Use your browser's developer tools to "inspect" the element on the screen that you wish to modify. Find the <div>
class (and if needed, label
) for the element. Then, reference the IntelliSurvey syntax for that element in your css
or pagecss
tag.
Additional examples
Applying multiple rules
The <div>
with the i-questext
class (question text) has 200% font size and is brown. To style other elements differently, use a label
to apply specific rules. In the example below, label[for='Q2-1']
sets option 1 of Q2 to orange, while the same syntax makes option 2 green.
Styling a contratext table with 'css'
In the example below, we use the css
tag to style the headings in a "contratext" table with bold font.
Styling a MaxDiff with 'pagecss'
Unlike the regular css
tag, the pagecss
tag does not automatically contain the parent element selector. Therefore the styling rules affect every matching element on the page.
In this example, we use the pagecss
tag to target all the answer options in a MaxDiff exercise. The rule colors the 'most' cells green and the 'least' cells red.
Referencing other CSS files
Instead of using local.css, you can reference CSS files hosted in your survey's Files applet using the @import
statement. In the code below, every page within the 'inside' start group
will use the alt.css file.
start group: inside pagecss: @import url("/s/[* appid() *]/alt.css");
...survey content here
end group: inside
Comments
0 comments
Please sign in to leave a comment.