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)