FriendBurst Blog

Blue Blockamania Layout by Mars

March 1, 2011 · MarsMuzik

Here is a preview:

To use this layout, go to the navigation bar, then > Profile > Customize Profile… Once in the editor, reset all previous changes made in the built-in editor, and choose the “flavaheat” theme (the default – base theme). Then go to “CSS” in the upper left. Copy and paste the following code to the CSS box, then Save and Close.

** BONUS BG added **, you can easily swap it out. Just replace this:

http://www.friendburst.com/images/profile/blue-block-mosaic.png

with this:

http://www.friendburst.com/images/profile/blue-blockamania-2.png

you will find it in the very first block of code below

** Thanks for putting it there, Shan **

** One more BONUS BG …..Enjoy **

http://www.friendburst.com/images/profile/blue-puzzle-flood-1.png

** March 9, 2011…added another BONUS BG, this one has 3-D effects to the blocks **

http://www.friendburst.com/images/profile/blue-blockamania-3.png
____________________________________________________________


.layout[coded_by_shan_redesigned_by_mars] {
}

body {
background-color: #000000;
background-image: url(http://www.friendburst.com/images/profile/blue-block-mosaic.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-face-color: #000000;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #aaaaaa;
scrollbar-3dlight-color: #454545;
scrollbar-shadow-color: #252525;
scrollbar-highlight-color: #000000;
scrollbar-darkshadow-color: #000000;
font-family: arial;
}

textarea {
overflow-y: auto;
}

.body_width_holder {
width: 920px;
}

div#header {
background-color: transparent;
background-image: none;
background-repeat: repeat-x;
border: 1px solid white;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-top: none;
}

div#header a {
color:white;
}

div#header a:hover {
color: red;
}

div#header div#custom_logo a img {
visibility: hidden;
}

div#header div#custom_logo a {
display: block;
background-image: url(http://www.friendburst.com/images/profile1/frbu-ypfs-logo_225.png);
background-repeat: no-repeat;
width: 225px;
height: 53px;
margin-top: 34px;
}

div#header #ttiwelcome {
width: 690px;
}

div#header #ttiwelcome #first_name {
color: #ffffff;
}

div#header #time_stamp a {
font-size: 12px;
}

div#header #ttitopnav {
background-image: none;
}

div#header #ttitopnav ul li a:hover {
background-color: transparent;
}

div#header ul#main_nav {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
background-position: center left;
background-repeat: repeat;
background-attachment: scroll;
color: #ffd700;
margin-left: 1px;
padding: 1px 0 1px 0;
width: 99.8%;
height: 30px;
border: 1px solid white;
}

div#header ul#main_nav li a {
color: orchid;
text-shadow: 1px 1px 1px #191919;
line-height: 20px;
height: 30px;
padding: 5px 15px 0 15px;
}

div#header ul#main_nav li:hover a {
background: transparent;
color: #ffffff;
line-height: 20px;
}

div#header div#right_nav ul li a {
color: orchid;
text-shadow: 1px 1px 1px #191919;
line-height: 20px;
height: 30px;
padding: 5px 15px 0 15px;
}

div#header div#right_nav ul li:hover a {
background: transparent;
color: #ffffff;
text-decoration: none;
line-height: 20px;
}

div#header ul#main_nav li ul li a {
background-image: none !important;
border: none;
padding-left: 10px !important;
background-color: #000000 !important;
color: #ffffff !important;
height: 15px !important;
line-height: 15px !important;
padding: 3px 0 3px 10px;
}

div#header ul#main_nav li ul li a:hover {
background-color:blue !important;
color: #ffffff !important;
}

div#header ul#main_nav li ul {
border: 1px solid white;
margin-top: 9px;
border-top: 0px;
}

div#header ul#main_nav li ul li.first {
border: none;
}

div#header div#right_nav ul li ul li a {
background-color: #000000 !important;
border: none;
color: #ffffff !important;
height: 15px;
line-height: 10px !important;
padding: 3px 0 3px 10px;
}

div#header div#right_nav ul li ul li a:hover {
background-color: blue !important;
color: white !important;
}

div#header div#right_nav ul li ul {
border: 1px solid white;
margin-top: 9px;
border-top: 0px;
}

div#header div#right_nav ul li ul li.first {
border: none;
}

div#header div#right_nav {
padding: 1px 0 1px 0;
}

div#header div#top_nav_holder {
margin: 1px auto;
min-height: 32px;
background-color: transparent;
border: none;
}

div#top_nav {
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}

div#header div#top_nav a {
color: orchid;
}

div#header div#top_nav a:hover {
color: #ffffff;
}

div#header div#top_nav_search {
background-color: purple;
border: 1px solid black;
}

div#header input#search_field {
background-color: transparent;
}

div#header input#search_button {
background: transparent url(http://www.friendburst.com/images/profile1/layout-res/find.png) no-repeat scroll 0 0 !important;
}

div#header div#top_nav_search input#search_field {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
color: white;
}

#content_container {
background-color: transparent;
background-image: none;
background-position: top left;
background-repeat: repeat;
background-attachment: scroll;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid white;
margin-top: 10px;
padding-top: 0;
color: #454545;
}

#profile_menu {
position: relative;
margin-left: 400px !important;
margin-top: -37px !important;
}

#profile_menu ul {
padding: 0;
}

#profile_menu ul li a {
background-color: #000000 !important;
border: 1px solid black !important;
color: #ffffff !important;
font-size: 8pt !important;
margin: 0 !important;
}

#profile_menu ul li a:hover {
background-color: blue !important;
color: white !important;
}

#profile_menu ul li.active a {
background-color: blue !important;
color: white !important;
}

.profile_header {
background-color: transparent;
background-position: center left;
background-repeat: repeat-x;
background-attachment: fixed;
font-weight: bold;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-style: none;
margin-bottom: 10px;
padding: 0 0 0 10px;
}

.profile_header a {
color: white;
}

.profile_header a:hover {
color: orchid;
text-decoration: none;
}

.profile_online_status {
position: absolute;
margin: 5px 0 0 0;
padding: 1px 0 0 20px;
background-image: url(http://i44.tinypic.com/zyhydj.gif);
background-position: 9px 5px;
background-repeat: no-repeat;
color: transparent;
font-size: 8pt;
text-transform: uppercase;
}

.profile_header .extra_info {
color: #ffffff;
padding: 4px 0 4px 2px;
}

.profile_image_holder {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border: 1px solid white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 7px 0 7px 0;
}

.profile_image_holder .thickbox img {
border: 0px;
width: 150px;
height: auto;
}

#profile_nav_list {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border: 1px solid white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

#profile_nav_list ul li a {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
color: #ffffff;
border: none;
border-bottom: 1px dotted white;
}

#profile_nav_list ul li a:hover {
background-color: blue;
color: white;
}

div#sidebar div.block {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border: 1px solid white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

div#sidebar div.block div.title {
background-color: transparent;
background-position: center center;
background-repeat: repeat-x;
background-attachment: scroll;
border-style: none;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
color: #ffffff;
}

div#sidebar div.block div.content {
}

div#sidebar {
color: #ffffff;
padding: 0 0 0 10px;
}

div#sidebar a {
color: #ffffff;
}

div.block div.bottom {
background-color: transparent !important;
}

div.block div.bottom a:hover {
background: #777777 !important;
color: #000000;
border: 1px solid white;
}

div.info_left {
text-align: left;
}

div.block div.content .p_bottom_10 img {
background-color: transparent;
border: 2px solid #000000;
width: 50px;
height: 50px;
}

div.block div.content .p_bottom_10 img:hover {
border: 2px solid #ffffff;
}

#js_block_content_profile_group img {
background-color: #000000;
border: 1px solid #333333;
width: 50px;
height: 50px;
}

#js_block_content_profile_group img:hover {
border: 1px solid #ffffff;
}

#js_block_content_profile_group div.row1 {
border-top: none !important;
}

div#content div.block {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border: 1px solid white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

div#content div.block div.title {
background-color: transparent;
background-position: top left;
background-repeat: repeat-x;
background-attachment: scroll;
border-style: none;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
color: #ffffff;
}

div#content div.block div.content {
}

.extra_info a {
color: orchid !important;
}

div#content {
color: #ffffff;
}

div#content a {
color: #ffffff;
}

div#content a:hover {
color: #999999;
}

#js_custom_content_1 {
color: #777777;
font-size: 12px;
}

#js_custom_content_2 {
color: #777777;
font-size: 12px;
}

div#content_container div.split {
width: 63%;
padding: 0 0 0 12px;
}

div.block div.title {
color: #ffffff !important;
text-shadow: 1px 1px 1px #333333;
text-align: center;
line-height: 17px !important;
}

div.star-rating {
background-image: url(http://www.friendburst.com/images/profile1/layout-res/frburatingstar.png) !important;
}

div.star-rating a {
background-image: url(http://www.friendburst.com/images/profile1/layout-res/frburatingstar.png) !important;
}

.comment_header {
background: transparent !important;
border-top: 1px dotted white !important;
color: #555555 !important;
}

.comment_box {
background: transparent !important;
}

.comment_content {
background: transparent !important;
}

.comment_link {
background: transparent !important;
}

.comment_link li a {
background-color: purple !important;
border: 1px solid black !important;
color: white !important;
}

.comment_link li a:hover {
background: black!important;
border: 1px solid black!important;
color: black !important;
}

div.comment_feed {
background: transparent !important;
margin-top: 0;
}

div.comment_feed .w_95 {
margin-left: 15px;
}

div.comment_mini {
background: transparent !important;
}

#js_feed_content div.t_center {
left: 20px !important;
}

#js_feed_content input {
background: #000000;
border-top: 1px solid #111111;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
border-left: 1px solid #111111;
}

#js_feed_content textarea {
background: #000000;
border-top: 1px solid #111111;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
border-left: 1px solid #111111;
}

input#js_feed_comment_submit {
background: #555555 !important;
border: 1px solid #999999 !important;
color: #000000 !important;
font-family: arial;
margin-left: 15px !important;
}

input#js_feed_comment_submit:hover {
background: #777777 !important;
border: 1px solid #cccccc !important;
color: #000000 !important;
}

a#feed_view_more {
background-color: #000000 !important;
color: #999999 !important;
font-weight: normal !important;
}

a#feed_view_more:hover {
background-color: #777777 !important;
color: #000000 !important;
font-weight: normal !important;
}

div#js_feed_content img.v_middle {
display: none;
}

#js_feed_content div.row1 {
border-top: 1px dotted white;
}

#js_feed_content div.row2 {
border-top: 1px dotted gold;
}

div.content div.main_break {
padding-top: 0;
}

#js_comment_form_holder {
padding: 5px 0 0 0;
background-color: transparent;
}

#js_comment_form .table {
padding-bottom: 2px;
}

#js_comment_form .table_right {
padding: 0 3px 0 3px !important;
margin-left: 0;
}

#js_comment_form .edit_menu_container {
margin-left: 15px;
}

#js_comment_form div.table_clear {
margin-left: 3.2%;
}

.w_95 {
background-color: transparent !important;
border: 1px solid black !important;
}

.w_95 .editor_menu {
background-color: purple!important;
border: none !important;
}

.w_95 a.editor_button {
border: 1px solid white !important;
}

.w_95 a.editor_button:hover {
background-color: black !important;
border: 1px solid #656565 !important;
}

.w_95 .editor_separator {
margin: 4px 3px 2px 2px;
background-color: transparent;
border-style: solid;
border-color: #191919 #393939 #393939 #191919;
}

.w_95 div#layer_text {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
}

.w_95 textarea {
background: transparent !important;
color: #ffffff !important;
border: 1px solid white;
padding: 3px;
}

input#js_comment_submit.button {
background: #b22222;
border: 1px solid #ffffff;
color: #000000;
font-family: arial;
}

input#js_comment_submit.button:hover {
background: #777777;
border: 1px solid #cccccc;
color: #000000;
}

.pager li a {
background-color: purple!important;
border: 1px solid black !important;
color: white !important;
}

.pager li a.active {
background-color: blue !important;
border: 1px solid black !important;
color: white!important;
}

.pager li a:hover {
background-color: blue !important;
border: 1px solid black !important;
color: white !important;
}

div#content div.block div.content input.button {
background: purple!important;
border: 1px solid black !important;
color: white !important;
font-family: arial;
}

div#content div.block div.content input.button:hover {
background: black!important;
border: 1px solid black !important;
color: white !important;
}

div#bottom {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border: 1px solid white;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-bottom: none;
}

div#bottom ul li.rss_link a {
background-image: url(http://www.friendburst.com/images/profile1/layout-res/rss-orange.png);
background-color: transparent !important;
border: none !important;
}

a#select_lang_pack img {
visibility: hidden;
}

a#select_lang_pack {
background-image: url(http://www.friendburst.com/images/profile1/layout-res/selector_arrow.gif);
background-position: center right;
background-repeat: no-repeat;
background-attachment: scroll;
}

div#bottom ul li a {
color: #ffffff;
}

div.bottom_menu ul li span {
color: #555555;
}

div#bottom div.copyright {
color: #ffffff;
}

.subpages {
}

div#content_container {
min-height: 500px;
}

div#content_container div.full {
background-color: #000000;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
margin: 0 8px 0 8px;
border: 1px solid #252525;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

div#content_container div.full #site_content {
border: none;
}

div#content_container div.full h1 {
margin: 0 0 0 -6px;
width: 99.1%;
}

.profile_header img.profile_image {
background-color: #000000;
border: 1px solid #252525;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
margin-right: 9px;
margin-top: 60px;
z-index: 9;
visibility: hidden;
}

div#content h1 {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
background-position: center;
background-repeat: no-repeat;
border-bottom: none;
color: #ffffff;
font-size: 11pt;
font-weight: bold;
padding: 3px 10px 0 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
height: 22px;
text-align: center;
line-height: 16px;
margin-bottom: 0;
}

div#content h1 a {
color: #ffffff;
display: block;
margin-top: 2px;
}

div#content .h1 a {
color: #ffffff;
display: block;
margin-top: 2px;
}

div#content h1 a:hover {
color: #d5d5d5;
}

div#content .h1 a:hover {
color: #d5d5d5;
}

div#content.split h1 a {
margin-top: 0 !important;
color: #ffffff;
font-size: 14px;
}

div#content.split .h1 a {
margin-top: 0 !important;
font-size: 14px;
}

div#content.split h1 {
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
background-position: center;
background-repeat: no-repeat;
border-top: 1px solid #252525;
border-right: 1px solid #252525;
border-left: 1px solid #252525;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
text-align: center;
}

div#content.split .h1 {
background-color: #000000;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
background-position: center;
background-repeat: repeat;
margin: 0 !important;
border-top: 1px solid #252525;
border-right: 1px solid #252525;
border-left: 1px solid #252525;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
line-height: 22px !important;
padding: 0 0 3px 0 !important;
}

div#content_container div.split div#breadcrumb_parent h1 {
border-top: none;
}

div#sidebar div#menu {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid #252525;
margin-bottom: 10px !important;
}

div#sidebar div#menu li a {
background-color: #000000;
color: #999999;
border: none;
border-bottom: 1px dotted white;
}

div#sidebar div#menu li a:hover {
background-color: #3a0d27;
color: #e3e3e3;
}

.row_first {
border-top: none !important;
}

div.row1 {
border-top: 1px dotted white;
}

div.row2 {
border-top: 1px dotted gold;
}

#site_content {
background-color: transparent;
background-image: url(http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
border-right: 1px solid #252525;
border-left: 1px solid #252525;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-top-left-radius: 0;
}

#site_content div .t_center[style="width: 80px; float: left;"] a img {
width: 75px;
height: 75px;
border: 1px solid #252525;
}

#site_content div .t_center[style="width: 80px; float: left;"] a img:hover {
width: 75px;
height: 75px;
border: 1px solid #ffffff;
}

#site_content h3 {
border-bottom: 1px solid #555555;
color: #999999;
}

#site_content div.block {
border-right: none !important;
border-left: none !important;
border-top: none !important;
-moz-border-radius-topright: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
}

div#content div#breadcrumb_parent {
margin-left: 0 !important;
}

div#content h2 {
background-image: none !important;
border-right: 1px solid #252525;
border-bottom: none;
border-left: 1px solid #252525;
-moz-border-radius-topright: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
margin: 0 !important;
padding: 0 0 5px 10px;
}

div#content div#breadcrumb_parent h1 {
background-image: none !important;
border-right: 1px solid #252525;
border-bottom: none;
border-left: 1px solid #252525;
-moz-border-radius-topright: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
margin: 0 !important;
padding: 0 0 5px 10px;
}

div#content h2 a {
display: block;
padding-top: 3px !important;
margin-left: 5px;
color: #cccccc !important;
}

div#content div#breadcrumb_parent h1 a {
display: block;
padding-top: 3px !important;
margin-left: 5px;
color: #cccccc !important;
}

div#content h2 a:hover {
color: #a5a5a5 !important;
}

div#content div#breadcrumb_parent h1 a:hover {
color: #a5a5a5 !important;
}

div#content .h1 {
border-bottom: none;
line-height: 16px;
text-align: center;
margin-bottom: 0;
}

div#content div#breadcrumb_parent #pointer {
color: #cccccc;
margin-left: 5px;
}

.image_hover_holder {
background-color: #000000;
border: 1px solid #252525;
}

.image_hover_holder_hover {
background-color: #000000;
border: 1px solid #ffffff;
}

.photo_stream_photo_active {
background-color: #000000 !important;
}

#js_user_photo_albums_outer {
padding: 0 5px 7px 5px;
}

#js_user_photo_albums {
background-color: transparent;
background-image: url (http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
}

#js_user_photo_albums .t_center {
margin-top: 15px !important;
}

#js_album_outer_content {
padding: 0 12px 0px 12px;
}

#js_album_content {
background-color: transparent;
background-image: url (http://www.friendburst.com/images/profile/mod-bg-black-50%25.png);
}

div#content .item_info {
margin: 0 !important;
}

.separate {
border-top: 1px solid #555555;
}

ul.action a {
background-color: transparent;
border: none;
color: #aaaaaa !important;
}

ul.action a:hover {
background-color: transparent;
border: none;
color: #ff0000 !important;
text-decoration: underline;
}

ul.action li a {
background-color: transparent;
border: none;
color: #aaaaaa !important;
}

ul.action li a:hover {
background-color: transparent;
border: none;
color: #ff0000 !important;
text-decoration: underline;
}

#site_content input.button {
background: #191919 !important;
border: 1px solid #333333 !important;
color: #777777 !important;
font-family: arial;
}

div#sidebar div.block div.content input.button {
background: #191919 !important;
border: 1px solid #333333 !important;
color: #777777 !important;
font-family: arial;
}

#site_content input.button:hover {
background: #252525 !important;
border: 1px solid #494949 !important;
color: #cccccc !important;
}

div#sidebar div.block div.content input.button:hover {
background: #252525 !important;
border: 1px solid #494949 !important;
color: #cccccc !important;
}

div.main_break {
padding-top: 7px;
}

div#sidebar div.block * {
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}

div#content div.block * {
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}

div#content div.block div.content * a {
color: #4F8FFF;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}

div#sidebar div.block div.content * a {
color: #4F8FFF ;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}

div.block a:hover {
color: white !important;
text-shadow: 1px 1px 1px black;
}

Profile Design

1 Comment

Commenting on blog posts is coming back soon. You can read the comments here; to talk with a member now, leave a comment on their profile or send them a message.