Cara Susah Edit Layout Friendster

Gimana? Judul tulisan ini menarik tidak? he...he...jujur nih...berikut ini saya mau sedikit cuap-cuap tentang cara edit layout friendster secara susah dan amat susah. Susahnya ya kita musti bisa (setidaknya) dasar-dasar script CSS (Cascading Style Sheet).
Saya tidak tahu persis definisi CSS itu sendiri. Yang jelas, CSS itu fungsinya untuk memperindah halaman web. Bisa halaman friendster, blog, website, forum, atau halaman web lainnya. Nah, pada kesempatan ini, mari kita jelajahi CSS yang kita pakai untuk friendster.

Berikut ini code CSS friendster yang saya download langsung dari friendster di Customize Page --> Download CSS File:

/*page background*/
body {
background-image: url(http://images.friendster.com/images/homebg.gif);
background-position: ;
background-repeat: ;
background-attachment: ;
background-color: ;
}
/*global fonts*/
.usercontent {
font-family: ;
color: ;
text-transform: ;
}
/*global links*/
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
text-decoration: ;
color: ;
}
.usercontent a:hover {
text-decoration: ;
color: ;
}
/*modules*/
.commonbox { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.commonbox h1, .commonbox h2 { /*header*/
font-family: ;
color: ;
text-transform: ;
background-color: #;
}
.commonbox .viewall { /*viewall link*/
font-family: ;
color: ;
text-transform: ;
}
.commonbox .imgblock75, .ir { /*photo blocks*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.commonbox .dr { /*name bars below photo blocks*/
font-family: ;
color: ;
text-transform: ;
background-color: ;
}
.commonbox .evenrow { /*even row*/
background-color: ;
}
/*specific module boxes*/
.controlpanel { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.photos { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.friends { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogsreviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.videos { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.testimonialscomments { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.moreabout { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.fanof { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.groups { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.testimonials { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.scrapbook { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.myfans { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.reviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogs { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
/*control panel*/
.controlpanel .imgblock200 { /*primary photo border*/
border-color: ;
border-style: ;
}
.data { /*data answers*/
font-family: ;
color: ;
text-transform: ;
}
.controlpanel .q { /*data labels*/
font-family: ;
color: ;
text-transform: ;
}
.data a { /*data links*/
font-family: ;
color: ;
text-transform: ;
}
a.more { /*more about link*/
font-family: ;
color: ;
text-transform: ;
}
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { /*buttons*/
color: ;
border-color: ;
border-style: ;
background-color: ;
}
#controlPanelButtons a:hover { /*buttons hover*/
color: ;
border-color: ;
background-color: ;
}


Berikut keterangan tentang code tersebut (versi saya loh, maklumin aja deh kalo ga formal yach):

Kode CSS selalu diawali tanda { dan diakhiri dengan penutup }. Setiap tag CSS selalu dipisah dengan tanda ; (titik koma).

Yang saya tandai warna merah adalah text comment/komentar/keterangan. Contoh: /*global font*/. Artinya si tukang desain ingin memberi keterangan bahwa kode-kode yang ada dibawah atau di dekat /*global font*/ adalah kode CSS untuk desain font di halaman web tersebut (dalam hal ini halaman profile friendster).

Berikut ini tag yang digunakan dalam kode CSS friendster:

background-image: menggunakan background foto/gambar. [url]

background-position: pengaturan posisi gambar background. [bottom, center, inherit, left, right, top]

background-repeat: pengaturan pengulangan background. [inherit, no-repeat, repeat, repeat-x, repeat-y]

background-attachment: pengaturan pengikatan background. [fixed, scroll, inherit]

background-color: jika tidak menggunakan background-image, maka gunakan background-color. [gunakan kode warna. Bisa dilihat pada software photoshop, dreamweaver, atau yang lainnya.]

font-family: jenis font yang digunakan. [Arial, Verdana, Times New Roman, dll].

color: warna font. [gunakan code warna. Contoh: code warna hitam: #000000, putih: #FFFFFF, hijau: #003300, selengkapnya lihat di photoshop atau dreamweaver.]

text-decoration: dekorasi teks. [underline, overline, line-through, blink, inherit, none]

text-transform: pengaturan case text. [uppercase, lowercase, inherit, capitalize, none]

border-width: ukuran lebar border/garis tepi. [medium, thin, thick, atau gunakan ukuran pixel seperti: 2px]

border-color: warna border. [gunakan kode warna]

border-style: tipe border/garis tepi. [dashed, dotted, double, groove, hidden, inherit, inset, outset, ridge, solid, none]

Oke, saya rasa cuma itu kode-kode CSS yang kita pakai pada halaman profile fs (friendster) kita. Jika ada yang kurang, mohon dikoreksi. Btw, beriku ini ada contoh CSS friendster yang sudah saya selipkan tag-tag CSS:


/*background halaman*/
body {
background-image:url("http://images.friendster.com/images/homebg.gif");
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#transparent;
}
/*fonts secara umum*/
.usercontent {
font-family:tahoma;
color:#338d34;
text-transform:none;
}
/*links atau tautan secara umum*/
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
text-decoration:none;
color:#000;
}
/* link ketika mouse focus */
.usercontent a:hover {
text-decoration:none;
color:#338d34;
}
/*modules*/
.commonbox { /*box*/
border-width:3px;
border-color:#cfb886;
border-style:outset;
background-color:#cfb886;
}
.commonbox h1, .commonbox h2 { /*judul commonbox*/
font-family:tahoma;
color:#338d34;
text-transform:none;
background-color:#e1d4c1;
}
.commonbox .viewall { /*link view all*/
font-family:tahoma;
color:#338d34;
text-transform:none;
}
.commonbox .imgblock75, .ir { /*blocks foto*/
border-width:2px;
border-color:#e1d4c1;
border-style:inset;
background-color:#transparent;
}
.commonbox .dr { /*tulisan yang ada di bawah foto blocks*/
font-family:tahoma;
color:000;
text-transform:none;
border:#f5ece3 2px ridge;
background-color:#e1d4c1;
}
.commonbox .evenrow { /*even row*/
border-width:2px;
border-color:#f5ece3;
border-style:ridge;
background-color:#e1d4c1;
}
/*specific module boxes*/
.controlpanel { /*box*/
border-width:5px;
border-color:#f5ece3;
border-style:ridge;
background-color:#transparent;
}
.photos { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:ridge;
background-color:;
}
.friends { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogsreviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.videos { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.testimonialscomments { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:ridge;
background-color: ;
}
.moreabout { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
.fanof { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
.groups { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
.testimonials { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
.scrapbook { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
.myfans { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.reviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogs { /*box*/
border-width:2px;
border-color:#f5ece3;
border-style:outset;
background-color: ;
}
/*control panel*/
.controlpanel .imgblock200 { /*primary photo border*/
border-width:5px;
border-color:#f5ece3;
border-style:ridge;
}
.data { /*data answers*/
font-family: ;
color: ;
text-transform: ;
}
.controlpanel .q { /*data labels*/
font-family:tahoma;
color: ;
text-transform:none;
}
.data a { /*data links*/
font-family:tahoma;
color: ;
text-transform:none;
}
a.more { /*more about link*/
font-family: ;
color: ;
text-transform: ;
}
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { /*buttons*/
color:#338d34;
border:#e1d4c1 1px ridge;
background-color:#fff;
}
#controlPanelButtons a:hover { /*buttons hover*/
font-weight: bold;
color:#338d34;
border:#e1d4c1 1px solid;
background-color:#f5ece3;
text-decoration:none;
}

Silakan copy paste kode di atas ke kota CSS friendster Anda. Dan silakan dimodifikasi sesuka hati Anda. Selamat Berjuang dan SEMOGA SUKSES..!!