Css Guide Fr

Design Guidelines

CSS guidelines for creating web, facebook and mobile campaigns

Table of contents

Items Slide #

Why use CSS and when? 3

List of elements that can be changed through CSS on our pla=orm 4

Changes related to ac?ve area 5-‐11

Changes related to buDon 12-‐16

Changes related to footer links 17-‐26

Changes related to elements in User Journey pages 27-‐39

Changes related to ?med scored quiz 40-‐42

Changes related to photo gallery 43-‐52

Use your own CSS files for design

•  You can use your own CSS file for design of the en?re campaign

•  There are two places in Digibonus pla=orm where CSS file can be applied: –  CSS file on Design page: should be

used when you want to make different design for web/facebook or mobile channels, or if you’re making a “global” change to the en?re campaign

–  CSS file on User Journey pages: should be used when you want to make different design per page (e.g. different background of ac?ve area per page, or different buDon per page).

1)  Step 1: create a text file (any name) with only CSS code, no headers or anything else. So it is a plane CSS file (file must have extension .css)

2)  Step 2: upload the file in appropriate place on our pla=orm.

3)  Step 3: standard campaign CSS will work as before except that the elements that have been styled in the uploaded CSS now correspond to this new forma]ng style.

List of CSS elements that can be changed

•  Ac?ve area   Wrapper of ac?ve area   Border of content area   Add image like background of ac?ve area   Add image like background of content area

•  User Journey elements: •  Hide ?tle on pages (registra?on,

ques?onnaire, tell a friend, conclusion) •  Input fields •  Drop down menu (?tle, birthday day and

country drop down ) •  Style of mul?ple choice-‐ Single answer

dropdown ques?on •  Center Mul?ple choice-‐single answer radio

buDon ques?on •  Styling text inside the input fields

  Change style of progress bar in Timed score quiz •  Remove score points from ques?onnaire page in

score quiz campaign •  BuDon

  Add hover on buDon   Font style and font size on buDon text

•  Footer links   Background color of all footer links   Background and text color, font style for

specific footer link   Font color of some specific footer link   Font color when hover on the link   Image like hover of some footer link   Image instead of some footer link   Hide footer links   Background color and border for text

boxes-‐ Rules, Prizes and Help •  Gallery

  Title and descrip?on field at upload photo/video ques?on

  Background image for gallery   Gallery top   Color of Filter links and Return link   Style of image block   Style of image container   Style of Paging links

  Transparent gallery background   Semi-‐transparent gallery background

Changes related to active area

CSS Objective: Change wrapper of active area

Example: add background color and top right border rounded by 50px and boDom leh by 100px

CSS code:

#wrapper { background-‐color: #ff0000; border-‐radius: 0 50px 0 100px; -‐moz-‐border-‐radius: 0 50px 0 100px; -‐webkit-‐border-‐radius: 0 50px 0 100px; -‐khtml-‐border-‐radius: 0 50px 0 100px;

}

Aher using CSS Before using CSS

CSS Objective: Add rounded borders for content area in active area Example:

CSS code:

#step { background-‐color: #0000ff; border-‐radius: 20px; -‐moz-‐border-‐radius: 20px; -‐webkit-‐border-‐radius: 20px; -‐khtml-‐border-‐radius: 20px;

} Before using CSS Aher using CSS

CSS Objective: Add background image for active area (content + margin (left and right)) Background image can either be located on outside URL or you will need to upload your background image to our pla=orm . Recommended width of background image for ac?ve area is 440px (content: 400px, margin-‐leh: 20px and margin-‐right: 20px), and height depends of content. How to upload a background picture to Digibonus pla=orm: 1.  Upload your image on Digibonus pla=orm using ?nyMC (on Design page Format background HTML zone-‐Show html editor

Insert image icon upload your picture copy link of image ) 2.  Place the link in CSS code as shown below

CSS code (if image is on Digibonus pla8orm): body{ background-‐image:url("hDps://s3.amazonaws.com/digibonus_media/media/aabg.jpg"); }

Before using CSS Aher using CSS

CSS Objective: Add background image for active area (content-without margines) Background image can either be located on outside URL or you will need to upload your background image to our pla=orm . How to upload a background picture to Digibonus pla=orm: 1.  Upload your image on Digibonus pla=orm using ?nyMC (on Design page Format background HTML zone-‐Show

html editor Insert image icon upload your picture copy link of image ) 2.  Place the link in CSS code as shown below

CSS code (if image is on Digibonus pla8orm): #wrapper { background-‐image:url("hDps://s3.amazonaws.com/digibonus_media/media/aa_sr.png"); }


Objective: Add background image for content area

CSS code:

#step { background-‐image: url("hDps://s3.amazonaws.com/digibonus_media/media/aa_sr.png"); }


Objective: to add background transparency and adjust its transparency level for active area

CSS code:

#wrapper { background-‐color: #006600; border-‐radius: 30px 30px 30px 30px; -‐moz-‐border-‐radius: 30px 30px 30px 30px; -‐webkit-‐border-‐radius: 30px 30px 30px 30px; -‐khtml-‐border-‐radius: 30px 30px 30px 30px; opacity:0.7;

filter:alpha(opacity=70); /* For IE8 and earlier */ }


Changes related to button

Objective: Add hover on the button (1)

Note: height, line-‐height, min-‐width and width must be set to match added image

CSS code:

#buDon_div a.buDon span:hover { background: url("hDps://s3.amazonaws.com/digibonus_media/media/boutonHover.png") repeat-‐x scroll 0 0 transparent; height: 51px; line-‐height:51px; min-‐width: 135px; width: 135px; }

How to add hover on your buDon:

1.  Upload your hover buDon on Digibonus pla=orm using ?nyMC (on Design page click on Format background-‐click on HTML zone-‐Show html editor-‐clik on Insert image icon-‐upload your Hover buDon-‐ copy link of the Hover image )

2.  Put that link in the CSS code showed above 3.  On design page upload your custom buDon 4.  Upload your CSS

Example: your custom buDon , hover buDon

Objective: Add hover on the button (2)

Before using CSS-‐ page with your custom buDon Aher using CSS-‐ you have hover on the buDon

Objective: Change font style and font size on button text (1)

Example:

-‐font: Georgia -‐font style: italic -‐font size: 30px

CSS code:

a.buDon span { height: 51px; line-‐height: 51px !important; min-‐width: 135px; width: 135px; font-‐family:"Georgia", Times, serif; font-‐style:italic; font-‐size:30px; }

Objective: Change font style and font size on button text (2)


Changes related to footer links

Objective: Change background color of all footer links

CSS code:

#footer_links_wrapper { background-‐color: #50A6C2;

}


Objective: Change background and text color, change text style, and positioning for Rules link

Note: you can also make these changes for other footer links. For example: for Rules , instead of #helplnk you need to put rules_dialog, and for Prizes link you need to put #faqlnk.

CSS code:

#rules_dialog { background-‐color: #b70072; color: #39B7CD !important; font-‐weight: bold; padding: 3px;

}


Objective: Change font color of Help link

Note: you can also make these changes for other footer links. For example: for Rules , instead of #helplnk you need to put Rules_dialog, and for Prizes link you need to put #faqlnk.

CSS code:

#helplnk:link { color: #00ff00 !important; }


Objective: Change text color for the hover on help link Note: you can also make these changes for other footer links. For example: for Rules , instead of #helplnk you need to put rules_dialog, and for Prizes link you need to put #faqlnk.

CSS code:

#helplnk:hover { color: #CC0033 !important;

}


Objective: Add background image to be hover of the help link

Note: you can also insert hover image for other footer links. For example: for Rules , instead of #helplnk you need to put rules_dialog, and for Prizes link, you need to put #faqlnk.

CSS code:

#helplnk:hover { background: url("hDps://s3.amazonaws.com/digibonus_media/media/boutonHover.png")

no-‐repeat scroll center center transparent; }

Before using CSS Aher using CSS (when hover over the help link)

Objective: Insert image for Help link Note: you can also insert image for other footer links. For example: for Rules , instead of #helplnk you need to put rules_dialog, and for Prizes link you need to put #faqlnk.

CSS code:

#helplnk { background-‐image: url("hDp://www.saimee.com/wp-‐content/uploads/2012/05/Icon_Help_128px.png?

9d7bd4"); background-‐size: 35px auto; background-‐posi?on: center center; background-‐repeat: no-‐repeat; color: transparent !important; padding: 20px;

}


Objective: Hide Help link Note: you can also hide other footer links. For example: for Rules , instead of #helplnk you need to put #rules_dialog, and for Prizes link you need to put #faqlnk.

CSS code:

#helplnk { display: none;

} #footer_sep_3 { display: none !important; } Before using CSS Aher using CSS

Objective: Hide all Footer links

CSS: first solu?on or second solu?on:

#rules_dialog, #faqlnk, #helplnk { #footer{ display: none; display: none; } }

#footer_sep_2, #footer_sep_3{ display: none !important; }


Objective: Style Rules, Prizes and Help text box- put background color and border for box

CSS code:

#rules_text, #faq_text, #help_text { background-‐color: #66CCFF !important; border: 4px solid #0033FF; border-‐radius: 15px; opacity: 0.9; padding: 20px 10px, 10px,10px;

}


Changes related to elements in User Journey pages

Objective: : Hide title on pages (reg, qnnaire, tell a friend, conclusion) CSS code:

h2.view_?tle { display: none;

}


Objective: Add border, shadow, and rounded borders to all text and password input fields (1) CSS code:

input:not([type]), input[type="text"], input[type="password"], textarea, select { border: 3px solid #0066CC; -‐webkit-‐box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); -‐moz-‐box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);

border-‐radius: 5px; -‐moz-‐border-‐radius: 5px; -‐webkit-‐border-‐radius: 5px; -‐khtml-‐border-‐radius: 5px;

}

Objective: Add border, shadow, and rounded borders to all text and password input fields (2)


Objective: Change style of the drop down menu (title, birthday day and country fields) (1)

CSS code:

.dob_dropdown, #country, #registra?on_dob_day, #registra?on_dob_month, #registra?on_dob_year { border: 3px solid #fff;

-‐webkit-‐box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); -‐moz-‐box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); box-‐shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); }

Objective: Change style of the drop down menu (title, birthday day and country fields) (2)


Objective: Change style of the drop down menu for Multiple choice- Single answer dropdown question (1)

CSS code:

.newListSelected { border: 3px solid #fff; -‐webkit-‐box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); -‐moz-‐box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); background: rgba(255,255,255,0.5);

width: 192px; /* original width is 198px, if border is added width must be decreased by leh and right border combined */ }

Objective: Change style of the drop down menu for Multiple choice- Single answer dropdown question (2)


Objective: Styling text inside the input fields

Note: You can also style text in dropdowns ( .dob_dropdown, #country, #registra?on_dob_day, #registra?on_dob_month, #registra?on_dob_year) and for ques?ons which have dropdown list of answers ( .newListSelected).

CSS code:

input:not([type]), input[type="text"], input[type="password"]{ font-‐family: Comic Sans MS; font-‐size: 130%; font-‐style: italic; font-‐variant: small-‐caps; font-‐weight: bold; }


Objective: Style title and description field at upload photo/video question (1)

CSS code:

.media_descrip?on , .media_?tle{ border: 3px solid #fff; -‐webkit-‐box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); -‐moz-‐box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); box-‐shadow: inset 0 0 8px rgba(125,125,125,1), 0 0 16px rgba(125,125,125,1); background: rgba(255,255,255,0.5); width: 192px; }

Objective: Style title and description field at upload photo/video question (2)


Objective: Center Multiple choice-single answer radio button question

CSS code:

.ques?on_unit { margin-‐leh: 10%; text-‐align: center; width: 80% !important;

} .ques?on_unit p {

margin-‐boDom: 10px !important; } .columns_1 {

padding-‐leh: 45%; margin-‐boDom: 5px !important;

} .columns_1_label {

width: auto !important; }

Before using CSS

Aher using CSS

Objective: Remove score points from questionnaire page in score quiz campaign

CSS code:

#score_holder { display: none;

}


Changes related to timed scored quiz

Objective: Change style of progress bar in Timed score quiz (1)

Example : Background color of the bar is white (#ffffff), width of bar is 390px, background of unchanged box is green (#226539), and for changed box is yellow (#fdcf46).

CSS code:

#countdown { float: none !important;

} #progress_container {

box-‐shadow: 5px 5px 5px #999; background-‐color: #fff; padding: 4px 0 4px 3px; width: 390px;

} #progress_container span.unchanged {

background-‐color: #226539 !important; border: 1px solid #226539 !important; margin-‐right: 4px !important; height: 4px; width: 17px;

} #progress_container span.changed {

background-‐color: #fdcf46 !important; border: 1px solid #fdcf46 !important;

}

Objective: Change style of progress bar in Timed score quiz (2)


Changes related to photo gallery

Objective: Transparent gallery background

CSS code:

#gallery { background-‐color: transparent !important; }


Objective: Semi-transparent gallery background

CSS code:

#gallery { background-‐color: rgba(255,255,255,0.5) !important; }


Objective: Add background image for gallery

CSS code:

#gallery { background-‐image: url("hDps://s3.amazonaws.com/digibonus_media/media/aa_sr.png");

}


Objective: Style gallery top

CSS code:

.gallery_top { background-‐color: #b70072; padding-‐boDom: 3px; }


Objective: Change color of Filter links and Return link in gallery

CSS code:

#gallery_welcome_message, #close_gallery, .filters { color: #CC3300;

}


Objective: Change style of image block in gallery

Example: color of the border is #b70072 and width is 2px

CSS code:

.image_block { border: 2px solid #b70072; border-‐radius: 3px; }


Objective: Change style of image container in gallery

Example : Background color of container is #33FF66, background color of border is #009966, and border width is 3px.

CSS code:

.image_container { background-‐color: #33FF66;

border: 3px solid #009966; border-‐radius: 3px; }


Objective: Change style of Paging links in gallery

Example : Color of fonts is pink ( #b70072) , and background color of paging buDons are green (#66FF99)

CSS code:

.paging_link a:link, .paging_link a:visited, .paging_link a:ac?ve { background-‐color: #66FF99; background-‐image: -‐webkit-‐gradient(linear, 0 0, 0 100%, color-‐stop(1%, #66FF99), color-‐stop(15%, #66FF99)); background-‐image: -‐webkit-‐linear-‐gradient(top, #66FF99 1%, #66FF99 15%); background-‐image: -‐moz-‐linear-‐gradient(top, #66FF99 1%, #66FF99 15%); background-‐image: -‐o-‐linear-‐gradient(top, #66FF99 1%, #66FF99 15%); background-‐image: linear-‐gradient(#66FF99 1%, #66FF99 15%); color: #b70072; }


Objective: Change position of gallery button if using Single HTML mechanism

CSS code:

#gallery_link { padding-‐top: 150px !important; }


Css Guide Fr

Documents

Transcript of Css Guide Fr