Facebook Styles

From Facebook Developers Wiki

(Redirected from Facebook)
Jump to: navigation, search

This page contains styles that are used by Facebook that can't be created using standard FBML alone.

[edit] Two List Table

Example of Two List Table
Example of Two List Table

Base Code

  • This is the HTML that should be placed on your page. 

<div>
     <table class="lists" cellspacing="0" border="0">
          <tr>
               <th>
                    <h4>List 1</h4>
                    <a href="#">See All</a>
               </th>
               <th class="spacer"></th>
               <th>
                    <h4>List 2</h4>
                    <a href="#">See All</a>
               </th>
          </tr>
          <tr>
               <td class="list">
                    INSERT ITEMS HERE
               </td>
               <td class="spacer"></td>
               <td class="list">
                    INSERT ITEMS HERE
               </td>
          </tr>
          <tr>
               <td class="see_all"><div><a href="#">See all List 1's</a></div></td>
               <td class="spacer"></td>
               <td class="see_all"><div><a href="#">See all List 2's</a></div></td>
          </tr>
     </table>
</div>

Item Code

  • This is the code for one item. It should replace the instances in the base code that say

.

  • If the item is the first item in the list, the CSS class first should be added. 

<div class="list_item clearfix">
</div>

CSS Code

  • This is the CSS code that should be placed on your page in style tags. 

.lists th {
     text-align: left;
     padding: 5px 10px;
     background: #6d84b4;
}

.lists .spacer {
     background: none;
     border: none;
     padding: 0px;
     margin: 0px;
     width: 10px; 
}

.lists th h4 { float: left; color: white; }
.lists th a { float: right; font-weight: normal; color: #d9dfea; }
.lists th a:hover { color: white; }

.lists td {
     margin:0px 10px;
     padding:0px;
     vertical-align:top;
     width:306px;
}

.lists .list {
     background:white none repeat scroll 0%;
     border-color:-moz-use-text-color #BBBBBB;
     border-style:none solid;
     border-width:medium 1px;
}

.lists .list .list_item { border-top:1px solid #E5E5E5; padding: 10px; }
.lists .list .list_item.first { border-top: none; }

.lists .see_all {
     background:white none repeat scroll 0%;
     border-color:-moz-use-text-color #BBBBBB rgb(187, 187, 187);
     border-style:none solid solid;
     border-width:medium 1px 1px;
     text-align:left;
}

.lists .see_all div { border-top:1px solid #E5E5E5; padding:5px 10px; }

Retrieved from "http://wiki.developers.facebook.com/index.php/Facebook_Styles"
Views
Personal tools
Navigation
wiki
Toolbox