Facebook Style Sheet Hack

Sekarang mari kita membahas bagaimana kita bisa membuat style aplikasi atau situs Facebook dan agar terlihat dan benar-benar seperti beberapa aplikasi milik Facebook platform. Saya telah memeriksa warna, huruf, dimensi dan beberapa pola desain umum yang oleh Facebook diterapkan dalam aplikasinya.

Jadi, jika anda mempunyai niat untuk membuat sebuah aplikasi facebook atau situs yang serupa dengan style yang digunakan Facebook, tidak ada salahnya anda mecoba style yang akan saya tulis disini.

Dengan menggunakan beberapa tools yang terdapat di browser, saya dapat mengetahui beberapa style dan elemen apa saja yang digunakan dalam facebook style itu. Saya tidak akan membahas secara rinci tentang proses ini, singkatnya saya hanya menggunakan Firebug salah satu ekstensi Firefox dan Chrome yang digunakan untuk mengorek style atau source code pada sebuah situs.

Mari kita lihat beberapa unsur penting dari kategori CSS dan kemudian saya akan menjelaskan bagaimana untuk mempraktekannya pada beberapa elemennya.

Warna Dasar dari CSS Facebook

Facebook menggunakan model warna yang sederhana, dan ini merupakan penggunaan yang cukup efektif. Teks pada umumnya mempunyai warna dari terang ke gelap abu-abu (tidak hitam) dari beberapa link dalam “Si Biru Facebook” itu. Untuk warna background dan border, Facebook menggunakan sepasang warna terang dan gelap pada satu variasi warna untuk membuatnya terlihat kontras.

Si Biru Facebook
Biru Facebook #3b5998

Warna Text/Font
Light Text #999999
Medium Text #666666
Dark Text #333333
Warna Link #3b5998

Grey Box
Background #f7f7f7
Border #CCCCCC

Blue Box
Background #eceff6
Border #d4dae8

Information Box
Background #fff9d7
Border #e2c822

Error Box
Background #ffebe8
Border #dd3c10

Tipografi Facebook

Sebuah penelitian kecil saya membuktikan, bahwa font-family dari “Si Biru” yang digunakan secara global, seperti ini:

[css]
body {
font-family: “lucida grande”, tahoma, verdana, arial, sans-serif;
}
[/css]

Icon Pada Halaman Facebook

Facebook menggunakan icon 16×16 px pada seluruh aplikasi mereka. Untuk tampilan dan nuansa yang sama dengan kemampuan ekspansi secara besar-besaran, lihat selengkapnya di FamFamFam Icon.

Jika Anda perhatikan dengan saksama pada beberapa icon di famfam, anda akan melihat salah satu ikon yang digunakan untuk komentar di facebook.
Komponen Utama Style Facebook

Gray Box

[html]
Terlihat dengan baik seperti grey box yang ada di facebook?

[/html]

Terlihat dengan baik seperti grey box yang ada di facebook?

Blue Box : Komentar

[html]
Terlihat dengan baik seperti komentar yang ada di facebook?

[/html]

Terlihat dengan baik seperti komentar yang ada di facebook?

Info Box : Peringatan

[html]
Terlihat dengan baik seperti informasi yang ada di facebook?

[/html]

Terlihat dengan baik seperti informasi yang ada di facebook?

Error Box : Pesan Error

[html]
Terlihat dengan baik seperti pesan error yang ada di facebook?

[/html]

Terlihat dengan baik seperti pesan error yang ada di facebook?

Facebook Tabs yg terdapat dalam Profil

[html]
Facebook Tab #1
Facebook Tab #2
Facebook Tab #3
Facebook Tab #4
[/html]

Facebook Tab #1Facebook Tab #2Facebook Tab #3Facebook Tab #4

Selanjutnya Bagaimana Cara Menggunakan Komponen tersebut?

Ini sebenarnya cukup mudah, kode contoh di atas akan membantu Anda memulai menyesuaikan tampilan aplikasi anda seperti layaknya facebook. Pada dasarnya, Anda hanya perlu mengatur kelas dari div atau elemen jangkar kelas yang sesuai dalam stylesheet. Jika Anda ingin menggunakan Facebook sebagai dasar styling pada aplikasi anda, gunakan wrapper pada konten Anda dengan div “fbbody”.

Anda tidak perlu menggunakan lagi file CSS di aplikasi anda, karena facebook telah menyediakannya untuk anda.

Jika anda benar-benar membutuhkan file CSS facebook ini, anda bisa mendownloadnya disini.
Facebook Style Sheet