If you are a self-service client, Wildfire recommends that you preview your custom CSS design by adding your campaign to your fan page and enabling "Sandbox Mode" on your White Label App within Facebook Developers. Sandbox Mode is a developer tool to allow certain people to preview an app before it goes live on your page. To enable Sandbox Mode, follow this link: http://goo.gl/9goUL and make sure to set your timeline to the present in order for your campaign to appear on your fan page. After you enable Sandbox Mode, connect your promotion and White Label Application to your Facebook Fan Page by following this link: http://goo.gl/KQjWn. That being said, when you're ready to go live, you only need to disable Sandbox mode for your campaign to to go live to the public.

Once your campaign is on your page in Sandbox Mode, you may want to use the CSS guides (attached below) to get a visual representation for Wildfire's template CSS for sweepstakes, contests, or coupon promotions. You can use the guides in tandem with a web developer tool such as Firebug (http://getfirebug.com) to "Inspect Element" on Facebook and find the name of certain CSS selectors that you wish to target. Then add the appropriate CSS rules to your stylesheet within the "Custom Design" section of the Wildfire Builder.

As you will see in the CSS guides, all campaigns are contained within the #application_root div. Additionally, for each page of a campaign, there is a separate class name applied to the #application_root div.

Wildfire's default stylesheet is automatically applied to your campaign and then your custom CSS stylesheet will be given priority over the template CSS. In other words, any declarations in your custom CSS will override the Wildfire default.

CSS for Facebook

Once applied to a live campaign on Facebook, the CSS will be processed so that it can only apply inside the application canvas (this means no styling of Facebook tabs, menus, sidebar), and every rule will be automatically prefixed with .app_content_<application_id>. The CSS rules can't refer to .app_content or any of the elements outside it. Certain Classes/IDs will also be renamed by Facebook in case they consider the name as something that could collide with Facebook-used names, this all happens automatically so it only mean that using firebug you should be aware that#app<application_id>_something actually is #something in the original CSS.

Facebook also limits the size of the CSS to 64KB, the catch is that this is after facebook has processed it, and it is almost impossible to determine how much bigger the processing makes the CSS without actually having facebook process it. If it's too big facebook returns an empty CSS possibly containing an error message about the size (but that is not visible anywhere except in the CSS file as processed by facebook). This is something to keep in mind when copying the whole default CSS as it is quite large and might grow too big once additional rules are added (to help with this one can remove things from the copied default CSS that don't apply to the campaign format the CSS is being written for, so if you customize sweepstakes you don't really need all the video-entry styles).

Facebook also limits the types of CSS fields that can be used, generally all standard CSS is allowed, also certain browser-specific things are allowed (for example -moz-border-radius), but a lot of browser-specific fields are not (at this time) allowed and will automatically be filtered out (for example -webkit-border-radius).

In terms of assets for your custom design, Facebook proxies assets and will not keep re-downloading them from the original server. This is generally a good thing because this saves the original server from being hit with massive load but it does also mean there is no easy way to tell Facebook to update its cache other than just renaming the file of an asset.

CSS for Facebook's tab page (aka the 810px page)

As of the Spring of 2012, all campaigns that are running on a facebook fanpage will feature an 810px wide page that resides on the tab view. This will be a duplicate of the first page of your campaign. Like other campaign pages, the div #application_root has a class specific for this page, called .facebook_tab. Since the majority of the campaign resides with in the #application_root div, it's possible to create custom CSS rules specific to that page. For example:
#main_tabs {background:url("http://www.wildfireapp.com/theme_assets/default/main_tabs_bg.png") repeat-x scroll left bottom transparent;} /*This is the default background image for the navigation bar that will appear on all pages*/ .facebook_tab #main_tabs {background: green;} /*This will change the navigation bar to green on the facebook tab page*/

CSS for Microsite

On the microsite there is no limit to what can be done with CSS.

For more information, please visit our FAQ site: http://wildfireapp.zendesk.com/forums/20067241-css-faqs