Change CSS on Embedded Facebook Fan Box
- 10 September 2011
- Posted in Uncategorized
- By Administrator
- Write comment
Some time ago I responded to a post regarding how to edit the style sheet (css) for an embedded Facebook Fan Box. The original post with my original comment appears Here.
In short, it is possible to control the style sheet (css) for embedded Facebook Fan Boxes. I have an example with changed icon sizes, a transparent background, and a couple of margin/spacing tweaks on the Facebook Fan Box appearing on www.artofdancemadison.com.
Facebook provides the following documentation…
- http://wiki.developers.facebook.com/index.php/Fan_Box
- http://wiki.developers.facebook.com/index.php/Talk:Fan_Box#How_to_Edit_the_CSS-Style
You specify the location of your css (fully qualified URL to a stylesheet stored on your website, not facebook) in the <fb:fan> tag. Facebook caches your stylesheet. As you develop your modified style sheet, you must append a version number to it (described in the links, above) so Facebook knows to reload your stylesheet (and your changes).
Of course, this means you must be able to upload a style sheet to a publicly-available web server.
If your fan badge also includes the “stream” (story area), the stream area will be a minimum of 300px tall (if I remember correctly). This is true even if you specify a smaller size for the entire badge in the <fb:fan> tag. However, your style sheet can can specify the height…
[edit 06 Jan 2012] Some time recently, Facebook starting putting an inline style on div.page_stream that hard-codes a height. You are able to override inline styles as follows…
.page_stream { height: NNNpx; }
.page_stream[style] { height: NNNpx !important; } /*overrides inline style*/
… or in a single declaration…
.page_stream,
.page_stream[style] { height: NNNpx !important; }
Page Visits: 366 visits since 10 September 2011
Last Visited: 22 February 2012 at 1:39am
@marc
It is possible (though I don’t know for sure) that Facebook ensures a certain level of contrast between the text color and the text’s background color. Have you tried specifying other colors than white? How about different background colors?
It is also possible that each stream element (an li of a containing ul, if I remember correctly) also specifies its own text color or background colors. Keep digging.
Hola,
I’m working on a custom fanbox atm, well it’s nowadays a mixture of likebox with stuffed in fanbox.
I got anything working exept the custom stream.
It just won’t do anything I want
First of all … I want all text to be white!!!!
What I got from firebug and my brain is something like ..
.fan_box .page_stream {
color:#fff;
}
………………….
and (well, here it does not matter if I add .fan_box or not)
.actorDescription .uiAttachmentTitle {
color:#FF00BA;
}
.caption {
color: #00FF3A;
}
.uiStream .actorName .uiStreamMessage .messageBody .uiAttachmentDesc{
color:#fff !important;
}
any clue?
greets m