how to customize your own layout friendster ...?
below, i wanna share how to make your own friendster layout, customized it just to make it fit with your own style...!he he
- chose a theme of your friendster layout , example, you want to make layout friendster inter milan fc theme, ( or even your own photo !), hmm, okey we pick Inter Milan …why not AC
- after that, all you need is to pick the photo or picture that you will make background....just say this picture...selanjunya yang anda perlukan adalah memilih photo atau picture yang akan anda jadikan background, anggap saja photo ini deh…
- okey, next you need to chose the colour theme...just all we know that inter milan is have blue and black colour in their favourite jersey...(he he, maybe some of you not know inter milan , but its okey...he he) btw, remember our colour theme now is blue and black…
- after that, we go to next step, important step, when you make the real modification....all is based on prime key of layout language : the css and HTML...
- okey, now we entering css language area, still remember colour theme that we apointed above..?yupz, you and me had agree to make lay out that coloured blue and balck, now your task is..(not my task ) to change the colour and texture or transparantion, (and even border size) from the layout fs that you will make..sound difficult?,..not really..he he , actually it is very simple, now, just check it below for the manual tutorial...
ida bagus gede sasra bhanutama
/* http://www.tutorial-friendster.blogspot.com */
/* PAGE BACKGROUND */
body {
background-image: url(http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-color: #000000;
cursor: ;
}
/* GLOBAL FONTS */
.usercontent {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
color: #ff0033;
}
.usercontent a:hover {
color: #cc0033;
}
/* MASTER BOXES */
.commonbox {
background-color: #ffffff;
background-image: url(http://i200.photobucket.com/albums/aa73/fs-layouts/fslybg/2008/06/hk-big/hk-big.gif);
}
.commonbox .evenrow {
background-color: transparent;
}
/* MASTER HEADERS */
.commonbox h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
background-color: #ffffff;
}
.commonbox h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
background-color: #ffffff;
}
/* CONTROL PANEL: BOX */
.controlpanel {
border-width: 1px;
border-style: solid;
background-color: transparent;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
border-color: #ff0000;
}
/* CONTROL PANEL: DATA */
.controlpanel .q {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
.controlpanel .data {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
}
.data a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
background-image: url(http://i200.photobucket.com/albums/aa73/fs-layouts/fslybg/2008/06/hk-big/hk-big.gif);
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
font-family: Arial, Sans-serif;
color: #ff0000;
border-color: #000000;
background-color: #ffffff;
text-decoration: ;
}
#controlPanelButtons a:hover {
font-family: Arial, Sans-serif;
color: #000000;
border-color: #ff0000;
background-color: #ffffff;
text-decoration: ;
}
/* MISC: TESTIMONIALS/REVIEWS TEXT */
.data {
font-family: Arial, Sans-serif;
color: #;
text-transform: ;
}
/* MISC: VIEW ALL LINKS */
.commonbox .viewall {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
background-color: #ffffff;
}
okz, now you will enter the step to edit and change this code into your "personality"..it is quite simple.....
after that you must register in photobucket.com…its simple…go tophotobucket.com and be their member ( join now ) and make your own accounti…
after be member in photobucket,com, then upload your pic, the way is click my album & upload...then upload your picture...after that seach "direct link" of your picture ...ussually in this format :
http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg
- now we will step ahead into fun part...the editor partz...!get ready...now i will give you the translate of the code...all you have to do is to change the code into your imagination type...
- the translate of the code is like this (the black text is represent code css, in other side green will represent the meaning ) :
/* PAGE BACKGROUND */
meaning all about your background
body {
background-image: url(http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg);
“http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg” change into http:// direct link picture that you've placed in photobucket.com
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat; no-repeat" can be change by "repeat"
background-color: #000000;#000000 is your background colour, its mean black, this colour can be changed by colour code that you can found on below of this article
}
/* GLOBAL FONTS */
Global fonts represented this kind text on box ….
.usercontent {color: #ffffff; }mark # its mean colour, #ffffff; mean colour code of white ,you can edit this colour (see colour code below of this article )
/* GLOBAL LINKS */
Global links represented this kind text on box ….
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
color: #ffffff;
}mark # its mean colour, #ffffff; mean colour code of white ,you can edit this colour (see colour code below of this article )
.usercontent a:hover {
color: #b3b3b3; colour can be changed, nb: hover its mean colour that below your main colour, (some kind blink-blink text effect when your cursor touch it )
text-decoration: line-through;
}
/* MASTER BOXES */
Master boxes represented this kind text on box ….
.commonbox {
border-width: 6px; the size of the border can be changed
border-color: #ffffff;border colour , can be changed
border-style: solid;
background-color: transparent; colour of background ,
}
.commonbox .evenrow {
background-color: transparent; }
colour of background evenrow,can be changed, box evenrow represented the box below of box of this masterboxes …
/* MASTER HEADERS */
Master header represented these boxes...
.commonbox h1, {
color: #000000; colour, can be changed
text-transform: uppercase;
background-color: #ffffff; colour, can be changed
}
.commonbox h2 {
color: #000000; colour, can be changed
text-transform: uppercase;
background-color: #ffffff; colour, can be changed
}
/* CONTROL PANEL: BOX */
Control panel box represented these box..
.controlpanel {
border-width: 6px; size, can be changed
border-color: #ffffff; colour, can be changed
border-style: solid;
background-color: transparent; colour, can be changed
}
/* CONTROL PANEL: USER PHOTO */
Control panel user photo represented these box :
.controlpanel .imgblock200 {
border-color: #ffffff; colour, can be changed
}
/* CONTROL PANEL: DATA */
Control panel data represented these text :
.controlpanel .q {
color: #ffffff; colour, can be changed
}
.controlpanel .data {
color: #b3b3b3; colour, can be changed
}
.data a {
color: #b3b3b3; colour, can be changed
text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
this part is represented the "more about me" section..
a.more {
color: #ffffff; colour can be changed
text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
this part is represented :
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
font-family: Arial, Sans-serif;
color: #ffffff; colour, can be changed
border-color: #ffffff; colour, can be changed
background-color: transparent; colour, can be changed
text-decoration: ;
}
#controlPanelButtons a:hover
control panel button hover is " blink-blink shadow of your control panel button, you can edit this..."
{
font-family: Arial, Sans-serif;
color: #ffffff;
border-color: transparent; colour, can be change
background-color: #000000; colour, can be change
text-decoration: line-through;
/* MISC: TESTIMONIALS/REVIEWS TEXT */
Misc.testimonials reprsented the text on testimonial review…
.data {
font-family: Arial, Sans-serif;
color: #ffffff; ; colour, can be changed
text-transform: ;
/* MISC: VIEW ALL LINKS */
Misc. view all links represented this part on view all links
.commonbox .viewall {
color: #ffffff; ; colour, can be change
/* MISC: SMALL PHOTOS */
Misc. small photos represented part of small photo
.commonbox .imgblock75, .ir {
border-width: 6px; size can be changed
border-color: #ffffff; colour, can be changed
border-style: solid;
background-color: transparent; colour can be changed
}
/* MISC: SMALL PHOTO NAMES */
Misc.small photo names represented the text of samll photo name
.commonbox .dr {
color: #ffffff;
background-color: transparent;
}
below is i give you the code of colour...)| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
nah, make your own creation....!
