Facebook Theme Post

Here is a template to create a Facebook theme-styled post.

Write your text in a content box.

Add a Facebook button.

Post
Create a divider line like the one you see below.

Split your text into several content boxes just like Facebook does with each new post.

You can even style the comment box to look like Facebook!

/* Default Facebook CSS */
 body {
 font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
 font-size:14px;
 color:#333;
 background:#f6f7f8;
 }
 
 /* Default Anchor Style */
 body a {
 color:#3b5998;
 outline-style:none;
 text-decoration:none;
 font-size:11px;
 font-weight:700;
 }
 
 body a:hover {
 text-decoration:underline;
 }
 
 /* Facebook Box Styles */
 .fbgreybox {
 background-color:#f7f7f7;
 border:1px solid #ccc;
 color:#333;
 padding:10px;
 font-size:13px;
 font-weight:700;
 }
 
 .fbbluebox {
 background-color:#3f5c9a;
 border:1px solid #d4dae8;
 color:#fff;
 padding:10px;
 font-size:13px;
 font-weight:700;
 }
 
 h1 {
 background-color:#3f5c9a;
 border:1px solid #d4dae8;
 color:#fff;
 padding:10px;
 font-size:2em;
 font-weight:700;
 }
 
 .fbinfobox {
 background-color:#fff9d7;
 border:1px solid #e2c822;
 color:#333;
 padding:10px;
 font-size:13px;
 font-weight:700;
 }
 
 .fberrorbox {
 background-color:#ffebe8;
 border:1px solid #dd3c10;
 color:#333;
 padding:10px;
 font-size:13px;
 font-weight:700;
 }
 
 /* Content Divider on White Background */
 .fbcontentdivider {
 margin-top:15px;
 margin-bottom:15px;
 width:520px;
 height:1px;
 background-color:#d8dfea;
 }
 
 /* Facebook Tab Style */
 .fbtab {
 padding:8px;
 background-color:#4e69a2;
 color:#fff;
 font-weight:700;
 float:left;
 margin-right:4px;
 text-decoration:none;
 display:inline-block;
 }
 
 .fbtab:hover {
 background-color: #4e69a2;
 color:#fff;
 cursor:pointer;
 }
 
 .fbbox {
 border-radius: 2px;
 padding: 10px;
 background:#fff;
 -webkit-box-shadow: 0px 1px 2px 0px rgba(107,107,107,1);
 -moz-box-shadow: 0px 1px 2px 0px rgba(107,107,107,1);
 box-shadow: 0px 1px 2px 0px rgba(107,107,107,1);
 clear: both;
 }
 
 .fbbtn {
 background:#44619d;
 color:#fff;
 border:1px #000 solid;
 padding:5px;
 display:inline-block;
 }
 
 .fbbtn:hover {
 color:#fff;
 text-decoration:none;
 }
 
 /* Style MyPost Comments */
 .formcontainer {
 background:#f6f7f8;
 }
 
 .author {
 background:#f6f7f8;
 }
 
 .nocomments {
 background:#f6f7f8;
 }
 .content {
 background:none;
 }
 /* Facebook Font Awesome Icon */
 i.fa.fa-facebook-square.fa-2x {
 color: #3b5998;
 }