This project is read-only.

library for standard looking boxes

Feb 9, 2008 at 12:50 AM
This is a feature request. Something like this PHP tool would be nice to have in asp.net:
http://facebook-developer.net/2007/12/27/maintain-facebook-ui-compatibility-with-fboxes/
Feb 14, 2008 at 6:42 AM
I agree it would be nice - anyone willing to put in the work? I'd love to help ensure the work fits in well with Facebook.NET.
Feb 14, 2008 at 11:41 AM
I'm currently in the process of creating an FBMLHelper class for the MVC Preview, to enable my facebook apps to have a true facebook feel to them. The idea of actually creating a set of controls to work with pages would be something I'd be extremely interested in working on, although it's been a while since I did heavy duty FBJS - I think it would be worthwhile.
Feb 14, 2008 at 4:41 PM
Someone on the FB forums had posted css+html for doing these boxes. Here it is:
<style type="text/css">
/* FB style content boxes */
.box_head {
background-color: #d8dfea;
background-image: url("http://static.ak.facebook.com/images/flexarrowopen.gif");
background-repeat: no-repeat;
border-color: #3b5998 #000000 #000000;
border-style: solid none none;
border-width: 1px medium medium;
display: block;
padding: 1px 6px 0px 0px;
overflow: hidden;

}

.boxheadclosed {
background-color: #eeeeee;
background-image: url("http://static.ak.facebook.com/images/flexarrowshut.gif");
background-repeat: no-repeat;
border-color: #b1bdd6 #000000 #000000;
border-style: solid none none;
border-width: 1px medium medium;
display: block;
padding: 1px 6px 0px 0px;
overflow: hidden;

}

.box_subtitle {
background-color: #eee;
border-color: #ccc #444 #444;
border-style: solid none none;
border-width: 1px medium medium;
color: #444;
display: block;
padding: 2px 8px;
overflow: hidden;

}
.box_delete {
border-color: #3b5998;
background-image: url("http://static.ak.facebook.com/images/icon_remove.gif");
background-repeat: no-repeat;
background-position: center;
display: block;
color: #3b5998;
padding: 1px 2px;
height: 14px;
width: 13px;

}
.boxheadtext {
font-size: 11px;
font-weight: 700;
color: #3b5998;
}
/* end fb style boxes */
</style>

<div id="open_box" >
<div class="box_head">
<table width=100% cellpadding="0" cellspacing="0">
<tr>
<td width="23px" clicktoshow="closedbox" clicktohide="openbox" clickthrough="true"></td>
<td clicktoshow="closedbox" clicktohide="openbox" clickthrough="true">
<h2 class="boxheadtext">Title</h2>
</td>
<td clicktoshow="closedbox" clicktohide="openbox" clickthrough="true">
<h2 class="boxheadtext" align="right">right aligned title</h2>
</td>
<td width="13px"><a href="link to delete code" class="box_delete"></a></td>
</tr>
</table>
</div>
<div class="box_subtitle">
Subtitle
</div>
Content
</div>

<div class="boxheadclosed" id="closed_box" style="display:none;">
<table width=100% cellpadding="0" cellspacing="0">
<tr>
<td width="23px" clicktohide="closedbox" clicktoshow="openbox" clickthrough="true"></td>
<td clicktohide="closedbox" clicktoshow="openbox" clickthrough="true"><b class="boxheadtext">Box Title</b><i>optional second title</i></td>
<td clicktohide="closedbox" clicktoshow="openbox" clickthrough="true"><h2 class="boxheadtext" align="right">optional right aligned title</h2></td>
<td width="13px"><a href="link to delete code" class="box_delete"></a></td>
</tr>
</table>

</div>
Feb 15, 2008 at 8:44 AM
Certainly gives an initial structure - doesn't currently function properly inside the FBML test tool, but a great place to start work and saves a lot of initial effort building a sample HTML structure!