This is a demo page to show you this layout in action.
If you want use this layout for your friendburst profile go to “profile” –> “customize profile”, and
• change the theme to “flavaheat” (the default theme)
• reset whatever you did in the “Advanced” menu (the “revert to default” button)
• copy the code from scrollbox below and paste it in the CSS box
html {
background-color: white;
background-image: none;
}
body {
background-color: transparent;
}
div.body_width_holder {
width: 980px !important;
background-color: #cecece !important;
}
div#header,
div#content_container,
div#bottom {
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #000000;
}
div#header {
border-bottom: 1px solid black;
}
div#bottom {
border-bottom: 1px solid black;
}
div#bottom {
margin-top: 0px;
}
div#header_holder div#header {
background-color: #315483 !important;
}
div#header div#first_name {
color: white;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#ttiwelcome div.go_left div,
div#ttiwelcome div.go_left div b a {
color: white;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
padding: 2px 7px 2px 7px;
}
div#ttiwelcome div.go_left div b a:hover {
color: #315483;
text-decoration: none;
text-shadow: none;
background-color: white;
-webkit-border-radius: 50%/25%;
-moz-border-radius: 50%/25%;
border-radius: 50%/25%;
}
div#header div#time_stamp a,
div#header div#time_stamp a:hover {
color: white;
text-decoration: none;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#header div#ttitopnav ul li a:hover {
background-color: transparent;
}
div#header_holder div#header ul#main_nav {
background-color: transparent;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: bottom center;
background-repeat: repeat-x;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 2px;
}
div#header_holder div#header div#right_nav {
padding-top: 4px;
padding-bottom: 2px;
}
div#header_holder div#header ul#main_nav li a,
div#header_holder div#header div#right_nav ul li a {
background-color: transparent;
color: white;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#header_holder div#header ul#main_nav li a:hover,
div#header_holder div#header div#right_nav ul li a:hover {
color: #315483;
text-decoration: none;
text-shadow: none;
background-color: white;
-webkit-border-radius: 50%/25%;
-moz-border-radius: 50%/25%;
border-radius: 50%/25%;
}
div#header_holder div#header ul#main_nav li ul,
div#header_holder div#header div#right_nav ul li ul {
border: 1px solid #213959;
border-top-width: 0px;
background-color: #264166;
}
div#header_holder div#header ul#main_nav li ul li.first,
div#header_holder div#header div#right_nav ul li ul li.first {
border-top: 2px solid transparent;
}
div#header_holder div#header ul#main_nav li ul li a,
div#header_holder div#header div#right_nav ul li ul li a {
color: white;
}
div#header_holder div#header ul#main_nav li ul li a:hover,
div#header_holder div#header div#right_nav ul li ul li a:hover {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
div#header ul#main_nav li ul,
div#header div#right_nav ul li ul {
margin-top: 2px;
}
div#header div#top_nav_holder {
width: 960px;
margin-left: 10px;
color: black;
border: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div#header div#top_nav_holder a {
color: black;
}
div#header div#top_nav_holder a:hover {
color: #315483;
text-decoration: none;
}
div.profile_header {
width: 958px;
padding: 5px 0px 0px 0px;
margin-left: 10px;
margin-top: 10px;
background-color: white;
border: 1px solid black;
text-align: center;
}
div.profile_header a,
div.profile_header a:hover {
color: black;
text-decoration: none;
}
div.profile_header span.profile_online_status {
display: none;
}
div.profile_header div.extra_info {
color: black;
}
div#profile_menu ul {
margin-left: 36px;
}
div#profile_menu ul li {
width: auto !important;
}
div#profile_menu ul li a,
div#profile_menu ul li.active a {
background-color: black;
color: white;
border: 1px solid black;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
div#profile_menu ul li a:hover,
div#profile_menu ul li.active a:hover {
background-color: black;
color: #999999;
}
div#sidebar {
margin-left: 4px;
}
div#sidebar div.block div.title {
background-color: #315483;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: 0px -1px;
background-repeat: repeat-x;
color: white;
text-align: center;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#sidebar div.block {
border: 1px solid black;
background-color: white;
color: black;
}
div#sidebar div.block div {
color: black;
}
div#sidebar div.block a,
div#sidebar div.block div.content div.t_center div.p_4 a {
color: black;
}
div#sidebar div.block a:hover,
div#sidebar div.block div.p_bottom_10:hover a,
div#content div.block div.p_bottom_10:hover a,
div#sidebar div.block div.content div.t_center:hover div.p_4 a,
div#content div.block div.content div.t_center:hover div.p_4 a {
color: #315483;
text-decoration: none;
}
div#sidebar div.block div.bottom {
background-color: transparent;
}
div#sidebar div.block div.bottom ul li a,
div#content div#js_block_border_friend_profile_small div.bottom ul li a {
color: black;
font-weight: normal;
border: 1px solid black;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: white;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: center center;
background-repeat: repeat-x;
padding: 4px 7px 4px 5px;
}
div#content div#js_block_border_friend_profile_small div.bottom {
padding-bottom: 10px;
}
div#sidebar div.block div.bottom ul li a:hover,
div#content div#js_block_border_friend_profile_small div.bottom ul li a:hover {
color: white;
background-color: #315483;
}
div#sidebar div.block div.row1,
div#sidebar div.block div.row2 {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #999999;
}
div#sidebar div.block div.row_first {
border-top-width: 0px;
}
div.profile_image_holder {
background-color: white;
border: 1px solid black;
padding: 5px;
}
div.profile_image_holder a.thickbox img.profile_user_image {
border: 1px solid black;
margin-top: 2px;
}
div#profile_nav_list {
background-color: white;
border: 1px solid black;
}
div#profile_nav_list ul li a {
color: black;
background-color: transparent;
}
div#profile_nav_list ul li a:hover {
color: #315483;
background-color: transparent;
}
div#profile_nav_list ul li a {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #999999;
}
div#content {
padding-left: 13px !important;
}
div#content div.block div.title {
background-color: #315483;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: 0px -1px;
background-repeat: repeat-x;
color: white;
text-align: center;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#content div.block {
border: 1px solid black;
background-color: white;
color: black;
}
div#content div.block div.content {
color: black;
}
div#content div.block div.content p {
color: black;
}
div#content div.block div.content a {
color: black;
}
div#content div.block div.content a:hover {
color: #315483;
text-decoration: none;
}
div#content div.comment_link li a {
background-color: transparent;
border: 0px;
color: black;
font-weight: normal;
padding-right: 3px;
}
div#content div.block div.content input.button {
color: black;
font-weight: normal;
border: 1px solid black !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: white;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: center center;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 7px;
}
div#content div.block div.content input.button:hover {
border: 1px solid black !important;
color: white;
text-decoration: none;
background-color: #315483;
}
div#content div.comment_link li a:hover {
background-color: transparent;
border: 0px;
color: #315483;
text-decoration: none;
}
div#content div.block div.row1,
div#content div.block div.row2 {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #999999;
}
div#content div.block div.row_first {
border-top-width: 0px;
}
div#js_block_border_feed_display a#feed_view_more {
width: 150px;
margin-left: auto;
margin-right: auto;
color: black;
font-weight: normal;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: white;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: center center;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 7px;
}
div#js_block_border_feed_display a#feed_view_more:hover {
color: white;
background-color: #315483;
}
div.comment_feed,
div.editor_menu {
border: none;
background-color: transparent;
}
div.comment_feed {
margin-top: 8px;
}
div#content div.block div.content a.editor_button {
background-color: white;
border: 1px solid black;
padding-top: 4px !important;
padding-bottom: 0px !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div#content div.block div.content a.editor_button:hover {
background-color: lightgrey;
}
div.editor_menu div.editor_separator {
display: none;
}
div.content input {
background-color: white;
border: 1px solid black;
color: black;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.content textarea {
background-color: white;
border: 1px solid black;
color: black;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.content div#layer_text textarea {
background-color: white;
border: 1px solid black;
color: black;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.comment_mini {
background-color: rgba(0,0,0,0.1) !important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 3px 0px 3px 0px !important;
}
div.comment_header {
background-color: rgba(0,0,0,0.1) !important;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
div.comment_box {
background-color: rgba(0,0,0,0.1) !important;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
div.comment_content,
div.comment_link {
background-color: transparent;
}
div div.block div.pager_right ul.pager li a,
div div.block div.pager_right ul.pager li a.active {
color: black;
font-weight: normal;
border: 1px solid black !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: white;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: center center;
background-repeat: repeat-x;
padding-left: 7px;
padding-right: 7px;
margin-left: 1px;
margin-right: 1px;
}
div div.block div.pager_right ul.pager li a:hover,
div div.block div.pager_right ul.pager li a.active:hover {
color: white !important;
background-color: #315483;
}
div#bottom div.bottom_menu ul li a {
color: black;
}
div#bottom div.bottom_menu ul li a:hover {
color: #315483;
text-decoration: none;
}
div#bottom div.bottom_menu ul li span {
visibility: hidden;
}
div.inner div#sidebar div#menu {
background-color: white;
border: 1px solid black;
}
div.inner div#sidebar div#menu ul li a {
color: black;
background-color: transparent;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #999999;
}
div.inner div#sidebar div#menu ul li a:hover {
color: #315483;
background-color: transparent;
}
div.inner div#sidebar div#menu ul li a.first {
border-top: 0px;
}
div.profile_header a img.profile_image {
display: none;
}
div.inner div#content h1,
div.inner div#content div.h1 {
background-color: #315483;
background-image: url(http://i52.tinypic.com/tafqky.jpg);
background-position: 0px -1px;
background-repeat: repeat-x;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: black;
margin-bottom: 0px;
}
div.inner div#content h1 a,
div.inner div#content h1 a:hover,
div.inner div#content div.h1 a,
div.inner div#content div.h1 a:hover {
color: white;
font-size: 9pt;
line-height: 20px;
text-decoration: none;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div.inner div#content div#breadcrumb_parent h1 {
background-color: transparent;
background-image: none;
margin: 0px;
border: none;
}
div.inner div#content div#breadcrumb_parent {
background-color: white;
background-image: none;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: black;
margin: 0px;
padding: 4px;
}
div.inner div#content div#breadcrumb_parent h1 a,
div.inner div#content div#breadcrumb_parent h1 a:hover,
div.inner div#content div#breadcrumb_parent span#pointer {
color: white;
text-decoration: none;
text-shadow: -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
}
div#site_content {
background-color: white;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: black;
padding-left: 10px;
padding-right: 10px;
}
div#content div.item_info {
margin-top: 0px;
padding-top: 2px;
padding-left: 10px;
color: black;
}
div#content div.item_info a {
color: black;
text-decoration: none;
}
div#content div.item_info a:hover {
color: #315483;
text-decoration: none;
}
div#site_content h3 {
margin: 0px 10px 10px 10px;
padding-top: 15px;
color: black;
font-size: 9pt;
border-bottom: 1px dotted #999999;
}
div.image_hover_holder a {
color: black;
}
div.image_hover_holder:hover a {
color: #315483;
text-decoration: none;
}
div.separate {
border-top: 1px dotted #999999;
}
div#js_album_description {
padding: 0px 10px 5px 10px;
color: black;
text-align: center;
}
div.photonavigation_counter {
color: black;
}
div#site_content span.row_title_link a {
color: black;
}
div#site_content span.row_title_link a:hover {
color: #315483;
text-decoration: none;
}
div#site_content div.extra_info,
div#site_content div.extra_info a {
color: black;
}
div#site_content div.extra_info a:hover {
color: #315483;
text-decoration: none;
}
div#site_content div.row1,
div#site_content div.row2 {
border-top-width: 0px;
border-top-style: dotted;
border-top-color: #999999;
}
div#site_content div.row_first {
border-top-width: 0px;
}
div#content div.block {
margin-top: -1px;
}
div.block div.content {
max-width: 100%;
}
div.block div.content img,
div.block div.content * img,
div.block div.content embed,
div.block div.content * embed,
div.block div.content object,
div.block div.content * object {
max-width: 100%;
height: auto;
}
div.star-rating,
div.star-rating a {
background-image: url(http://i53.tinypic.com/2irxdoi.png)!important;
}
div#js_block_content_top_friends div.row1 img,
div#js_block_content_top_friends div.row2 img {
border: 1px solid white;
}
div#content div#js_block_border_friend_profile_small div.content {
border-bottom: 0px !important;
div.edit_bar input.button {
color: black !important;
}
div.edit_bar {
background-color: white !important;
}
div.edit_bar input.button:hover {
background-color: lightgrey;
border-color: lightgrey;
}
If you notice any issues with this layout send a message to [
http://www.friendburst.com/pfeiffer_stylez/ ]
or visit the [
FriendBurst Customizing Forum ].
Errata list:
06/01/2011 - A modification for the top friends iteration count.
13/01/2011 - Since we can move the sections from one column to the other now, some updates were necessary.