Styles How to

This section provides snippets of HTML that you can use in your Style Templates to achieve various effects.

Form Style Templates:


To show results in a pop-up window after a vote,
like this:

In a copy of the Standard_ template, modify the <form> tag to read:
<form method="get" action="[/vwfservlet]" target="resWin" onSubmit="window.open('','resWin','resizable=yes,scrollbars=yes,width=300,height=300')" >
Note that method="get" is preferred for short forms.

   To use a graphic vote button,
like this:

In a copy of the Standard_ template, find the line that defines the Submit button,
and replace it with:
<input type="image" src="http://.../VoteButton.gif" name="image" width="47" height="21">

To create a link that takes you right to the Edit Style Template page in the Poll Page

In a copy of the Standard_ template, between the <vwf=pollform> and <vwf=endpollform> tags, add:
<tr><td colspan="3" align="right"> <a href=[/vwfservlet]?cmd=dfstyleed&templatename=[/pollstyleid]&spotname=[/spotname] target="vwfstylewin"> Edit Style Template</a></td></tr>

To show the time remaining to vote

Add the following to your template. Many variations are possible. This displays either "3 minutes remaining", "1:34 remains", or "15 seconds remaining", as closing time nears.
This should be used with the cmd=getpoll API.

[/ifremaining,minutes,gt,1] [/remaining,minutes] minutes remain [/endifremaining] [/ifremaining,minutes,eq,1] 1:[/remaining,seconds] remains [/endifremaining] [/ifremaining,minutes,lt,1] [/remaining,seconds] seconds remain [/endifremaining]

Results Style Templates:

To show multiple result color bars using a graphic instead of a colored bar,
like this

The EmbeddedResults template does this. If you need a whole page template rather than a fragment, copy this template and add:
<head></head><body> at the top and </body> at the bottom, plus any other enhancements.
Then change the template in the place, and go to the response page. Change the color bar default colors to a combination of Red, Green, Blue, Black, and Mag. See also the next tip for more information.

To show the result bars using a graphic instead of a colored bar,
like this: or like this:

In a copy of the Results template, replace the HTML between [/ashowpctbar] and [/endashowpctbar]
with: <td><img src="http://..../PurpleBar.gif" width="[/apct]" height="20" ></td>
or: <td><img src="http://..../pixelRed.gif" width="[/apct]" height="10" ></td>
Note that PurpleBar is 20 pixels high by 1 pixel wide, but pixelRed.gif is only 1 pixel high by 1 pixel wide. This takes advantage that browsers expand the image to fill the designated area. Use an absolute URL to the ViewsFlash server for best performance.

To show a graphic next to the top 3 vote getters

Add the following to your template. This will display crown.gif only for the top 3 contenders. In the response page, choose Most Popular First.
[/ifmeasure,^,*,rank,le,3] <img src="http://.../crown.gif">[/endifmeasure]

To show the time remaining to vote

Add the following to your template. Many variations are possible. This displays either "3 minutes remaining", "1:34 remains", or "15 seconds remaining", as closing time nears.

[/ifremaining,minutes,gt,1] [/remaining,minutes] minutes remain [/endifremaining] [/ifremaining,minutes,eq,1] 1:[/remaining,seconds] remains [/endifremaining] [/ifremaining,minutes,lt,1] [/remaining,seconds] seconds remain [/endifremaining]

   To show the vote count only after it gets to be larger than 100,
like this:100 votes

In a copy of the Results template, add the following table row near the bottom of the table:
<tr align="center"><td>[/ifpollcount,100][/pollcount] votes[/endifpollcount]</td></tr>

To include a Close Window message in a pop-up,
like this:   Close window

In a copy of the Results template, add the following table row near the bottom of the table:
<tr align="center"><td> <a href="" onClick="window.close()">Close window</a></td></tr>

To create a link that takes you right to the Edit Style Template page from the Results page:

In a copy of the Results template, between the <vwf=rsltform> and <vwf=endrsltform> tags, add:
<tr><td colspan="3" align="right"> <a href=[/vwfservlet]?cmd=dfstyleed&templatename=[/pollstyleid]&spotname=[/spotname] target="vwfstylewin"> Edit Style Template</a></td></tr>

	To show results in a pop-up window after a vote, like this:
	In a copy of the Standard_ template, modify the <form> tag to read: <form method="get" action="[/vwfservlet]" target="resWin" onSubmit="window.open('','resWin','resizable=yes,scrollbars=yes,width=300,height=300')" > Note that method="get" is preferred for short forms.
	To use a graphic vote button, like this:
	In a copy of the Standard_ template, find the line that defines the Submit button, and replace it with: <input type="image" src="http://.../VoteButton.gif" name="image" width="47" height="21">

	To create a link that takes you right to the Edit Style Template page in the Poll Page
	In a copy of the Standard_ template, between the <vwf=pollform> and <vwf=endpollform> tags, add: <tr><td colspan="3" align="right"> <a href=[/vwfservlet]?cmd=dfstyleed&templatename=[/pollstyleid]&spotname=[/spotname] target="vwfstylewin"> Edit Style Template</a></td></tr>

	To show the time remaining to vote
	Add the following to your template. Many variations are possible. This displays either "3 minutes remaining", "1:34 remains", or "15 seconds remaining", as closing time nears. This should be used with the cmd=getpoll API. [/ifremaining,minutes,gt,1] [/remaining,minutes] minutes remain [/endifremaining] [/ifremaining,minutes,eq,1] 1:[/remaining,seconds] remains [/endifremaining] [/ifremaining,minutes,lt,1] [/remaining,seconds] seconds remain [/endifremaining]

	To show multiple result color bars using a graphic instead of a colored bar, like this
	The EmbeddedResults template does this. If you need a whole page template rather than a fragment, copy this template and add: <head></head><body> at the top and </body> at the bottom, plus any other enhancements. Then change the template in the place, and go to the response page. Change the color bar default colors to a combination of Red, Green, Blue, Black, and Mag. See also the next tip for more information.

	To show the result bars using a graphic instead of a colored bar, like this: or like this:
	In a copy of the Results template, replace the HTML between [/ashowpctbar] and [/endashowpctbar] with: <td><img src="http://..../PurpleBar.gif" width="[/apct]" height="20" ></td> or: <td><img src="http://..../pixelRed.gif" width="[/apct]" height="10" ></td> Note that PurpleBar is 20 pixels high by 1 pixel wide, but pixelRed.gif is only 1 pixel high by 1 pixel wide. This takes advantage that browsers expand the image to fill the designated area. Use an absolute URL to the ViewsFlash server for best performance.

	To show a graphic next to the top 3 vote getters
	Add the following to your template. This will display crown.gif only for the top 3 contenders. In the response page, choose Most Popular First. [/ifmeasure,^,*,rank,le,3] <img src="http://.../crown.gif">[/endifmeasure]

	To show the time remaining to vote
	Add the following to your template. Many variations are possible. This displays either "3 minutes remaining", "1:34 remains", or "15 seconds remaining", as closing time nears. [/ifremaining,minutes,gt,1] [/remaining,minutes] minutes remain [/endifremaining] [/ifremaining,minutes,eq,1] 1:[/remaining,seconds] remains [/endifremaining] [/ifremaining,minutes,lt,1] [/remaining,seconds] seconds remain [/endifremaining]
	To show the vote count only after it gets to be larger than 100, like this:100 votes
	In a copy of the Results template, add the following table row near the bottom of the table: <tr align="center"><td>[/ifpollcount,100][/pollcount] votes[/endifpollcount]</td></tr>

	To include a Close Window message in a pop-up, like this: Close window
	In a copy of the Results template, add the following table row near the bottom of the table: <tr align="center"><td> <a href="" onClick="window.close()">Close window</a></td></tr>

	To create a link that takes you right to the Edit Style Template page from the Results page:
	In a copy of the Results template, between the <vwf=rsltform> and <vwf=endrsltform> tags, add: <tr><td colspan="3" align="right"> <a href=[/vwfservlet]?cmd=dfstyleed&templatename=[/pollstyleid]&spotname=[/spotname] target="vwfstylewin"> Edit Style Template</a></td></tr>