1. Theming with the Theme Roller Iain Ure

2. Theme roller General theming options The theme roller Demonstration Examples Exercise

3. Styling Why does my page look the way it does? HTML and CSS HTML defines the elements on the page  Paragraphs, headings, blocks, images  Nested inside each other CSS is a set of rules.  e.g. the font for all paragraphs should be Comic Sans, all headers should be green, the submit buttons should be 300 pixels wide In the HTML template, in "stylesheets". Usually taken from your website when set up.

4. CSS.eaQuestionCheckboxFormFieldContainer {margin-top: 0px;padding-left: 20px;} form[name='enWebsite : Stay Informed_2'].eaQuestionLabel {width: 160px;float: left;}form[name='enWebsite :Stay Informed_2'].eaQuestionCheckbox label {visibility: hidden;}.eaQuestionCheckboxFormFieldContainer {float: left;clear: none;} #enWebsite_\:_purchasing_softwareDiv.eaQuestionLabel {width: auto;}#requestademo {display: none;}.eaSubmitButton,.eaResetButton {color: #FFFFFF;background-color: #222224;border: thin solid #222224;background-image: none;border-radius: 0px;text-shadow: none;font-size: 15px !important;padding: 4px 11px !important;cursor: hand;cursor: pointer;}.eaSubmitButton:hover,.eaResetButton:hover {color: #FFFFFF;background-color: #222224 !important;box-shadow: 0 1px 2px #ccc;-moz-box-shadow: 0 1px 2px #ccc;-webkit-box-shadow: 0 1px 2px #ccc;}.eaSenderMailTemplate {font-family: inherit !important;font-size: inherit !important;padding: 3px !important;border: 1px solid #CCC !important;background: #F1EEEA !important;margin-left: 0 !important;color: #000000 !important;}.eaSenderMailTemplate:focus {padding: 3px !important;border: 1px solid #000 !important;background: #FFFFFF !important;color: #000000 !important;}

5. Theme roller What if you don't know CSS? Agency, freelancer, digital team, client support (tweaks) Theme roller Visual way to edit styling of pages in EN Stylesheet is automatically generated and applied Consistent across multiple campaigns and donation pages

6. Demo

7. Client examples Mom's Clean Air Force http://action.momscleanairforce.org/ea- action/action?ea.client.id=1711&ea.campaign.id=34081 World Vision http://e-activist.com/ea- action/action?ea.campaign.id=34927&ea.client.id=20&ea.t racking.id=&ea.campaign.mode=DEMO Age UK http://www.ageuk.org.uk/money-matters/claiming- benefits/claiming-benefits-older-people-campaign/urge- your-mp/

8. Embedding Blank template Self-contained styles Fit to width

9. Any volunteers?

10. Questions