for peepz who [b]don’t have any software to do the designing[/b] basic need : [b]FIREFOX browser [/b] 1. prepare a wallpaper to be use ... any size will do. 2. open a new acct.. make sure u have content for ur boxes eg: for more abou, media ,comment ... juz a single letter will do for photo .. 1 pic to be use a main pic ... one for pic for the album for friend .. one fren will do why we need to have those? since boxes wont show if u didnt fill up those part 3. lets do the coding... save this first: [quote]body { background-image: url(ur img url here); background-repeat: no-repeat;} #footer_container{padding-top:1330px! important;} /*HIDING CODES*/ #navigation ,#headersearch{display:none!important ;background:transparent; } #googleAdPlacement, .commonbox_noborder, .Application, .viewall, .meettrail, .commonbox h1, .commonbox h2, #controlPanelButtons, #content_0 .imgblock200, .controlpanel td , .flogridp .flogriditem , .moreabout .q , .publiccomments .dtd , .imgblock75, .evenrow , .flogrid75, .flogrid50 {display:none! important} .usercontent {font-size:0px! important}[/quote] [b]things to consider:[/b] 1. addjust the #footer_container padding depending to ur image height. 2. if u r planning to have a [b]sideway style layout [/b]dont hide the #navigation apply the following instead [quote]#navigation {width: 1500px! important;visibility: hidden! important }[/quote] adjust the width according to ur image width 4. decide how many boxes u will use .. if you are targeting a one box layout like using only the .scrapbook (media) add the following to your hiding codes.. [quote].controlpanel, .photos, .moreabout, .publiccomments, .friends {display:none!important}[/quote] 5. if not do the repositioning the basic codes for all boxes [quote]div class { position: absolute !important; top: _ px !important; left: _ px !important; width: _ px !important; height: _ px!important; -moz-border-radius: _ px _ px _ px _ px; background-color: #__ ; filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2; border: _ px solid #___ ;}[/quote] sample image : from this [img]http://www.geocities.com/switpotato.monix/opacity/opacity.jpg[/img] To this [img]http://www.geocities.com/switpotato.monix/opacity/demosmall.PNG[/img] [b]All u need is to print screen … cut and edit..[/b] Save it as png or jpeg but much preferably As png use ur new image as u background for ur layout for applying content … just use css box positioning.. this will work well to the rest of js tricks… Sample preview : use [b]FIREFOX [/b] http://profiles.friendster.com/66610334 [b]Sample with content[/b] ( using the image) http://profiles.friendster.com/65591919#switpotato Codes used: <">

Last edited by switpotato (2008-07-25 23:29:15)