Snowball
The higher you fly, the lower you can drop.
About Me

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.
Comments
pfeiffer stylez customizing wrote at December 24, 11:21:20 am
pfeiffer stylez customizing
Midnight wrote at December 24, 11:14:59 am

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Midnight
pfeiffer stylez customizing wrote at December 24, 11:06:49 am

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

pfeiffer stylez customizing
Snowball wrote at December 24, 11:09:27 am

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Snowball