Transform Strutta's Contest Template in 5 Steps and 13 CSS Selectors

Posted by Jodi Day
09 August 2011

Editor’s Note: This post, by Jodi Day, is the first in Strutta’s Design for Promotions Series. Stay tuned to learn from our team of experts ways to better brand your online promotions and see why on point brands including adidas, Kiehl’s and Crate & Barrel choose to work with Strutta’s contest platform.

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 in 5 simple steps and only 13 CSS selectors.

Our Marketing Assistant, Keighty, created a demo contest, and chose our default blue template.

Which I turned it into this:

Let me break it down for you.

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.

Upload your banner and intro images in the Look & Feel section of the builder

Download the Style Kit to your computer

Edit my-styles.css in your favorite text editor

I use Coda but you can use Text Editor (mac) or Note pad (pc).

Add the following CSS selectors

#wrapper {

background: #bd9775 url(images/contest-background.jpg) no-repeat top center;

} </pre> 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).

#userbar {

background: none;

} </pre> Removes the blue background of the userbar

#status .action {

background-color: #BD9775;

} </pre> 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.

ul.primary-links {

background: url(images/nav.png) no-repeat;

width: 720px;

height: 72px;

margin-left: -145px;

padding: 0 145px;

} </pre> 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.

ul.primary-links li a {

background: none;

color: #8e674e;

text-transform: uppercase;

height: 49px;

line-height: 49px;

} </pre> Removes the background of the individual links in the navigation, changes the navigation text color and case.

ul.primary-links li a.active,

ul.primary-links li a:hover {

color: #2F161A;

} </pre> Changes color of navigation hover and active states.

#content {

margin-top: -24px;

} </pre> Because we made the navigation taller with a background image, we needed to move the content up.

#glance-action a {

border: none;

background: #28223F;

color: #ffffff;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

} </pre> 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.

#glance-action a:hover {

color: #ffffff;

background: #3f3563;

} </pre> Hover state for the the action button on the main page.

.entry-controls {

background-color: #28223F;

} </pre> Background color for the entry controls (single entry page).

#section-body .widget-vote {

background-color: #3F3563;

} </pre> Vote button color for the entry controls (single entry page).