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.

1. DESIGN FOR PROMOS
Transform 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 Selectors
This post, by Jodi, is the first in Strutta's Design for Promos Series. On point brands including adidas, Kiehl's
and Crate & Barrel choose to work with Strutta's contest platform. Every other Tuesday, learn from our team
of experts ways to better brand your online promotions.
You have your promotion idea, you've written the content, you've chosen the platform (Strutta, obviously), and
now you need to customize the look & feel. With the style kit in our Promotion Builder you can use CSS to style
nearly everything. I'd 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 Steps
DESIGN 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 Selectors
Our 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 Steps
1. 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 used
high quality free fonts, which can be downloaded here and here. For a background image I used a panorama
from a recent trip to the Dominican which I gave an 'Instagram' treatment in Photoshop. Lucky for us someone
already 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 background
image here.
Banner
Navigation
Intro
Background

5. DESIGN FOR PROMOS
Transform Strutta’s Contest Template in 5 Steps
2. 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 Steps
3. Download the Style Kit to your computer

7. DESIGN FOR PROMOS
Transform Strutta’s Contest Template in 5 Steps
4. Edit my-styles.css in your favorite text editor
I use Coda but you can use Text Editor (mac) or Note pad (pc).

8. DESIGN FOR PROMOS
Transform Strutta’s Contest Template in 5 Steps
5. Add the following CSS selectors

9. DESIGN FOR PROMOS
Transform Strutta’s Contest Template using 13 CSS Selectors
Add the following CSS selectors
1.
#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 images
folder in the style kit (this one is called 'contest-background.jpg' if you name it something different, make sure
you change your CSS).
2.
#userbar {
background: none;
}
Removes the blue background of the userbar
3.
#status .action {
background-color: #BD9775;
}
Changes the background color of the top action button. We encourage using only css on action buttons as the
copy and link changes depending on the phase of the contest.

10. DESIGN FOR PROMOS
Transform Strutta’s Contest Template in 13 CSS Selectors
Add the following CSS selectors
4.
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. We've added an image and positioned it with negative margin to break
out 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 Selectors
Add the following CSS selectors
7.
#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 depending
on 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 Selectors
Add the following CSS selectors
11.
#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 Selectors
Add the following CSS selectors
12.
#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 Selectors
We 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 Tools
Contact:
Tina Hoang | Communications Manager | tina@strutta.com | @t1nah on Twitter
Facebook Photo Video
Sweepstakes
Contest Apps Contests Contests
Start your promotion by visiting strutta.com or Call us toll-free at 1-877-477-5717