This quick tutorial will show you how to use CSS to customize your Facebook Sweepstakes and how to integrate it seamlessly with your website.
CSS stands for Cascading Style Sheets – which defines how the website (or Facebook Sweepstakes) is being displayed in HTML. Wishpond allows you to create your own CSS for your campaign.
In this example, Alessandros (an upscale pizza restaurant) ran a Sweepstakes exclusively on their website.
Here is the Sweepstakes with the standard CSS:
The Sweepstakes does not look that nice, we are going to make some changes so we can have a nice clean looking sweepstakes Alessandos website.
You will need to know HTML basics because the CSS is controlled based on the HTML tags. HTML basics can be learned at W3Schools.
The first step is simple – you must download Google Chrome. Google Chrome has the “inspect element” function that allows you to change the CSS in the browser.
By right clicking you can see all the effects. For example, if I right click on the test (header 1 tag), at the right I can see the CSS:
.social_campaign h1 {
font-size: 30px;
line-height: 35px;
color: #1c2a47;
margin-bottom: 20px;
word-wrap: break-word;
}
The first thing we need to do is change the the h1 tags. We’re going to hide the contest title because there’s one already.
.social_campaign h1 {
font-size: 30px;
line-height: 35px;
color: #1c2a47;
margin-bottom: 20px;
word-wrap: break-word;
}
Don’t worry, we’re aware the contest isn’t looking its finest. We’re going to do a cool trick so we make the entire sweepstakes transparent, and the font white.
html body {background-color: transparent; color:white;
}
Looks much better, right? Now we just need to fix a few details.
We can change the footer position and size with the following code:
The tag “Position” makes the position relative to the corner of the contest. It will be going 280 px to the right and 270 px to the top.
.footer {
width: 520px;
position: absolute;
right: 280px;
top: 270px;
}
In order to give the entry box a bit of style, we need to make the background transparent. Even though we’ve used this code above, we’ll provide it once more for your convenience:
.social_campaign .controls{
color:black;
background-color: transparent;
}
#subscribe_box {
visibility:hidden;
}
We also hid the subscribe box. Here is the results:
.social_campaign .controls .action{
background-color: transparent;
}
.social_campaign .controls .disclaimer {
visibility:hidden;
}
Oh no! The click is black now! No problem, we just have to add some CSS and we’re done.
.social_campaign .controls .timer {
color:white;
}
And here is the end result:
Definitely an improvement.
If you want to create a Facebook Sweepstakes for your website you can start here:
Also, if you are currently running a Sweepstakes, and you would like some assistance with the CSS, send us an email at [email protected].
wishpond