Dari IgosCenter
Pengenalan
Ambiance, Dust, New Wave dan Clearlooks adalah beberapa dari sekian banyak themes yang mungkin biasa kita gunakan. Tapi memakai theme buatan sendiri tentu lebih membanggakan, bukan? Berikut langkah-langkah praktis membuat theme GTK 2. Bisa digunakan di GNOME versi 2.2 dan setelahnya.
Theme dapat disimpan di direktori /usr/share/themes, yang bersifat publik, atau ~/.themes. Sebagai catatan, jika sebuah theme dengan nama yang sama telah terinstal di direktori publik dan juga salah satu user, maka GNOME akan menggunakan theme yang ada di direktori ~/.themes.
First of all, kita harus membuat direktori themes yang akan kita buat dulu. Dalam direktori ini akan ada dua sub-direktori lagi: gtk-2.0 dan metacity-2.0. Gtk-2.0 akan memuat file gtkrc yang akan kita edit nanti, sedangkan metacity memuat gambar-gambar untuk window border disertai script untuk mengaturnya dalam bentuk file berkestensi .xml.
## masuk ke direktori .themes nan@nan:~$ cd /home/nan/.themes/ ## buat direktori baru untuk theme nan@nan: ~/.themes$ mkdir Nama_Theme ## masuk ke direktori theme nan@nan:~/.themes$ cd Nama_Theme/ ## buat folder gtk-0.2, lalu masuk ke direktori tersebut nan@nan:~/.themes/Nama_Theme$ mkdir gtk-2.0 nan@nan:~/.themes/Nama_Theme$ cd gtk-2.0/ ## buat file gtkrc, di sini kita pakai text editor gedit nan@nan:~/.themes/Nama_Theme/gtk-2.0$ gedit gtkrc
Akan terbuka jendela sendiri bagi gedit. Masih kosong? Pastinya.
Tips: dalam direktori /home/nama_user belum tentu ada folder bernama .themes, bukan? Jika ada yang menemui kesulitan memasuki direktori itu tanpa terminal, anda bisa menekan Ctrl + L di File Browser dan mengetikkan direktorinya langsung.
Daftar isi |
Arsitektur
Untuk pengertian Style, Widget, dan Engine, untuk sementara Anda saya rujuk dulu ke sini
Ternyata ada beberapa engine yang terbundel dalam satu paket. Di Synaptic, namanya gtk2-engines. Beberapa diantaranya ada ThinIce yang punya scroller unik, Metal yang memungkinkan theme kita terlihat metalik, dan Redmond95 yang punya fitur Windows-look. Dengan kalau paket ini telah terinstall, themes yang ada pada komputer Anda merupakan sampel dari theme-theme ini.
Murrine
Murrine adalah engine berbasis cairo yang umum digunakan. Selain cepat, fitur-fitur yang ditawarkannya juga lumayan banyak dan lengkap. Untuk tips dan pengetahuan tentang fitur-fiturnya, anda bisa mengecek disini. Untuk tutorial ini, engine yang akan digunakan adalah murrine. Dan jika anda memiliki theme Ambiance, harusnya anda juga sudah mempunyai engine ini.
Jika belum, Anda bisa mencari paketnya di Synaptic Package Manager (gtk2-engines-murrine) atau lewat terminal dengan perintah
sudo apt-get install murrine-themes
Selain murrine, ada banyak engine lain yang bisa dicoba, e.g. smooth, aurora, xfce, mythbuntu, sapwood, dan pixmap.
Editing gtkrc
Nah, ini dia bagian yang paling seru! Kita bisa menentukan sendiri warna untuk foreground, background, base dan text dalam berbagai kondisi. Themes GTK ada di dalam file gtkrc yang berformat case sensitive. Komentar ditandai dengan hash (#).
Copas dulu script dibawah ini, lalu perhatikan baik-baik penjelasannya. Tulisan-tulisan yang dikomentarkan boleh dihapus kalau mau.
# ini contoh komentar...
gtk_color_scheme =
"fg_color:#333438\nbg_color:#d2d7e5\ntext_color:000\nbase_color:fff\nselected_bg_color:#faa089\selected_fg_color:#fffafa
\ntooltip_bg_color:#fffcb8\ntooltip_fg_color:000"
style "default"
{
xthickness = 4
ythickness = 4
fg[NORMAL] = @fg_color # warna tulisan pada button dan border button dalam kondisi normal
fg[PRELIGHT] = "#9c8ef5" # warna tulisan saat disentuh (dalam beberapa kasus ditekan) oleh krusor
fg[SELECTED] = @selected_fg_color # warna teks pada tab atau window tab terpilih
fg[INSENSITIVE] = darker (@bg_color) # warna opsi yang tak bisa dipilih; misalnya opsi dalam jendela opsi ketika base di-klik kanan
fg[ACTIVE] = @fg_color # warna tulisan pada tab 'tetangga'
bg[NORMAL] = @bg_color # warna bg dalam keadaan normal
bg[PRELIGHT] = shade (1.02, @bg_color) # warna bg saat tersentuh krusor; lihat scroller, window tab, dan menu terpilih
bg[SELECTED] = "#faa089" # warna border alias 'header' window terpilih
bg[INSENSITIVE] = darker ("#FF0000") # warna bg opsi yang tak dapat dipilih; button unclikcable misalnya.
bg[ACTIVE] = darker (@bg_color) # warna tab 'tetangga' >Firefox, warna tab selain tab yang terpilih
text[NORMAL] = @text_color
text[PRELIGHT] = @text_color
text[SELECTED] = @selected_fg_color # warna text saat ter-blok
text[INSENSITIVE]= darker (@bg_color)
text[ACTIVE] = @selected_fg_color
base[NORMAL] = @base_color # warna base; sekarang #fff
base[PRELIGHT] = @base_color
base[SELECTED] = "#fedcdc" # warna bagian base yang ter-blok
# atur "Style Properties"
GtkRange::slider_width = 14 # lebar scroller
GtkRange::stepper_size = 14 # ukuran 'stepper', rumahnya scrolle
}
class "GtkWidget" style "default"
Banyak? Eit, jangan kabur dulu ya.
skema warna gtk
Kita bisa mendefisinikan warna yang akan dipakai terlebih dahulu, jauh lebih simpel daripada menulisnya ulang seandainya warna yang sama dipakai dua kali. Selain itu, script-nya jadi lebih enak dibaca. Warna yang sudah didefinisikan tinggal dipanggil dengan tanda '@'. Contohnya, @bg_color.
Bg adalah singkatan untuk background, sedangkan fg adalah foreground. Apa itu selected_bg , selected_fg, dan tooltip? Silahkan teruskan membaca. Bagian ini hanya untuk mengenalkan cara penulisannya saja, dan style tooltip akan ada bagiannya sendiri ;)
Selain memetakan warna dengan cara diatas, bisa juga dengan mengganti '\n'-nya dengan tanda semicolon alias titik-koma (;). Tapi saya menyarankan penggunaan backslice+n, karena warnanya akan berbeda sendiri sehingga batas-batas antara warna-warna yang sedang didefinisikan itu lebih jelas terlihat.
Tips: Warna-warna ditentukan dalam kode CSS, yang berupa kombinasi angka dan huruf. Beberapa dapat dilihat di gambar ini:
Atau, jika ingin lebih bebas menentukan warnanya, coba buka Appearance Preference (System → Preference → Appearance atau klik kanan di desktop dan klik Change Desktop Background), pilih Background dan klik color pickernya. Nah, pilih warna yang diinginkan dan kode CSSnya akan tertulis di Color name. Dan, bagi yang punya blog di Wordpress (seperti saya), ada color picker serupa di Custom Background. Bedanya, warna di kotak preview akan langsung berubah begitu kode CSS baru dimasukkan.
Warna untuk bg, fg, base dan text
'Tugas' pewarnaan dibagi kedalam empat 'Divisi'. Dalam 'Divisi' ini, masih ada bagian kecil-kecil yang mengatur pewarnaan yang menjadi bagian dari tugas si Divisi dalam berbagai kondisi.
Foreground. Bagian ini akan menentukan warna dari tulisan di berbagai button dan border button. Boleh dibilang dia satu tim untuk tulis-menulis dengan Divisi text. Coba bayangkan kalau tampilan yang ada di depanmu ini adalah sebuah citra dari layar transparan bergambar yang ditumpuk-tumpuk. Ada layar untuk tulisan 'File Edit View etc', warna untuk 'rumah'nya scroller, dan lainnya.
Fg [NORMAL] akan menentukan warna foreground normal, meliputi tulisan pada menu item. Dalam script contoh ini, kode CSSnya #333438. Silahkan diganti jika mau.
Fg[PRELIGHT]. 'pre' dalam bahasa Indonesia artinya 'pra' atau sebelum, dan 'light' artinya sinar atau cahaya. Jadi secara harfiah artinya 'sebelum cahaya'... seperti judul lagunya Nidji. Pokoknya, menu ini akan mengubah warna tulisan saat disentuh (atau dalam beberapa kasus ditekan) oleh krusor. Jika diubah, perbedaan yang paling terlihat ya di menu item juga.
Ini foto theme yang sama dengan foto di atas, tapi nilai fg [PRELIGHT] diubah menjadi #ee9286. Perhatikan perbedaannya:
Fg[SELECTED]. Selected artinya terpilih. Sesuai namanya, bagian inilah yang menentukan tulisan pada tab atau window tab terpilih.
Fg[INSENSITIVE]. Coba kembali klik kanan tepat di walpaper; akan ada 'jendela opsi' yang akan muncul, bukan? Kadang, ada beberapa opsi yang unpickable; tak bisa dipilih. Nah, insensitivelah yang menentukan warna tulisan opsi yang tidak bisa dipilih itu. Silahkan tentukan warnanya sendiri.
Tips: Supaya match, bisa gunakan darker (yang menjadikannya lebih gelap dari warna rujukan) atau shade (yang membuatnya lebih terang) pada bg_color, atau warna fg_color. Silahkan cari sendiri mana yang cocok. Tapi yang umum digunakan, darker dengan warna rujukan bg_color. Tapi sekali lagi, ini hanya tips.
Fg[ACTIVE] memutuskan warna teks pada tab dan window tab (maksudnya kotak kecil-kecil yang menunjukkan window yang ada) tetangga; tab selain tab yang sedang dibuka. Jika Anda membuka beberapa file gtkrc pada jendela gedit yang sama, akan muncul beberapa tab. Warna biasanya disamakan dengan warna fg normal atau fg selected.
Background. Ini 'Divisi' yang mengatur latar belakang. Kalau foreground meliputi tulisan-tulisan 'garis depan', background bertugas mengawasi warna pada window dan button-nya.
Bg[NORMAL], mengatur warna background dalam keadaan normal.
bg[PRELIGHT]. Nah, ini dia pasangannya fg prelight. Menu ini mengubah warna bg yang tersentuh krusor. Bisa di-shade, atau darker. Selain menu item, prelight juga akan terlihat di scroller dan window tab.
bg[SELECTED]. Warna window border terpilih. Jika kita belum membuat metacity-nya dan menggunakan window border milik theme lain, belum tentu warna border alias 'header' window akan berubah sesuai keinginan. Tapi beberapa jenis window border seperti Simple, Clearlooks, Esco, Crux, dan Metabox akan mengikuti warna yang sudah ditetapkan disini.
bg[INSENSITIVE]. Nah, ini warna button yang unclickable, tak bisa ditekan. Masih berpasangan dengan fg insensitive. Tombol 'Delete' di foto berikut contohnya:
bg[ACTIVE]. Bertugas menangani 'sisa-sisa' background, yaitu warna tab selain tab yang sudah dipilih.
Text
'Divisi' text juga menangani warna untuk tulisan. Tapi karena semua urusan tulisan yang
ada di background sudah diambil oleh foreground, maka 'Divisi' ini akan menangani warna
tulisan-tulisan yang ada di base. Jika Anda memblok tulisan ini dan warna tulisannya berubah,
itu kerjaan text.
text[NORMAL]. Warna text dalam kondisi normal.
text[SELECTED]. Ketika ingin meng-copas tulisan, kita akan memblok tulisan itu bukan? Jika ingin warnanya beda dengan text dalam kondisi normal, beri saja warna lain di sini.
Base Seperti yang dikomentarkan di script, jika bg yang menghiasi bingkai atau piguranya, maka base akan mengambil alih foto atau lukisannya. Kalau masih kurang jelas, coba saja ganti warna base normalnya dan lihat bagian mana saja yang berubah.
base[NORMAL]. Kondisi base dalam keadaan normal.
base[SELECTED]. Ketika kita memblok tulisan dalam usaha untuk men-copy-nya, ada sebagian base yang ikut terblok. Mau warnanya berubah? Edit saja disini.
Memanggil Engine
murrine tak bisa dipanggil dengan cara ditelepon atau di-sms. Tapi, skema-nya kira-kira seperti dibawah ini. Engine biasa diterapkan pada sebuah style, yang kemudian diterapkan pada widget yang ada di GTK.
style "default" # nama style
{
isi style default # isi style, meliputi pendefinisian warna
# dan style properties
engine "nama-engine"
{
.....
fitur engine yang digunakan untuk style ini # mis. gradien, contrast, roundness etc.
....
}
}
class "GtkWidget" style "default" # aplikasikan style ini
Dan ini fitur-fitur yang ditawarkan murrine. Dipilih dipilih :D
animation = TRUE # FALSE = disabled, TRUE = enabled
arrowstyle = 1 # 0 = normal arrows, 1 = filled arrows
#border_colors = { "#ffffff", "#ffffff" } # colors used on borders of many widgets
border_shades = { 1.2, 1.0 } # gradient to draw on border
comboboxstyle = 1 # 0 = normal combobox, 1 = colorized combobox below arrow
colorize_scrollbar = FALSE # FALSE = disabled, TRUE = enabled
contrast = 0.4 # 0.8 for less contrast, more than 1.0 for more contrast on borders
focus_color = "#FE765E"
glazestyle = 4 # 0 = flat, 1 = curved, 2 = concave, 3 = top-curved, 4 = beryl
glow_shade = 1.1 # sets glow amount for buttons or widgets
glowstyle = 0 # 0 = top, 1 = bottom, 2 = top and bottom, 3 = center (vertical), 4 = center (horizontal)
gradient_shades = {1.2,1.0,1.0,0.9} # default: {1.1,1.0,1.0,1.1}
highlight_shade = 1.0 # set highlight amount for buttons or widgets
lightborder_shade = 1.1 # sets lightborder amount for buttons or widgets
lightborderstyle = 1 # 0 = lightborder on top side, 1 = lightborder on all sides
listviewheaderstyle = 1 # 0 = flat, 1 = glassy, 2 = raised
listviewstyle = 2 # 0 = nothing, 1 = dotted 2 = solid
menubaritemstyle = 0 # 0 = menuitem look, 1 = button look
menubarstyle = 0 # 0 = flat, 1 = glassy, 2 = gradient, 3 = striped
menuitemstyle = 0 # 0 = flat, 1 = glassy, 2 = striped
menustyle = 0 # 0 = no vertical menu stripe, 1 = display vertical menu stripe
prelight_shade = .95 # shade level for scrollbar's slider, comboboxstyle(1), and prelight state with gradient_colors
progressbarstyle = 0 # 0 = no stripes, 1 = diagonal stripes, 2 = vertical stripes
reliefstyle = 3 # 0 = flat, 1 = inset, 2 = shadow, 3 = shadow with gradient, 4 = stronger shadow with gradient
rgba = FALSE # FALSE = disabled, TRUE = enabled
roundness = 3 # 0 = squared, 1 = old default, more will increase roundness
scrollbarstyle = 2 # 0 = nothing, 1 = circles, 2 = handles, 3 = diagonal stripes, 4 =
diagonal stripes and handles, 5 = horizontal stripes, 6 = horizontal stripes and handles
separatorstyle = 1
shadow_shades = { 0.8, 2.2 } # draw gradient on shadow of some widgets
sliderstyle = 1 # 0 = nothing added, 1 = handles
spinbuttonstyle = 0 # 0 = no seperator, 1 = with separator
stepperstyle = 1 # 0 = standard, 1 = integrated stepper handles, 2 = squared steppers with round slider
textstyle = 0 # 0 = normal text, 1 = inset
toolbarstyle = 0 # 0 = flat, 1 = glassy, 2 = gradient
trough_shades = { 0.88, 2.0 } # draw gradient on trough of GtkScrollbar and GtkProgressbar
Oya, begitu sebuah engine di-apply-kan pada sebuah style, sepertinya semua fitur ikut juga. Misalnya saat saya mencoba fitur roundness - hanya fitur itu – fitur contrast dan gradien kebawa-bawa (tapi belum ter-set)
Menu Item
coba copas style ini ke bawah style “default”. Disini, perlighted menu item-nya didefinisikan ulang. Warna rujukannya (untuk border) adalah selected_bg_color.
style "menu-item"
{
xthickness = 0
ythickness = 5
engine "murrine"
{
roundness = 3 # round corner ;)
border_shades = { 1.2, 1.0 }
}
}
widget_class "*<GtkMenuItem>*" style "menu-item"
Entry
Kalau menu item, nanti yang kelihatan gradiennya hanya kalau dipencet “Applications”-nya dong.. Coba gabungkan style ini dengan yang lainnya. Lihat perbedaannya.
style "entry" {
xthickness = 3
ythickness = 3
bg[SELECTED] = mix (0.8, @selected_bg_color, @base_color)
fg[SELECTED] = "#fff"
engine "murrine"
{
border_shades = {3.0, 1.0}
contrast = .8
}
}
class "GtkEntry" style "entry"
Tooltip
Lihat kotak kuning yang yang bertuliskan “Firefox Web Browser -- Browse the....” ? Nah, itulah yang disebut tooltip. Jika belum dibuat style-nya sendiri, warnanya akan sama dengan warna bg normal, dan tulisannya sama dengan fg normal. Di skema warna di atas, kita bisa tambahkan definisi warna untuk tooltip-nya juga. Misalnya kuning untuk tooltip_bg_color, dan hitam untuk tooltip_fg_color.
Ini dia style untuk tooltip. Letakkan saja dibawah style lainnya. Silakan ganti warna bg dan fg-nya sesuka hati.
style "tooltips"
{
#xthickness = 4
#ythickness = 4
bg[NORMAL] = @tooltip_bg_color
fg[NORMAL] = @tooltip_fg_color
}
widget "gtk-tooltip*" style "tooltips"
Dan ini dia, contoh theme kita. Tambahkan engine lain, fiturnya, style, atau apapun.
Salah satu kunci keberhasilan seseorang adalah kerajinannya mencoba. Belajarlah dari karya milik orang lain. Di direktori /usr/share/themes ada banyak theme yang file gtkrc-nya bisa diteliti. Sekian ;)
Kontributor: Nan