Now that you’ve defined your placement, it’s time to make it beautiful! We’re talking colors, font, and so much more. You can customize as much (or as little) as you’d like.
1. Name your theme. Make it descriptive and unique so you know exactly what the theme is when you revisit a year or two down the road.
2. Describe your theme. Make it memorable and meaningful. Use identifying information like date, location, button color, font sizes, and so forth.
3. Choose which of ZAN’s placement enhancing features you want to include in your theme. You have a bunch of options to choose from: headers (headline, sub-headline), progression (question counter, time estimation), and link out only features (call to action button, skip text).
4. Write some CSS for your theme to customize the presentation of questions and campaigns in your placement. Stylize your theme to perfectly blend in with your site. Before you get started on writing your CSS, reference our Theme Breakdown for CSS styling.
NOTE: Don’t want to customize your placement’s theme just yet? Go ahead and use the starter CSS provided to you when you add a new theme!
5. Preview your theme!
6. Once you’re satisfied with what your theme looks like, hit ‘Save’.
Important: Once you save your theme you can not edit it.
The first thing you need to style is the structure of your placement. This includes the placement’s container and specifying the font family you will be using.
Helpful Hint: Use a single google font to help your placement load quickly.
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
/* Structure Styles */
#zeeto {
font-family: 'Source Sans Pro', sans-serif;
}
#zan-placement-container {
margin: 0 auto;
max-width: 960px;
padding: 15px;
}
Help tie the placement to the experience your visitor will have on your website by including a headline. A well-written headline can help improve a placement’s overall performance. Personalize your headline or sub-headline by including the syntax ${firstName} and ZAN will automatically insert your visitor’s first name.
Example: Hey there ${firstName}, please answer some questions before continuing.
.zan-placement-headline {
color: #3a3a3a;
font-size: 24px;
font-weight: 600;
margin: 0;
text-align: center;
}
If you have more to say to your visitors? Use a sub-headline. Reference above if you want to include the visitor’s first name in your sub-headline!
.zan-placement-subheadline {
color: #969696;
font-size: 16px;
font-weight: 400;
margin: 0 0 20px;
text-align: center;
}
Let your visitors know the progress they’ve made and how many more questions they need to answer before they’re done. This can help with overall progression. If you turn question counter on, choose the text that will display. The number of questions is dynamic and will vary with each visitor.
.zan-progression-component-container {
font-size: 14px;
text-align: center;
}
.zan-progression-question-counter {
font-weight: 600;
margin: 0 auto;
}
Tell your visitors the average amount of time it takes to complete the placement. This helps inform the visitor that the placement can be completed quickly, potentially increasing progression. If you turn time estimation on, choose the text you want to display. The amount of time is dynamic and will vary with each visitor.
.zan-progression-time-estimation {
color: #969696;
font-style: italic;
margin: 0;
font-weight: 400;
}
.zan-separator {
margin: 0 0 20px;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 20px;
}
Customize how questions and answers will be displayed in your placement. We recommend adding multiple themes with different styles to see what works best!
/* Question Styles */
.zan-question, .zan-headline {
color: #3a3a3a;
font-weight: 600;
}
.zan-headline {
margin: 18px 0 12px;
}
.zan-question {
font-size: 18px;
margin-bottom: 20px;
}
.zan-answer-label {
background-color: #e8e8e8;
border-radius: 59px;
cursor: pointer;
display: block;
font-size: 15px;
margin-bottom: 15px;
padding: 16px 25px;
}
It’s important to give your mobile visitors feedback that lets them know an answer has been selected or a button has been touched.
/* Touch Detection Styles */
.zan-no-touch-device .zan-answers li.zan-answer label:hover {
background: #29a64b;
color: #ffffff;
}
.zan-no-touch-device .zan-answers li.zan-answer label:active {
background: #0e792a;
color: #ffffff;
}
.zan-touch-device .zan-answer-label:focus,
.zan-touch-device .zan-answer-label:active {
background: #0e792a;
color: #ffffff;
}
.zan-answer-label:active {
background-color: #0e792a;
color: #ffffff;
}
.zan-body {
color: #3a3a3a;
margin: 12px 0;
}
.zan-answers {
list-style: none;
padding: 0;
margin: 0;
}
.zan-input {
display: none;
}
.zan-component-container, .zan-campaign-container {
box-sizing: content-box;
}
The skip question feature is turned off or on within your placement’s monetization settings.
When styling your “Skip” be sure to remove any styling you add to question answers. ex – border, box-shadow…etc
/* Specific for zan question component skip */
.zan-no-touch-device .zan-answers .zan-answer .zan-answer-label.zan-answer-label-skip:hover,
.zan-no-touch-device .zan-answers .zan-answer .zan-answer-label.zan-answer-label-skip:active,
.zan-touch-device .zan-answers .zan-answer .zan-answer-label.zan-answer-label-skip:hover,
.zan-touch-device .zan-answers .zan-answer .zan-answer-label.zan-answer-label-skip:active{
background: transparent;
color: #969696;
}
.zan-body {
color: #3a3a3a;
margin: 12px 0;
}
.zan-answers {
list-style: none;
padding: 0;
margin: 0;
}
.zan-input {
display: none;
}
.zan-component-container, .zan-campaign-container {
box-sizing: content-box;
}
Simple Opt-In campaigns, both email and phone (aka TCPA), include an image, creative headline, body copy, and a ‘Yes’ and ‘No’ button. Simple Opt-In Phone campaigns also include legal TCPA copy.
/* SOI TCPA Styles */
.zan-soi-campaign-container,
.zan-tcpa-campaign-container {
border: 2px dashed #969696;
min-height: 190px;
margin-bottom: 20px;
padding: 20px;
position: relative;
}
.zan-soi-img-container,
.zan-tcpa-img-container {
height: 60px;
width: 120px;
margin: 0 auto;
}
.zan-soi-img,
.zan-tcpa-img {
margin: 0 auto 10px;
width: 120px;
height: 60px;
}
.zan-soi-campaign-container .zan-details,
.zan-tcpa-campaign-container .zan-details {
margin-left: 0;
margin-top: 79px;
}
.zan-inputs {
left: 0;
position: absolute;
text-align: center;
top: 93px;
width: 100%;
}
.zan-label {
border-radius: 100px;
cursor: pointer;
display: inline-block;
font-size: 18px;
line-height: normal;
margin: 5px 10px 10px 5px;
max-width: 100%;
padding: 10px 0;
text-align: center;
width: 36%;
}
.zan-label-yes {
background-color: #29a64b;
color: #ffffff;
}
.zan-label-yes:focus,
.zan-label-yes:hover {
background-color: #1d8a3a;
}
.zan-label-yes:active {
background-color: #0e792a;
}
.zan-label-no {
border: 1px solid #d1d1d1;
color: #3a3a3a;
}
.zan-label-no:focus,
.zan-label-no:hover,
.zan-label-no:active {
background-color: #d1d1d1;
}
.zan-tcpa-input {
border: 1px solid #afafaf;
border-radius: 2px;
font-size: 11px;
margin: 0 3px;
padding: 1px 3px;
width: 87px;
}
.zan-tcpa-info {
color: #919191;
font-size: 14px;
margin: 6px 0 0;
}
.zan-tcpa-input:focus {
outline: none;
}
.zan-tcpa-input-valid {
border-color: #afafaf;
}
.zan-tcpa-input-invalid {
border-color: #c2453f;
}
.zan-label.disabled {
cursor: not-allowed;
opacity: 0.6;
}
Advertisers can upload a variety of creative sizes and we’ve written the following style to accommodate them. We don’t recommend altering the following CSS drastically.
/* Linkout Styles */
.zan-linkout-campaign-container {
position: relative;
text-align: center;
}
.zan-linkout-img-container {
height: auto;
max-width: 940px;
margin: 0 auto;
width: 100%;
}
.zan-linkout-img {
max-width: 100%;
height: auto;
width: auto;
}
.zan-linkout-img:hover {
cursor: pointer;
}
.zan-linkout-campaign-container .zan-inputs {
position: relative;
margin: 25px auto 0;
top: 0;
}
Some advertisers include a call to action on their creatives and others don’t. To increase the opportunity of Link Out campaign conversions within your placement, we suggest having a button appear below each creative. When setting up your theme you can decide what you want your button to say and if you want an arrow on your button or not.
.zan-linkout-cta {
background-color: #29a64b;
border: none;
border-radius: 50px;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 10px 20px 10px;
text-transform: uppercase;
width: auto;
}
.zan-linkout-cta:focus,
.zan-linkout-cta:hover {
background-color: #1d8a3a;
cursor: pointer;
}
.zan-linkout-cta:active {
background-color: #0e792a;
}
.zan-cta-text {
vertical-align: middle;
}
.zan-cta-icon {
font-size: 20px;
margin-left: 12px;
vertical-align: middle;
}
Beneath a Link Out, visitors will see a line of text that will allow them to skip that campaign. When setting up your theme choose which skip text to show your visitors.
.zan-linkout-cta {
background-color: #29a64b;
border: none;
border-radius: 50px;
color: #fff.zan-label.zan-label-skip,
.zan-answer-label-skip {
color: #969696;
display: block;
font-size: 14px;
margin: 35px auto 10px;
padding: 0;
background-color: transparent;
text-align: center;
}
.zan-label-skip:hover,
.zan-label-skip:active,
.zan-answer-label.zan-answer-label-skip:hover,
.zan-answer-label.zan-answer-label-skip:active {
text-decoration: underline;
background-color: transparent;
color: #969696;
}
font-size: 14px;
font-weight: 400;
padding: 10px 20px 10px;
text-transform: uppercase;
width: auto;
}
.zan-linkout-cta:focus,
.zan-linkout-cta:hover {
background-color: #1d8a3a;
cursor: pointer;
}
.zan-linkout-cta:active {
background-color: #0e792a;
}
.zan-cta-text {
vertical-align: middle;
}
.zan-cta-icon {
font-size: 20px;
margin-left: 12px;
vertical-align: middle;
}
In order to make sure your placement will look its best on every type of device include the following in your theme’s CSS.
/********************************************
MIN-WIDTH 600PX
********************************************/
/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
.zan-soi-campaign-container .zan-inputs,
.zan-tcpa-campaign-container .zan-inputs {
position: absolute;
margin-left: 20px;
max-width: 120px;
top: 95px;
width: 100%;
}
.zan-soi-campaign-container .zan-details,
.zan-tcpa-campaign-container .zan-details {
margin: 0 0 0 145px;
}
.zan-soi-campaign-container .zan-headline,
.zan-tcpa-campaign-container .zan-headline {
font-size: 21px;
margin: 0;
}
.zan-soi-img-container,
.zan-tcpa-img-container {
float: left;
margin: 0 25px 25px 0;
}
.zan-label {
width: 100%;
margin: 5px 0 10px;
padding: 11px 0;
}
.zan-linkout-campaign-container .zan-inputs {
margin: 40px auto 0;
}
.zan-label.zan-label-skip {
margin: 35px auto 10px;
}
.zan-cta-icon {
font-size: 23px;
}
.zan-linkout-cta {
font-size: 18px;
padding: 10px 20px 11px;
}
}
/********************************************
MIN-WIDTH 768PX
********************************************/
/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
.zan-placement-headline {
font-size: 30px;
}
.zan-placement-subheadline {
font-size: 20px;
margin: 0 0 35px;
}
.zan-progression-component-container {
font-size: 16px;
}
.zan-answer-label {
padding: 15px 25px;
font-size: 16px;
}
.zan-question {
font-size: 21px;
margin: 0 0 30px;
}
.zan-separator {
margin: 0 0 30px;
}
}
/* Clear all browser default outlines */
*:focus {
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
