One of the main benefits of a White Label campaign is having the ability to customize your campaign pages using CSS.

As a self-service customer, you are responsible for the CSS coding and design of your promotion. After designing, building and seeing hundreds of White Label campaigns published, we have some tips and tricks for CSS coding. There are a few things that could help you when it comes to the CSS coding of your campaign.

Note: All CSS coding is done in the Custom Designs tab of the Campaign Builder

Use this link to get started with CSS for your Wildfire campaign.

You may also want to consult the attached PDF, Default_Sweeps_CSS.pdf, which is a visual representation of the major div containers for 9 pages of a sweepstakes promotion.

What you cannot do with CSS

Our application is currently sized at 760px wide for the canvas view, and 810px wide for the Facebook tab page. Remember that CSS can only modify the look and feel of your application, not the functionality. Adding Javascript, Flash, video, audio, animation, or additional links is not currently available with CSS. That being said, some workarounds can be achieved by adding some basic HTML to the footnote text section of Manage Campaigns, and then styling the footnote accordingly in your CSS. Also remember that some Facebook generated items cannot be styled with our CSS (for example, the text color of the “like” requirement link). 

Firebug's Inspect Element

Firebug is a handy web development tool that allows you to inspect HTML and CSS elements in Firefox or Chrome. It can be downloaded at http://getfirebug.com/. Since the default Wildfire CSS is quite large, it is often easier to preview your campaign, use Firebug's “Inspect Element” feature to find the specific element you want to style, and then edit the corresponding tag in your CSS rather than simply guessing which CSS rules affect which elements. Note: Internet Explorer, Safari, and Opera also have web development tools (IE Developer Tools, Safari Web Inspector, and Opera Dragonfly), but we find Firebug to be the easiest to use.

Hiding Elements

Often there are elements of your campaign that you do not wish to display. The most common way of doing this it to find the element in question with Firebug, and then adding the {display: none} declaration to the CSS rule for that element. To hide an element, but retain that element's occupied space, the declaration is {visibility: hidden}.

Customizing the Navigation Bar

Many customers wish to replace the default navigation bar with custom images. This can be achieved by first finding the element with Firebug, and then adding these declarations {text-indent:-9000px; overflow: hidden; display: block; background: url(“http://www.CustomImageHere.com”); height: XXpx; width: XXpx;}. This will essentially push the existing navigation text outside the frame and allow you define a custom button.

Customizing the Header Banner

Although there is an option for uploading a Header Banner in the Banners section of the Campaign Builder, there is an opportunity to have a customized header banner without height restrictions by using CSS. This can be achieved by hiding the current default banner with {display: none} and then adding a background image to the #main-tabs section of your custom CSS and repositioning the .left_tabs and .right_tabs accordingly.

Specifically Addressing the Microsite, Facebook, and Twitter Channels

There are two ways of customizing the CSS for each specific channel. One way is to set up a new CSS specifically for each campaign Channel. Then when you publish your campaign in the final step, next to the Campaign Channel click on “Design”, and you can choose a different custom CSS for each channel.

The other way to do this is to add more tags to your current CSS. To customize anything for the microsite, try adding .website in front of a line of code. For example:

#prize_column {float:right; }
.website #prize_column {float:left; }

Likewise, customizing things for Facebook is .facebook, and for Twitter .twitter.

Specifically Addressing the Facebook Tab 810 page

It is possible to have a design for the 760px page and the 810px Facebook page. To do this, the tag that needs to be added to the CSS is called .facebook_tab This should be added before any specific 810px changes. For example:

.main_tabs {background: blue;} /*This will appear on all app pages*/

.facebook_tab #main_tabs {background: red;} /*This will appear on only the Facebook Tab Page.*/

Where Did My Element Go? Is There a Problem with the Application?

The quickest way to debug your application would be to temporarily publish your application with Wildfire's Default CSS. If the element in question is showing up there, then try using Firebug on your custom CSS to see if an element is getting overridden or hidden.

Watch the video on using cascading style sheets here: