Design

Guidelines
CSS guidelines for creating web, facebook and
mobile campaigns
1able of conLenLs
!"#$% '()*# +
Why use CSS and when? 3
LlsL of elemenLs LhaL can be changed Lhrough CSS on our plauorm 4
Changes relaLed Lo acuve area 3-11
Changes relaLed Lo buuon 12-16
Changes relaLed Lo fooLer llnks 17-26
Changes relaLed Lo elemenLs ln user !ourney pages 27-39
Changes relaLed Lo umed scored qulz 40-42
Changes relaLed Lo phoLo gallery 43-32
Use your own CSS files for design
?ou can use your own CSS le
for deslgn of Lhe enure
campalgn
1here are Lwo places ln
ulglbonus plauorm where
CSS le can be applled:
CSS le on ueslgn page: should be
used when you wanL Lo make
dlerenL deslgn for web/facebook or
moblle channels, or lf you're maklng
a global" change Lo Lhe enure
campalgn
CSS le on user !ourney pages: should
be used when you wanL Lo make
dlerenL deslgn per page (e.g. dlerenL
background of acuve area per page, or
dlerenL buuon per page).
1) SLep 1: creaLe a LexL le (any
name) wlLh only CSS code, no
headers or anyLhlng else. So lL ls
a plane CSS le (le musL have
exLenslon .css)
2) SLep 2: upload Lhe le ln
approprlaLe place on our
plauorm.
3) SLep 3: sLandard campalgn CSS
wlll work as before excepL LhaL
Lhe elemenLs LhaL have been
sLyled ln Lhe uploaded CSS now
correspond Lo Lhls new
formamng sLyle.
List of CSS elements that can be changed
Acuve area
! Wrapper of acuve area
! 8order of conLenL area
! Add lmage llke background of acuve area
! Add lmage llke background of conLenL area
user !ourney elemenLs:
Plde uLle on pages (reglsLrauon,
quesuonnalre, Lell a frlend, concluslon)
lnpuL elds
urop down menu (uLle, blrLhday day and
counLry drop down )
SLyle of muluple cholce- Slngle answer
dropdown quesuon
CenLer Muluple cholce-slngle answer radlo
buuon quesuon
SLyllng LexL lnslde Lhe lnpuL elds
! Change sLyle of progress bar ln 1lmed score qulz
8emove score polnLs from quesuonnalre page ln
score qulz campalgn
8uuon
! Add hover on buuon
! lonL sLyle and fonL slze on buuon LexL
looLer llnks
! 8ackground color of all fooLer llnks
! 8ackground and LexL color, fonL sLyle for
speclc fooLer llnk
! lonL color of some speclc fooLer llnk
! lonL color when hover on Lhe llnk
! lmage llke hover of some fooLer llnk
! lmage lnsLead of some fooLer llnk
! Plde fooLer llnks
! 8ackground color and border for LexL
boxes- 8ules, rlzes and Pelp
Callery
! 1lLle and descrlpuon eld aL upload
phoLo/vldeo quesuon
! 8ackground lmage for gallery
! Callery Lop
! Color of lllLer llnks and 8eLurn llnk
! SLyle of lmage block
! SLyle of lmage conLalner
! SLyle of aglng llnks
! 1ransparenL gallery background
! Seml-LransparenL gallery background
Changes related to active area
CSS Objective: Change wrapper of active area
Lxample: add background color and Lop rlghL border rounded by 30px and bouom le by 100px
CSS code:
#wrapper [
background-color: #0000,
border-radlus: 0 30px 0 100px,
-moz-border-radlus: 0 30px 0 100px,
-webklL-border-radlus: 0 30px 0 100px,
-khLml-border-radlus: 0 30px 0 100px,
}
Aer uslng CSS 8efore uslng CSS
CSS Objective: Add rounded borders for
content area in active area
Lxample:
CSS code:
#sLep [
background-color: #0000,
border-radlus: 20px,
-moz-border-radlus: 20px,
-webklL-border-radlus: 20px,
-khLml-border-radlus: 20px,
}
8efore uslng CSS Aer uslng CSS
CSS Objective: Add background image for
active area (content + margin (left and right))
8ackground lmage can elLher be locaLed on ouLslde u8L or you wlll need Lo upload your background lmage Lo our
plauorm . 8ecommended wldLh of background lmage for acuve area ls 440px (conLenL: 400px, margln-le: 20px and
margln-rlghL: 20px), and helghL depends of conLenL. Pow Lo upload a background plcLure Lo ulglbonus plauorm:
1. upload your lmage on ulglbonus plauorm uslng unyMC (on ueslgn page " lormaL background " P1ML zone-Show hLml edlLor "
lnserL lmage lcon " upload your plcLure " copy llnk of lmage )
2. lace Lhe llnk ln CSS code as shown below
,'' -.*# /)0 )$12# )% .3 4)2)5.36% 7(18.9$:;
body[
background-lmage:url("hups://s3.amazonaws.com/dlglbonus_medla/medla/aabg.[pg"),
}
8efore uslng CSS Aer uslng CSS
CSS Objective: Add background image for
active area (content-without margines)
8ackground lmage can elLher be locaLed on ouLslde u8L or you wlll need Lo upload your background lmage Lo our
plauorm . Pow Lo upload a background plcLure Lo ulglbonus plauorm:
1. upload your lmage on ulglbonus plauorm uslng unyMC (on ueslgn page " lormaL background " P1ML zone-Show
hLml edlLor " lnserL lmage lcon " upload your plcLure " copy llnk of lmage )
2. lace Lhe llnk ln CSS code as shown below
,'' -.*# /)0 )$12# )% .3 4)2)5.36% 7(18.9$:;
#wrapper [
background-lmage:url("hups://s3.amazonaws.com/dlglbonus_medla/medla/aa_sr.png"),
}
8efore uslng CSS Aer uslng CSS
Objective: Add background image for content
area
CSS code:
#sLep [
background-lmage: url("hups://s3.amazonaws.com/dlglbonus_medla/medla/aa_sr.png"),
}
8efore uslng CSS Aer uslng CSS
Objective: to add background transparency and
adjust its transparency level for active area
CSS code:
#wrapper [
background-color: #006600,
border-radlus: 30px 30px 30px 30px,
-moz-border-radlus: 30px 30px 30px 30px,
-webklL-border-radlus: 30px 30px 30px 30px,
-khLml-border-radlus: 30px 30px 30px 30px,
opaclLy:0.7,
lLer:alpha(opaclLy=70), /* lor lL8 and earller */
}
8efore uslng CSS Aer uslng CSS
Changes related to button
Objective: Add hover on the button (1)
noLe: helghL, llne-helghL, mln-wldLh and wldLh musL be seL Lo maLch added lmage
CSS code:
#buuon_dlv a.buuon span:hover [
background: url("hups://s3.amazonaws.com/dlglbonus_medla/medla/bouLonPover.png")
repeaL-x scroll 0 0 LransparenL,
helghL: 31px,
llne-helghL:31px,
mln-wldLh: 133px,
wldLh: 133px,
}
Pow Lo add hover on your buuon:
1. upload your hover buuon on ulglbonus plauorm uslng unyMC (on ueslgn page cllck on lormaL background-
cllck on P1ML zone-Show hLml edlLor-cllk on lnserL lmage lcon-upload your Pover buuon- copy llnk of Lhe
Pover lmage )
2. uL LhaL llnk ln Lhe CSS code showed above
3. Cn deslgn page upload your cusLom buuon
4. upload your CSS
Lxample: your cusLom buuon
, hover buuon
Objective: Add hover on the button (2)
8efore uslng CSS- page wlLh your cusLom buuon Aer uslng CSS- you have hover on Lhe buuon
Objective: Change font style and font size on button
text (1)
Lxample:
-fonL: Ceorgla
-fonL sLyle: lLallc
-fonL slze: 30px
CSS code:
a.buuon span [
helghL: 31px,
llne-helghL: 31px !lmporLanL,
mln-wldLh: 133px,
wldLh: 133px,
fonL-famlly:"Ceorgla", 1lmes, serlf,
fonL-sLyle:lLallc,
fonL-slze:30px,
}
Objective: Change font style and font size on button
text (2)
8efore uslng CSS Aer uslng CSS
Changes related to footer links
Objective: Change background color of all footer
links
CSS code:
#fooLer_llnks_wrapper [
background-color: #30A6C2,
}
8efore uslng CSS Aer uslng CSS
Objective: Change background and text color, change text style,
and positioning for Rules link
noLe: you can also make Lhese changes for oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you need Lo
puL rules_dlalog, and for rlzes llnk you need Lo puL #faqlnk.
CSS code:
#rules_dlalog [
background-color: #b70072,
color: #3987Cu !lmporLanL,
fonL-welghL: bold,
paddlng: 3px,
}
8efore uslng CSS
Aer uslng CSS
Objective: Change font color of Help link
noLe: you can also make Lhese changes for oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you
need Lo puL 8ules_dlalog, and for rlzes llnk you need Lo puL #faqlnk.
CSS code:
#helplnk:llnk [
color: #0000 !lmporLanL,
}
8efore uslng CSS Aer uslng CSS
Objective: Change text color for the hover on help
link
noLe: you can also make Lhese changes for oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you need Lo
puL rules_dlalog, and for rlzes llnk you need Lo puL #faqlnk.
CSS code:
#helplnk:hover [
color: #CC0033 !lmporLanL,
}
8efore uslng CSS
Aer uslng CSS
Objective: Add background image to be hover of
the help link
noLe: you can also lnserL hover lmage for oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you need Lo
puL rules_dlalog, and for rlzes llnk, you need Lo puL #faqlnk.
CSS code:
#helplnk:hover [
background: url("hups://s3.amazonaws.com/dlglbonus_medla/medla/bouLonPover.png")
no-repeaL scroll cenLer cenLer LransparenL,
}
8efore uslng CSS
Aer uslng CSS (when hover over Lhe help llnk)
Objective: Insert image for Help link
noLe: you can also lnserL lmage for oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you need Lo puL
rules_dlalog, and for rlzes llnk you need Lo puL #faqlnk.
CSS code:
#helplnk [
background-lmage: url("hup://www.salmee.com/wp-conLenL/uploads/2012/03/lcon_Pelp_128px.png?
9d7bd4"),
background-slze: 33px auLo,
background-posluon: cenLer cenLer,
background-repeaL: no-repeaL,
color: LransparenL !lmporLanL,
paddlng: 20px,
}
8efore uslng CSS
Aer uslng CSS
Objective: Hide Help link
noLe: you can also hlde oLher fooLer llnks. lor example: for 8ules , lnsLead of #helplnk you need Lo puL #rules_dlalog,
and for rlzes llnk you need Lo puL #faqlnk.
CSS code:
#helplnk [
dlsplay: none,
}
#fooLer_sep_3 [
dlsplay: none !lmporLanL,
}
8efore uslng CSS
Aer uslng CSS
Objective: Hide all Footer links
CSS: rsL soluuon or second soluuon:
#rules_dlalog, #faqlnk, #helplnk [ #fooLer[
dlsplay: none, dlsplay: none,
} }
#fooLer_sep_2, #fooLer_sep_3[
dlsplay: none !lmporLanL,
}
8efore uslng CSS
Aer uslng CSS
Objective: Style Rules, Prizes and Help text box- put
background color and border for box
CSS code:
#rules_LexL, #faq_LexL, #help_LexL [
background-color: #66CCll !lmporLanL,
border: 4px solld #0033ll,
border-radlus: 13px,
opaclLy: 0.9,
paddlng: 20px 10px, 10px,10px,
}
8efore uslng CSS Aer uslng CSS
Changes related to elements in
User Journey pages
Objective: : Hide title on pages (reg, qnnaire, tell
a friend, conclusion)
CSS code:
h2.vlew_uLle [
dlsplay: none,
}
8efore uslng CSS
Aer uslng CSS
Objective: Add border, shadow, and rounded
borders to all text and password input fields (1)
CSS code:
lnpuL:noL([Lype]), lnpuL[Lype="LexL"], lnpuL[Lype="password"], LexLarea, selecL [
border: 3px solld #0066CC,
-webklL-box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
-moz-box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
border-radlus: 3px,
-moz-border-radlus: 3px,
-webklL-border-radlus: 3px,
-khLml-border-radlus: 3px,
}
Objective: Add border, shadow, and rounded borders
to all text and password input fields (2)
8efore uslng CSS Aer uslng CSS
Objective: Change style of the drop down menu
(title, birthday day and country fields) (1)
CSS code:
.dob_dropdown, #counLry, #reglsLrauon_dob_day, #reglsLrauon_dob_monLh, #reglsLrauon_dob_year [
border: 3px solld #f,
-webklL-box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
-moz-box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
box-shadow:
lnseL 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1),
background: rgba(233,233,233,0.3),
}
Objective: Change style of the drop down menu
(title, birthday day and country fields) (2)
8efore uslng CSS Aer uslng CSS
Objective: Change style of the drop down menu for
Multiple choice- Single answer dropdown question (1)
CSS code:
.newLlsLSelecLed [
border: 3px solld #f,
-webklL-box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
-moz-box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
background: rgba(233,233,233,0.3),
wldLh: 192px, /* orlglnal wldLh ls 198px, lf border ls added wldLh musL be decreased by le and rlghL
border comblned */
}
Objective: Change style of the drop down menu for
Multiple choice- Single answer dropdown question (2)
8efore uslng CSS Aer uslng CSS
Objective: Styling text inside the input fields
noLe: ?ou can also sLyle LexL ln dropdowns ( .dob_dropdown, #counLry, #reglsLrauon_dob_day,
#reglsLrauon_dob_monLh, #reglsLrauon_dob_year) and for quesuons whlch have dropdown llsL of answers
( .newLlsLSelecLed).
CSS code:
lnpuL:noL([Lype]), lnpuL[Lype="LexL"], lnpuL[Lype="password"][
fonL-famlly: Comlc Sans MS,
fonL-slze: 130,
fonL-sLyle: lLallc,
fonL-varlanL: small-caps,
fonL-welghL: bold,
}
8efore uslng CSS Aer uslng CSS
Objective: Style title and description field at upload photo/
video question (1)
CSS code:
.medla_descrlpuon , .medla_uLle[
border: 3px solld #f,
-webklL-box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
-moz-box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
box-shadow:
lnseL 0 0 8px rgba(123,123,123,1),
0 0 16px rgba(123,123,123,1),
background: rgba(233,233,233,0.3),
wldLh: 192px,
}
Objective: Style title and description field at upload photo/
video question (2)
8efore uslng CSS Aer uslng CSS
Objective: Center Multiple choice-single answer radio button
question
CSS code:
.quesuon_unlL [
margln-le: 10,
LexL-allgn: cenLer,
wldLh: 80 !lmporLanL,
}
.quesuon_unlL p [
margln-bouom: 10px !lmporLanL,
}
.columns_1 [
paddlng-le: 43,
margln-bouom: 3px !lmporLanL,
}
.columns_1_label [
wldLh: auLo !lmporLanL,
}
8efore uslng CSS
Aer uslng CSS
Objective: Remove score points from questionnaire page in
score quiz campaign
CSS code:
#score_holder [
dlsplay: none,
}
8efore uslng CSS
Aer uslng CSS
Changes related to timed scored
quiz
Objective: Change style of progress bar in Timed score quiz (1)
Lxample : 8ackground color of Lhe bar ls whlLe (#), wldLh of bar ls 390px, background of unchanged
box ls green (#226339), and for changed box ls yellow (#fdcf46).
CSS code:
#counLdown [
oaL: none !lmporLanL,
}
#progress_conLalner [
box-shadow: 3px 3px 3px #999,
background-color: #f,
paddlng: 4px 0 4px 3px,
wldLh: 390px,
}
#progress_conLalner span.unchanged [
background-color: #226339 !lmporLanL,
border: 1px solld #226339 !lmporLanL,
margln-rlghL: 4px !lmporLanL,
helghL: 4px,
wldLh: 17px,
}
#progress_conLalner span.changed [
background-color: #fdcf46 !lmporLanL,
border: 1px solld #fdcf46 !lmporLanL,
}
Objective: Change style of progress bar in Timed score quiz (2)
8efore uslng CSS Aer uslng CSS
Changes related to photo gallery
Objective: Transparent gallery background
CSS code:
#gallery [
background-color: LransparenL !lmporLanL,
}
8efore uslng CSS Aer uslng CSS
Objective: Semi-transparent gallery background
CSS code:
#gallery [
background-color: rgba(233,233,233,0.3) !lmporLanL,
}
8efore uslng CSS Aer uslng CSS
Objective: Add background image for gallery
CSS code:
#gallery [
background-lmage: url("hups://s3.amazonaws.com/dlglbonus_medla/medla/aa_sr.png"),
}
8efore uslng CSS Aer uslng CSS
Objective: Style gallery top
CSS code:
.gallery_Lop [
background-color: #b70072,
paddlng-bouom: 3px,
}
8efore uslng CSS Aer uslng CSS
Objective: Change color of Filter links and Return link in gallery
CSS code:
#gallery_welcome_message, #close_gallery, .lLers [
color: #CC3300,
}
8efore uslng CSS Aer uslng CSS
Objective: Change style of image block in gallery
Lxample: color of Lhe border ls #b70072 and wldLh ls 2px
CSS code:
.lmage_block [
border: 2px solld #b70072,
border-radlus: 3px,
}
8efore uslng CSS Aer uslng CSS
Objective: Change style of image container in gallery
Lxample : 8ackground color of conLalner ls #33ll66, background color of border ls #009966, and border wldLh ls 3px.
CSS code:
.lmage_conLalner [
background-color: #33ll66,
border: 3px solld #009966,
border-radlus: 3px,
}
8efore uslng CSS Aer uslng CSS
Objective: Change style of Paging links in gallery
Lxample : Color of fonLs ls plnk ( #b70072) , and background color of paglng buuons are green (#66ll99)
CSS code:
.paglng_llnk a:llnk, .paglng_llnk a:vlslLed, .paglng_llnk a:acuve [
background-color: #66ll99,
background-lmage: -webklL-gradlenL(llnear, 0 0, 0 100, color-sLop(1, #66ll99), color-sLop(13, #66ll99)),
background-lmage: -webklL-llnear-gradlenL(Lop, #66ll99 1, #66ll99 13),
background-lmage: -moz-llnear-gradlenL(Lop, #66ll99 1, #66ll99 13),
background-lmage: -o-llnear-gradlenL(Lop, #66ll99 1, #66ll99 13),
background-lmage: llnear-gradlenL(#66ll99 1, #66ll99 13),
color: #b70072,
}
8efore uslng CSS
Aer uslng CSS
Objective: Change position of gallery button if using Single
HTML mechanism
CSS code:
#gallery_llnk [
paddlng-Lop: 130px !lmporLanL,
}
8efore uslng CSS Aer uslng CSS