
for peepz who don’t have any software to do the designing
basic need : FIREFOX browser
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:
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}
things to consider:
1. addjust the #footer_container padding depending to ur image height.
2. if u r planning to have a sideway style layout dont hide the #navigation
apply the following instead
#navigation {width: 1500px! important;visibility: hidden! important }
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..
.controlpanel, .photos, .moreabout, .publiccomments, .friends {display:none!important}
5. if not do the repositioning
the basic codes for all boxes
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 #___ ;}
sample image :
from this 
To this
All u need is to print screen … cut and edit..
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 FIREFOX
http://profiles.friendster.com/66610334
Sample with content ( using the image)
http://profiles.friendster.com/65591919#switpotato
Codes used:
/******************************
BG-IMAGE WITH TRANSPARENT BOXES
tutorial by - switpotato
http://www.friendsterforum.com
*******************************/
body { background-image: url(http://www.freewebtown.com/switpotato/backgrounndimages/opacity.jpg);
background-repeat: no-repeat; background-color: #F5A59C;}
#footer_container{padding-top:650px! 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}
/****************
BOX CUSTOMIZATION
*****************/
/*CONTROLPANEL BOX CODE*/
.controlpanel{
position: absolute !important;
top: 122px !important;
left: 30px !important;
width: 180px !important;
height: 189px!important;
-moz-border-radius:5px 70px 5px 70px;
background-color: #FF4500;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/*PHOTO GALLERY BOX CODE */
.photos {
position: absolute !important;
top: 320px !important;
left: 30px !important;
width: 180px !important;
height: 270px!important;
-moz-border-radius: 5px 70px 5px 70px;
background-color: #FF4500;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/*MOREABOUT ME BOX CODE */
.moreabout{
position: absolute !important;
top: 100px !important;
left: 220px !important;
width: 390px !important;
height: 300px!important;
-moz-border-radius: 20px 20px 20px 20px;
background-color: #FF4500;
font-size; ! important;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/*TESTIMONIALS BOX CODE */
.publiccomments{
position: absolute !important;
top: 410px !important;
left: 220px !important;
width: 390px !important;
height: 180px!important;
-moz-border-radius: 10px 10px 10px 10px;
background-color: #FF4500;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/*MEDIA BOX CODE */
.scrapbook {
position: absolute !important;
top: 50px !important;
left: 220px !important;
width: 390px !important;
height:40px!important;
-moz-border-radius:150px 150px 150px 150px;
background-color: #FF4500;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/*FRIENDS BOX CODE */
.friends {
position: absolute !important;
top: 50px !important;
left: 618px !important;
width: 198px !important;
height:140px!important;
-moz-border-radius:10px 10px 10px 10px;
background-color: #FF4500;
filter:alpha(opacity=20); -moz-opacity:10.1;opacity: 0.2;
border:1px solid #C0C0C0;}
/******************************
END OF TUTORIAL
http://www.friendsterforum.com
*******************************/Last edited by switpotato (2008-07-26 03:29:15)



nc tutorial..
i think its for overlays... ,,V_

-Offline- |


Yellow Flash wrote:
nc tutorial..
i think its for overlays... ,,V_
nhaaaa... u can use this in any layout ...
sample... profile css w/ js >>> http://profiles.friendster.com/65591919#switpotato
later ill make plain css using the same image all u need are imagination... 
@ ck... ill fix first my page... ill mssg u soon muahhhsss 


Weeee you already posted it 
I think the next update will be........................It will work perfectly also on IE 
Thanks for sharing, im lovin your codes ![]()

thanks! nice tutorial! ^^

-Offline- |

another extreme works from monix...
this is unique and cool...
keep sharin!!!


@ lalaine... yep sissy... before anyone claim its their idea i saw someone do the repositioning and cp thingy...upon seeing her codes lolerz to the max... you know who see is.. no more ms nice swit ...
@ cronix .... geeez enx... 
@ ck muahhss..
ill have new one soon lol i deleted my acct lately
Last edited by switpotato (2008-07-26 08:18:46)


-Offline- |

tnx for sharing
-Offline- |

_Bhudz_ wrote:
tnx for sharing
continue spamming in this section and you will get to know me well..
-Offline- |

nice!,It's an easy way...
I thought his was very complicated...
hahah!
-Offline- |

cool..
thanks for sharing..
very wonderful
-Offline- |

wooo cool for firefox users
-Offline- |

Vipper wrote:
wooo cool for firefox users
nyakk u dont get the point of my post dont u... ?
the process of making .. main image is done thru firefox
once save as jpeg or png ... the design will suits all browser....
have u seen the final sample wherein i use the image i created...? 
Last edited by switpotato (2008-07-29 03:14:12)


..nice page..could i borrow ur page but i wanna make some customize with that code..plizz..
if u dont mind of course..
-Offline- |

ahhmmm..
it doesnt wotk in IE.?
only in firefox only.?
but..
thnx for sharing^^
keep up d good work

-Offline- |

Great Tutorial, great idea... ![]()
-Offline- |