Posted on March 4th, 2010 at 07:25 AM by Corey Ballou
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:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.yoursite.com/css/canvas.css?v=1.2" /> <div id="container"> <!-- AS AN EXAMPLE, WE'LL STYLE THE FB SHARE BUTTON --> <fb:share-button class="url" href="http://www.your-site-url.com" /> </div>
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. more »
