Your SlideShare is downloading. ×
0
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Design for Online Promotions
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design for Online Promotions

3,750

Published on

This Design for Promos slide shows you HOW TO: Transform Strutta's Contest Template in 5 Steps and 13 CSS Selectors. …

This Design for Promos slide shows you HOW TO: Transform Strutta's Contest Template in 5 Steps and 13 CSS Selectors.

Strutta is the leading platform for Facebook and online promotions & a Facebook Preferred Developer Consultant.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,750
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESIGN FOR PROMOSTransform Strutta’s Contest Template in 5 Steps and 13 CSS Selectors
  • 2. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps and 13 CSS SelectorsThis post, by Jodi, is the first in Struttas Design for Promos Series. On point brands including adidas, Kiehlsand Crate & Barrel choose to work with Struttas contest platform. Every other Tuesday, learn from our teamof experts ways to better brand your online promotions.You have your promotion idea, youve written the content, youve chosen the platform (Strutta, obviously), andnow you need to customize the look & feel. With the style kit in our Promotion Builder you can use CSS to stylenearly everything. Id like to show you how to customize our contest template using only 13 CSS selectors.Here’s what you’ll learn in this guide:DESIGN FOR PROMOS:Transform Strutta’s Contest Template in 5 StepsDESIGN FOR PROMOS:Transform Strutta’s Contest Template using 13 CSS Selectors
  • 3. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps and 13 CSS SelectorsOur Marketing Assistant, Keighty, created a demo contest, and chose our default blue template. Which I turned into this:
  • 4. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps1. Create Images (banner, intro, navigation, and background).Photoshop is the design industry standard, but a free web based editor such as Picnik will work just fine. I usedhigh quality free fonts, which can be downloaded here and here. For a background image I used a panoramafrom a recent trip to the Dominican which I gave an Instagram treatment in Photoshop. Lucky for us someonealready went ahead and created the actions for Photoshop, so go get em!You can download the source files for the banner (720 x 100px), intro (720 x 405px), navigation, and backgroundimage here. Banner Navigation Intro Background
  • 5. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps2. Upload your banner and intro images in the Look & Feel section of the builder
  • 6. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps3. Download the Style Kit to your computer
  • 7. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps4. Edit my-styles.css in your favorite text editorI use Coda but you can use Text Editor (mac) or Note pad (pc).
  • 8. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps5. Add the following CSS selectors
  • 9. DESIGN FOR PROMOS Transform Strutta’s Contest Template using 13 CSS SelectorsAdd the following CSS selectors1.#wrapper { background: #bd9775 url(images/contest-background.jpg) no-repeat top center;}This adds the background image to your contest. You will need to add the background image to the imagesfolder in the style kit (this one is called contest-background.jpg if you name it something different, make sureyou change your CSS).2.#userbar { background: none;}Removes the blue background of the userbar3.#status .action { background-color: #BD9775;}Changes the background color of the top action button. We encourage using only css on action buttons as thecopy and link changes depending on the phase of the contest.
  • 10. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 13 CSS SelectorsAdd the following CSS selectors4.ul.primary-links { background: url(images/nav.png) no-repeat; width: 1013px; height: 72px; margin-left: -145px; padding: 0 145px;}This targets the navigation background. Weve added an image and positioned it with negative margin to breakout of the standard template width. You will need to add this image to the images folder in the style kit.5.ul.primary-links li a { background: none; color: #8e674e; text-transform: uppercase; height: 49px; line-height: 49px;}Removes the background of the individual links in the navigation, changes the navigation text color and case.6.ul.primary-links li a.active,ul.primary-links li a:hover { color: #2F161A;}Changes color of navigation hover and active states.
  • 11. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 13 CSS SelectorsAdd the following CSS selectors7.#content { margin-top: -24px;}Because we made the navigation taller with a background image, we needed to move the content up.8.#glance-action a { border: none; background: #28223F; color: #ffffff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}This is the action button on the main page (About page in the Details tab). This button also changes dependingon the phase of the contest, so it is best to only use CSS and not image replacement.9.#glance-action a:hover { color: #ffffff; background: #3f3563;}Hover state for the the action button on the main page.10..entry-controls { background-color: #28223F;}Background color for the entry controls (single entry page).
  • 12. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 13 CSS SelectorsAdd the following CSS selectors11.#section-body .widget-vote { background-color: #3F3563;}Vote button color for the entry controls (single entry page).
  • 13. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 13 CSS SelectorsAdd the following CSS selectors12.#footer { background: #28223f;}Changes background color of the footer to match the theme.13.#bottom { background-color: #bd9775;}Changes the background color of the disclaimer to match the theme.
  • 14. DESIGN FOR PROMOS Transform Strutta’s Contest Template in 5 Steps and 13 CSS SelectorsWe hope this sheds some light on how easy it is to customize our contest template using our CSS Style Kit.Build and design your own promotion now, for free!Resources • Download Jodi’s completed Style Kit • Revive the Summer Contest, our demo site • Picnik, a free image editor • Image filter actions for Photoshop, Instagram style • High Quality Free Fonts • Adobe Kuler, a web-hosted application for generating color themes • CSS Techniques and ToolsContact:Tina Hoang | Communications Manager | tina@strutta.com | @t1nah on Twitter Facebook Photo Video Sweepstakes Contest Apps Contests ContestsStart your promotion by visiting strutta.com or Call us toll-free at 1-877-477-5717

×