|
|
 |
Minimal customization
Some customizations to the default poll display must be made in order for polls to display properly. All customization of the QuickPolls display is done via Cascading Style Sheets (CSS). To learn more about CSS in general, visit the CSS Homepage. To learn about using Macromedia Dreamweaver to create and edit CSS stylesheets, see Dreamweaver MX: Styles and Behaviors.
To display poll results, a bar graph is used to show the relative popularity of each answer. Each bar in the graph can have a different color. Of course, it is ultimately up to the page designer to decide what colors should be used in the bar graph. For this reason, these colors must be explicitly specified. If they are not, the bars will not display at all.
Each bar in the graph is represented as an HTML table. Therefore, any of the CSS rules that can normally be applied to an HTML table can be applied to each bar in the graph. The bars are accessed using a CSS selector like the following:
#QP-answer-X
Where X is replaced with a positive integer. To access the first answer, you would replace the X with a 1, etc. To specify that certain answer's bar in the bar graph should be displayed with a certain color, you must add some CSS properties to the above selector, thus obtaining a CSS rule. For example:
#QP-answer-1 {background-color: red;}
This rule specifies that the first bar in the graph should display in red.
To complete the minimal customization necessary for proper poll display, specify as many colors as you need to. If you plan to have polls with no more than 10 answers, you need to specify a color for each of the 10 answers. You can either specify 10 unique colors or you can use 3 or 4 repeating colors (in fact, you can use as many—or as few—repeating colors as you wish). To repeat colors, use a comma separated list of CSS selectors. For example, to use the color red for answers 1, 3, and 5, use the following:
#QP-answer-1, #QP-answer-3, #QP-answer-5
{background-color: red;}
Adding QuickPolls Styles to your Page
You can add the styles described above to your QuickPolls page using either of two methods:
- Recommended: Add the styles to a central style sheet (.css file). You can add styles based on the example above to any CSS style sheet in your site, or you can copy and modify our example style sheet and add it to your site. To make your page use the style sheet, just add the following tag to your page within the <head> tag:
<link href="[path/filename.css]"
rel="stylesheet" type="text/css">
where path and filename are replaced by the path to your .css file.
- Document-level CSS: Add the styles to your page's source code. Do this by adding a <style> tag within your page's <head> tag, and make sure to put your styles within an HTML comments tag pair inside the <style> tag. For example, for a 5-question poll, you could add the following to the head section of your page:
<style><!--
#QP-answer-1, #QP-answer-3, #QP-answer-5
{background-color: red;}
#QP-answer-2, #QP-answer-4, #QP-answer-5
{background-color: yellow;}
--></style>
Further customization of your QuickPolls using CSS is optional. |
