Let’s face it, the default styling for many of the Facebook FBML tags is just not going to cut it. You’ll be happy to know that you can easily override these styles on your canvas pages by referencing an external CSS include. To begin, let’s create a template to place all of our content:
The versioning on the stylesheet is due to the fact Facebook caches your CSS. For every major change in your stylesheet you should increment the version. This simply lets Facebook know that you have some new content for them to load. Wrap your content in a DIV with an identifier as this will allow you to override Facebook’s default styling due to CSS selector inheritence.
The next step is crucial. For any bit of FBML that you reference on your page and need to custom style, you will have to play around in Facebook’s FBML Test Console with Firebug (or view the source if you’re oldschool) to determine the output of your FBML. Click here to open the FBML Test Console.
For example, suppose we wish to style that ugly little Share button because it doesn’t match your site design. Open up the FBML Test Console and in the left textarea, simply paste:
Clicking the preview button will generate both the HTML source as well as a preview of the button. We’re primarily concerned with the HTML in this case:
Notice that Facebook has graciously provided classnames for both the div container and the link. Inspecting the two tags in Firebug should yield their default styling. At this point you should have all of the information necessary to override Facebook’s default styling. To begin, create the canvas.css file referenced in your template and try the following:
Assuming you have already set up your Facebook application, simply save your changes and you’re good to go. If you do not have an application and would still like to utilize a canvas page, I highly suggest you read the article entitled Creating a Custom Facebook Page as it guides you through all the steps necessary to getting a FBML page up and running with minimal effort.