Brown Background CSS NON-OVERLAY LAyout

pepitto · 03-25-2007, 09:04 PM

here is a simple version of my profile in non-overlay version..you can copy it as long as the credits remain intact
preview http://www.friendster.com/pepitto

INSTRUCTIONS #1:
1. Copy the CSS codes below and EDIT it on a NotePad.
2. Save this file as myfile.css.
3. Upload it to any web hosting site (e.g., www.ripway.com).
4. Get the full URL of your css file (e.g., http://www.ripway.com/username/myfile.css).
5. Replace the URL_OF_FILE with the css URL.

6. Copy and paste the above codes to your SCHOOLS (Others).

CSS CODE:

/* FriendsterMagic - body background */
body {
background: #ffffff;
background-attachment: fixed;
background-repeat: repeat;
background-position: top left;
margin: 20px 0px 20px 0px;
background-image: url(http://h1.ripway.com/pepitto/bggun.jpg);

}

/*FriendsterMagic - first main table */
table#flo_wrapper {
margin: 20px auto 20px auto;
border: #564638;
border-style: ridge;
border-width: 5px;
background: #655446;
background-image: url();
background-attachment: fixed;
background-repeat: repeat;
background-position: top left;
}

/*FriendsterMagic - second main table */
table#flo1t {
background: transparent;
background-image: url(http://h1.ripway.com/pepitto/bggun.jpg);

background-attachment: fixed;
background-repeat: repeat;
background-position: top left;
padding: 30px;
margin: 10px 10px 10px 10px;
border: #564638;
border-style: ridge;
border-width: 5px;
}

table#flo1t td.ltd {
padding:20px 20px 5px 20px;
}
table#flo1t td.rtd {
padding:20px 20px 5px 20px;
}

/* FriendsterMagic - scrollbars */
body {
scrollbar-arrow-color: #000000;
scrollbar-base-color: #564638;
scrollbar-dark-shadow-color: #564638;
scrollbar-track-color: #564638;}

/* FriendsterMagic - master text color */
body,td,tr,div,p {color:#000000;}

/* FriendsterMagic - remove shoutout */
.controlpanel .so div#cpShoutoutBox, .controlpanel .so div#cpShoutoutEditBox { display:none; }
.controlpanel .sol {display:none;}
.controlpanel .sob {display:none;}

/* FriendsterMagic - remove more about me link */
.controlpanel a.more {display:none;}

/* FriendsterMagic - center profile info */
.controlpanel ul.data li {
text-align:center;
}
/* GLOBAL FONTS */
.usercontent { font-family:Comic Sans MS; color:#000000; }

/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:none; color:#000000; }
.data a, a.more, .commonbox .viewall { font-family:Verdana; color:#000000; }
.usercontent a:hover { text-decoration

verline underline; color:#655446; }

/* FriendsterMagic - image links specific module boxes*/
#controlpanelbuttons a {color: #655446;
border:none;
background-color:transparent;
}

#controlpanelbuttons a:link {color: #000000;
border:none;
background-color: transparent;
background-image: url(http://h1.ripway.com/pepitto/icon_alien.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;}

#controlpanelbuttons a:visited {color: #655446;
border:none;
background-color: transparent;
background-image: url(http://h1.ripway.com/pepitto/icon_alien.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;
}

#controlpanelbuttons a:hover {
color: #655446;
border:none;
background-color: transparent;
}

/* FriendsterMagic - master links */
body {cursor: url(http://images.bigoo.ws/content/cursor/funny/funny_7.ani);}
a {cursor: url(http://images.bigoo.ws/content/cursor/funny/funny_7.ani);}
a:link {color: #000000; text-decoration:none;}
a:visited {color:#655446; text-decoration:none;}
a:hover {color: #655446; text-decoration:none;}

/* FriendsterMagic - center master headers text*/
.commonbox h1, .commonbox h2 { /*header*/
background-color: TRANSPARENT;
text-align:center;
color: #000000;
}
.commonbox .viewall { /*viewall link*/
text-transform: #000000;
}
.commonbox .imgblock75, .ir { /*photo blocks*/
background-color: TRANSPARENT;
}
.commonbox .dr { /*name bars below photo blocks*/
background-color: TRANSPARENT;
}
.commonbox .evenrow { /*even row*/
background-color: TRANSPARENT;
}

/* FriendsterMagic - personalize logo */
#navigation {
background: transparent;
border-color:#564638;
border-style: ridge;
border-width:3px;
margin:40px 38px 40px 38px;
padding:300px 0 0 0;
background-image: url(http://h1.ripway.com/pepitto/banner2.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}

/* FriendsterMagic - main navigation*/
#mainnav {{display:none;}
margin:0 0 2px 0;
padding:0px 0 40px 0;
width:100%;
font-size:12px;
font-weight:bold;
backgroun-color: #transparent;}

#mainnav div.links a:link, #mainnav div.links a:visited, #mainnav div.links a:active { color:#000000; text-decoration:none; }
#mainnav div.links a:hover {color:#655446;font-size:12px;text-decoration:none;}
#mainnav .left {display:none;}
#mainnav .right {display:none;}
#navdivider {display:none;background:transparent;}
#subnav {display:none;}

/* FriendsterMagic - remove top banner */
.banner_ad_fix{display:none;}

/* FriendsterMagic - remove logo */
.logo {display:none;background:transparent;}

/* FriendsterMagic remove search form*/
#search {display:none;background:transparent;}
#search form {display:none;background:transparent;}

/* FriendsterMagic - remove footer */
#footer_container {display: none;}
#footer {display: none;}

/* FriendsterMagic - hide the connection box */
#meettrail{display:none;background:transparent;}

/* FriendsterMagic - hide google ads */
#googleAdFactory.fullwidth{position:absolute;top:-5500px;}

/* FriendsterMagic - hide report abuse */
.reportabuse{display:none;}

/* FriendsterMagic - remove featured sponsor */
#marketing_bg{display:none;background:transparent; }

.commonbox { /*box*/
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;
margin:auto auto auto 50px;
}

/* FriendsterMagic - photo gallery */
.photos { /*box*/
background-color: #564638;
background-image: url(http://h1.ripway.com/pepitto/row1.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top right;
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;}

/*FriendsterMagic - resize friends box */
#friends_2_2 {margin:auto 50px auto auto;}

/* FriendsterMagic - one column friends list */
.friends {
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;
padding-left:0px; padding-right:0; padding-top:18px; padding-bottom:250px;
}

.friends div.boxcontent{width:100%;text-align:center;}
.friends.flogrid75{text-align:center;width:75px;}
.friends div.viewall a{text-align:center;width:100%;padding-left:20px;}

#fanof_2_4 {margin:auto 50px auto auto;}

.fanof { /*box*/

background-color: transparent;
background-image: url();
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center bottom;
border: #564638;
border-style: ridge;
border-width: 5px;
padding-left:0px; padding-right:0; padding-top:18px; padding-bottom:250px;

}

.fanof div.boxcontent{width:100%;text-align:center;}
.fanof.flogrid75{text-align:center;width:75px;}
.fanof div.viewall a{text-align:center;width:100%;padding-left:20px;}

#groups_2_5 {margin:auto 50px auto auto;}

.groups { /*box*/
background-color: transparent;
background-image: url();
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center bottom;
border: #564638;
border-style: ridge;
border-width: 5px;
padding-left:0px; padding-right:0; padding-top:18px; padding-bottom:250px;

}
.groups div.boxcontent{width:100%;text-align:center;}
.groups.flogrid75{text-align:center;width:75px;}
.groups div.viewall a{text-align:center;width:100%;padding-left:20px;}

.blogsreviews { /*box*/
display:none;
}
.videos { /*box*/
display:none;
}

/* FriendsterMagic - public comments */
#publiccomments_1_7 {
background-color: #564638;
background-image: url(http://h1.ripway.com/pepitto/row1.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top right;
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;
}

/* FriendsterMagic - more about me */

.moreabout { /*box*/
background-color: #564638;
background-image: url(http://h1.ripway.com/pepitto/row1.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top right;
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;

/* FriendsterMagic - scrolling testimonial boxes */
.testimonials div div .dtd{width:100%;}
.testimonials div div .dtd ul{padding: 2px 2px 2px 2px; overflow: auto; border: 1px solid #564638; width: 400px; height: 75px;}
.testimonialscomments { /*box*/
background-color: TRANSPARENT;}
.testimonials { /*box*/
background-color: #564638;
background-image: url(http://h1.ripway.com/pepitto/row1.jpg );
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top right;
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;}

/* FriendsterMagic - media box */
.scrapbook { /*box*/
background-color: #564638;
background-image: url(http://h1.ripway.com/pepitto/row1.jpg );
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top right;
background-color: transparent;
border: #564638;
border-style: ridge;
border-width: 5px;
}
}

.reviews { /*box*/
display:none;
}
.user_tracker{
display:none;
}

.blogs { /*box*/
display:none;
}

/* IMAGE EFFECTS */
a:hover img { filter:alpha(Opacity=100,FinishOpacity=0,Style=2); }

7. save it.

MOre CSS layout to be posted soon.. Enjoy!!! [Updated on: toLocaleString(1174896260,"1174896260");Mon, 03/26/07 12:04 AM ]

**kirksydney** · 03-26-2007, 12:20 AM

Thanks for sharing. Keep them coming.

mmv27 · 03-27-2007, 10:33 AM

hi. how can i view the edit codes (from the notepad) before uploading them to any webhost? thanks.

pepitto · 03-27-2007, 03:39 PM

hi. how can i view the edit codes (from the notepad) before uploading them to any webhost? thanks.

MMV27 u need to copy the css code above and paste in in notepad and save it as css file. ex. "file.css"