Orange Mosaic Layout by Mars
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.
** UPDATED – Feb. 26, 2011 **
Fixed code error that caused BG image to not show, that has been fixed now. Also did some button border color tweaks, did away with white and went to black instead.
** UPDATED – Feb. 28, 2011 **
Removed code that was resizing pics/ videos in comments. It was an oversight when i copied the code to use as my template.
** BONUS BG added, replace the existing BG with this one **
http://www.friendburst.com/images/profile/orange-mosaic-2.png
____________________________________________________________
.layout[coded_by_shan_redesigned_by_mars] {
}
body {
background-color: #000000;
background-image: url(http://www.friendburst.com/images/profile/orange-mosaic.jpg);
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: #ffffff;
}
div#header a:hover {
color: gold;
}
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: #ffd700;
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: #ffd700;
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: #9f0000 !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: #9f0000 !important;
color: #ffffff !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: #ffffff;
}
div#header div#top_nav a {
color: #ffd700;
}
div#header div#top_nav a:hover {
color: #ffffff;
}
div#header div#top_nav_search {
background-color: orange;
border: 1px solid black;
}
div#header input#search_field {
background-color: black;
}
div#header input#search_button {
background: transparent url(http://www.friendburst.com/images/profile1/layout-res/find2.png) no-repeat scroll 0 0 !important;
}
div#header div#top_nav_search input#search_field {
background-color: transparent;
color: black;
}
#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: orange !important;
color: black !important;
}
#profile_menu ul li.active a {
background-color:orange !important;
color: black !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: #ffffff;
}
.profile_header a:hover {
color: #ffffff;
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: orange;
color: black;
}
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: #ffd700 !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: orange !important;
border: 1px solid black !important;
color: black !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: #9f0000!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: black;
}
.w_95 textarea {
background: transparent !important;
color: #ffffff !important;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
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: orange!important;
border: 1px solid black !important;
color: black !important;
}
.pager li a.active {
background-color: #000000 !important;
border: 1px solid orange !important;
color: orange!important;
}
.pager li a:hover {
background-color: #000000 !important;
border: 1px solid black !important;
color: #ff0000 !important;
}
div#content div.block div.content input.button {
background: orange!important;
border: 1px solid black !important;
color: black !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;
}
div#content div.block * {
color: white;
}
div#content div.block div.content * a {
color: gold;
}
div#sidebar div.block div.content * a {
color: gold;
}
div.block a:hover {
color: white !important;
}
cool 8)
Martians are very busy people..
thanks, i am busy trying to get a few more layouts together. i can use this same code and replace the background to make a new layout. i have another BG ready to use, it can replace the image of this layout
http://www.friendburst.com/images/profile/hexagonic.jpg
for Darcie
see this code ?
.layout[coded_by_shan_redesigned_by_mars] {
}
body {
background-color: #000000;
background-image: url(http://www.friendburst.com/images/profile/orange-mosaic.jpg);
background-position: center center;
background-repeat: no-repeat;
remove this:
background-image: url(http://www.friendburst.com/images/profile/orange-mosaic.jpg);
change to this:
background-image: url(http://www.friendburst.com/images/profile/hexagomics-repeat-bg.png);
then change this:
background-repeat: no-repeat;
to this:
background-repeat: repeat;