Liveclicker allows you to create custom Liveclicker appearances using CSS. Custom appearances can be applied to Landing Page LivePolls and iOS Optimized Landing Page Livepolls.
Create a Custom CSS
There are 2 ways in which a new CSS can be configured:
From the Account Settings
1. To configure a new CSS, go to the Account Settings in the top menu, and then navigate to Realtime content>LivePoll:
2. Click Add New +. A Window is loaded in which the proposed CSS code can be modified.
3. Start by naming the appearance.
4. Make the necessary changes in the CSS.
5. When done, click Add LivePoll Appearance. The custom CSS can now be used in your LivePoll elements.
From the Liveclicker campaign
1. Click on the appearance drop-down and select Create new custom appearance.
2. Name your Custom Appearance. The CSS code editor is displayed.
3. Insert your custom CSS, and click the Save button.
4. The preview on the left can be adapted according to the type of LivePoll and the results.
LivePoll CSS Selectors
Below you find an overview of the different selectors used to reference specific sections in the LivePoll.
Special Note:
Customizing an iOS Optimized Landing Page LivePoll
If you are using an iOS Optimized Landing Page LivePoll, all potential poll results for each answer are delivered in the embed code as images and are shown dynamically depending on the vote. These images are in containers with class names like 'voteresult1', 'voteresult2', 'voteresult3', etc, that you can target via CSS.
For Example: You can hide the results images and set a custom background image on the .voteresult containers. To set a style on all of the results divs at once, you can use a selector like [class*="voteresult"].
Tips to Customize LivePolls with CSS
There are several ways that you can customize your LivePolls using CSS, here are some of the more common ways users like to tailor their content.
Remove the Numbering from LivePoll Answer Buttons
Apply the following code to your custom CSS if you would like to remove the numbering from the LivePoll answer buttons:
/*Hides the number of the answers and radio button*/
.liveclicker-livepoll .answer::before {
display: none;
}
a.answer.button::first-letter {
visibility: hidden;
}
/*Re-indents*/
a.answer.button {
text-indent: -23px;
}
Before:
After:
Note: This solution does not work on Internet Explorer.
Illustrate poll answers with custom images
You can add custom images to illustrate the possible poll answers by using the 'background-image' CSS rule.
To do so, make sure you do NOT target the <a> tag directly, as this is not supported on iOS devices.
Instead of using this selector:
.answers a {background-image:url(...)}Use this selector:
.answers .answer {background-image:url(...)}Which looks like this:
The way this works is that all of the answers are targeted to change the layout.
.answers .answer{
width:100%;
height:50px;
margin:0px;
padding:0px;
}Then each answer is targeted to set its background image.
.answers .answer:nth-child(1){
background-image:url(http://www.mysite.com/images/first.jpg);}
.answers .answer:nth-child(2){
background-image:url(http://www.mysite.com/images/second.jpg);}
...
Use CSS to manipulate & target the text in your LivePoll
Using multiple custom appearances and a little CSS magic, you can customize any of the text inputs.
For Example: To create a language-targeted call to action button, simply make the text input that you want to make dynamic blank .
And then use CSS like this to insert custom button text:
a#clickthrough::after{
content: "Button text here!";
display: block;
}You can then create a LivePoll version and corresponding custom appearance for each language you want to target and serve dynamic clickthrough buttons. This technique can be used for any of the text inputs available in the wizard.
Deliver different Clickthrough URLs depending on the LivePoll answer selection
Using LivePoll's Custom CSS option, you can set up your LivePoll element to deliver a different results image and/or different clickthrough URL depending on which LivePoll answer a user selects.
To do so you need to set up your LivePoll using a custom CSS appearance. Then, in the CSS for your chosen appearance, you need to add a section that looks like this:
.links {
link1: url("http://mysite.com/choice1");
link2: url("http://mysite.com/choice2");
link3: url("http://mysite.com/choice3");
}Then, when the user does a final clickthrough on the results page, if the user voted for poll selection 1, the user will be redirected to http://mysite.com/choice1.
If you omit a selection link, the user will be directed to the default clickthrough URL that is set up in the LivePoll wizard.
Note: This configuration will NOT work if you have your element set to NOT remember user interactions upon reopen. The multi-link feature only works when the vote that the opener has made is remembered.
Change the results image
You can change the results displayed depending on what is voted for.
.voteresult1 {
/* CSS here */
}
.voteresult2 {
/* CSS here */
}
.voteresultN {
/* CSS here */
}Or, change only the background image of the results.
[class*=voteresult] * {
display: none;
}
.voteresult1 {
background-image: url(..);
}
.voteresult2 {
background-image: url(..);
}
.voteresultN {
background-image: url(..);
}Vote result wrappers are given numerical class names that you can select in CSS like this:
.voteresult1 { color: red } .voteresult2 { color: blue } .voteresult3 { color: yellow }.
