Theming with the Theme Roller Iain Ure

Theme roller General theming options The theme roller Demonstration Examples Exercise

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.

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: # !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: # !important;}.eaSenderMailTemplate:focus {padding: 3px !important;border: 1px solid #000 !important;background: #FFFFFF !important;color: # !important;}

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

Demo

Client examples Mom's Clean Air Force action/action?ea.client.id=1711&ea.campaign.id=34081 World Vision action/action?ea.campaign.id=34927&ea.client.id=20&ea.t racking.id=&ea.campaign.mode=DEMO Age UK benefits/claiming-benefits-older-people-campaign/urge- your-mp/

Embedding Blank template Self-contained styles Fit to width

Any volunteers?

Questions