Liveclicker allows you to create custom Liveclicker appearances using CSS.
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>LiveTrackers:
3. Click Add New +. A Window is loaded in which the proposed CSS code can be modified.
4. Start by naming the appearance.
5. Make the necessary changes in the CSS.
6. When done, click Add LiveTracker Appearance. The custom CSS can now be used in your LiveTracker 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 delivery state. Select a different delivery state (in transit, pre-shipping, delivered) from the drop-down to preview the LiveTracker element for that state.
LiveTracker CSS Selectors
There are additional classes added to td.delivery-summary and h3.status to allow for custom styling/messaging for the various delivery states, which include 'preshipping', 'intransit', 'outfordelivery', and 'delivered'.
Custom progress bar images
You can hide the default progress bar images and set your own using custom CSS like this, note that there is an 'active' and 'inactive' state for each individual bar:
.progress-bar img {
display:none; // hide default progress bar images
}
.progress-bar {
width:100px; // for example, if your custom progress bar images are 100px wide
height: 50px; // for example, if your custom progress bar images are 50px tall
}
.progress-bar{
background-image:url(path/to/your/image.jpg); // middle bar inactive state
}
.progress-bar.active {
background-image:url(path/to/your/image.jpg); // middle bar active state
}
.progress-bar.first {
background-image:url(path/to/your/image.jpg); // first bar inactive state
}
.progress-bar.first.active {
background-image:url(path/to/your/image.jpg); // first bar active state
}
.progress-bar.last {
background-image:url(path/to/your/image.jpg); // last bar inactive state
}
.progress-bar.last.active {
background-image:url(path/to/your/image.jpg); // last bar active state
}
