friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

#1  2008-07-25 10:31:36

switpotato
» FriendsterWhiz
switpotato's display avatar
dcrazier dbetter bxtreme
Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2980
Reputation: 285

BG- img making

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

:arrow:  http://profiles.friendster.com/66610334

Sample with content ( using the image)
:arrow:   http://profiles.friendster.com/65591919#switpotato


Codes used:

Code:

  /****************************** 
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)


   
my official site>>    http://switpotato.ucoz.com/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!

#2  2008-07-25 10:45:06

regiehiozn
» FriendsterWhiz
regiehiozn's display avatar
friendship :]
Location: your place
Registered: 2007-08-27
Posts: 3054
Reputation: 79
Friendster

Re: BG- img making

wow swit! this is very unique!! haha.. thanks.

#3  2008-07-25 14:43:20

Yellow Flash
» FriendsterAgent
Yellow Flash's display avatar
Almost Christmas
Location: HiddenLeaf Village
Registered: 2008-02-29
Posts: 2063
Last visit: Today
Reputation: 112
Friendster

Re: BG- img making

nc tutorial..

i think its for overlays...  ,,V_


#4  2008-07-25 15:30:39

cklahrckiey
» FriendsterFreak
cklahrckiey's display avatar
Tha Mafia
Class-S
Location: Lea's Heart
Registered: 2007-11-21
Posts: 1715
Reputation: 34

Re: BG- img making

nice tuts ate nix...
great for newbies like me :D

can i have your friendster account? :D :rose:



"You hit me, we hit you!"

#5  2008-07-26 03:14:29

switpotato
» FriendsterWhiz
switpotato's display avatar
dcrazier dbetter bxtreme
Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2980
Reputation: 285

Re: BG- img making

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...  :P


@ ck... ill fix first my page...  ill mssg u soon   muahhhsss :kiss:


   
my official site>>    http://switpotato.ucoz.com/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!

#6  2008-07-26 03:46:53

cklahrckiey
» FriendsterFreak
cklahrckiey's display avatar
Tha Mafia
Class-S
Location: Lea's Heart
Registered: 2007-11-21
Posts: 1715
Reputation: 34

Re: BG- img making

^ok ill wait then...
for now...another plus!!! :D :thumbsup:




"You hit me, we hit you!"

#7  2008-07-26 07:07:52

angelalaine
» Promoter
angelalaine's display avatar
Registered: 2007-07-20
Posts: 1847
Reputation: 141
???

Re: BG- img making

Weeee you already posted it :D
I think the next update will be........................It will work perfectly also on IE :D

Thanks for sharing, im lovin your codes :thumbsup:



#8  2008-07-26 07:27:16

mdbest13
» FriendsterNewbie
mdbest13's display avatar
___CuTe___
Location: cavite,philippines
Registered: 2007-11-22
Posts: 35
Last visit: Yesterday
Reputation: 1
Friendster

Re: BG- img making

thanks! nice tutorial! ^^



+'...-DoN't hAtE mE BeCoz I'm BeauTiFuL,,, HaTe mE bCoZ uR maN thinKs I aM-...'+

#9  2008-07-26 07:43:52

cronixemo
» FriendsterElite
cronixemo's display avatar
KILL 'EM ALL! YA-HA!!
Friendstertalk University
Location: DEIMON HIGH
Registered: 2007-11-23
Posts: 3500
Reputation: 134

Re: BG- img making

another extreme works from monix...=)

this is unique and cool...

keep sharin!!!




photoshop + boredom = art!

#10  2008-07-26 08:18:04

switpotato
» FriendsterWhiz
switpotato's display avatar
dcrazier dbetter bxtreme
Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2980
Reputation: 285

Re: BG- img making

@ 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...  :kiss:

@ ck muahhss.. :kiss: ill have new one soon lol i deleted my acct lately

Last edited by switpotato (2008-07-26 08:18:46)


   
my official site>>    http://switpotato.ucoz.com/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!

#11  2008-07-27 13:53:08

breave
» FriendsterTalker
breave's display avatar
~ unemployed ~
Location: CiTy Of CorrUpTor
Registered: 2008-05-23
Posts: 280
Last visit: 2008-11-19
Reputation: 4
Friendster

Re: BG- img making

cool trick broo...
i loved...
thanks for share bro :o:o:o



#12  2008-07-27 15:18:19

_Bhudz_
» FriendsterTalker
_Bhudz_'s display avatar
BhudzRuleZzz
Location: Ph, Pagadian City
Registered: 2008-07-09
Posts: 102
Last visit: 2008-10-11
Reputation: ~
Friendster

Re: BG- img making

tnx for sharing

#13  2008-07-27 15:23:40

Lordheinz
» Banned
^ trashed
Registered: 2007-06-26
Posts: 5178
Last visit: 2008-09-11
Reputation: 242

Re: BG- img making

_Bhudz_ wrote:

tnx for sharing

continue spamming in this section and you will get to know me well..


Thank you so much FRIENDSTERTALK...

#14  2008-07-27 16:16:39

tweaktweakers
» FriendsterManiac
tweaktweakers's display avatar
unwritten
Location: somewhere
Registered: 2007-07-28
Posts: 868
Last visit: 2008-11-29
Reputation: 19
Friendster

Re: BG- img making

nice!,It's an easy way...
I thought his was very complicated...:wasted:
hahah!



IMMA WATCH TWILIGHT TODAY!

#15  2008-07-28 02:34:11

Chimee
» FriendsterTalker
=+Im Not perfect+=
Friendstertalk University
Registered: 2008-06-29
Posts: 109
Last visit: 2008-08-01
Reputation: 6
Friendster

Re: BG- img making

cool..
thanks for sharing..
very wonderful


#16  2008-07-29 01:24:25

Vipper
» FriendsterTalker
Vipper's display avatar
Vipper
Location: Isabela Ph.
Registered: 2007-09-17
Posts: 214
Last visit: 2008-08-22
Reputation: -1
Friendster

Re: BG- img making

wooo cool for firefox users


learn the rulez....so that you know how to break them...

#17  2008-07-29 03:13:29

switpotato
» FriendsterWhiz
switpotato's display avatar
dcrazier dbetter bxtreme
Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2980
Reputation: 285

Re: BG- img making

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...? :retard:

Last edited by switpotato (2008-07-29 03:14:12)


   
my official site>>    http://switpotato.ucoz.com/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!

#18  2008-07-29 07:05:53

syakira
» FriendsterNewbie
..mmm..
Location: space
Registered: 2008-05-30
Posts: 1
Last visit: 2008-08-01
Reputation: ~

Re: BG- img making

:)..nice page..could i borrow ur page  but i wanna make some customize with that code..plizz..:P
if u dont mind of course..

#19  2008-07-29 10:02:02

shia chan
» FriendsterManiac
shia chan's display avatar
-[COLD AND VIOLENT]-
Location: kawaii.world
Registered: 2008-07-27
Posts: 641
Last visit: 2008-11-29
Reputation: 32
Friendster

Re: BG- img making

ahhmmm..
it doesnt wotk in IE.?
only in firefox only.?

but..
thnx for sharing^^
keep up d good work



ii.KAWAII INSIDE.ii

#20  2008-07-29 10:06:29

underiez
» FriendsterNewbie
underiez's display avatar
Location: D:\Data\underiez
Registered: 2007-10-24
Posts: 80
Last visit: 2008-11-19
Reputation: ~
Friendster

Re: BG- img making

Great Tutorial, great idea... :thumbsup:




Never STOP for Learning! Pokoknya jangan pernah malu untuk selalu belajar, belajar dan belajar!

Search Friendstertalk

Board footer

FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2008 PunBB

[ 28 queries - 0.899 second ]

Pay Per Click Ads by pay per click advertising by Kontera

FriendsterTalk.com x

Welcome to FriendsterTalk! You'll need to login in order to fully use all the features and view all the sections of this site.

Please register if you're not yet a member. =)