Reyza

Tip dan Trik Membuat Custom Theme CS2007

Komunitas INDC sekarang lagi rame karena ada kompetisi pembuatan Theme CS 2007 untuk Geeks Portal. Hanya berbagi pengalaman bagaimana membuat Theme yang baik dan cepat dengan deadline yang mepet (cuma sampai tanggal 10 November).

Modifikasi Theme utama :

1. Jangan membuat dari awal, tapi gunakan Theme yang sudah ada yaitu Default, Lean and Green (dua Theme ini sudah ada secara default pada CS2007 dengan lokasi di direktori Theme) atau bisa menggunakan Basic, benar-benar basic bila dibandingkan dengan dua Theme yang lain. Tapi saya menggunakan Theme Basic ini untuk pembuatan PT Dycode (masih tahap pembuatan) karena CSS dan image minim jadi saya bisa bebas menambah style dan image. Bila menggunakan theme Default dan Lean and Green yang saya lakukan hanya mengedit style sehingga nanti banyak style dan image sampah tapi memang ini yang paling cepat seperti yang saya lakukan ketika mengikuti Theme Contest Extravaganza dari Community Server/ Telligent. Untuk mendapatkan theme Basic bisa mengunjungi link berikut http://communityserver.org/files/folders/themes/default.aspx. Bila ingin mendapatkan theme lain yang telah saya buat bisa mengunjungi http://ambigramindonesia.com/files/. Rasanya ada contoh theme yang sudah integrasi dengan Silverlight juga (lupa).
2. Bila sudah memutuskan theme mana yang akan digunakan maka tinggal masukkan ke dalam direktori Theme, misal akan digunakan theme Default tinggal pilih direktorinya tekan Ctrl+C dilanjutkan Ctrl+V kemudian rename direktori tersebut, misalnya Geeks.
3. Setelah itu langsung anda modifikasi file theme.config yang ada dalam direktori Geeks. Pada baris kedua anda akan melihat baris berikut

Tinggal anda ganti menjadi berikut :

Perhatikan ~/themes/default, perlu disesuaikan dengan nama direktori yang baru anda buat, karena tadi nama direktorinya Geeks, maka perlu diganti menjadi ~/themes/geeks. Tidak case sensitive.

Bila anda ingin menggunakan theme yang baru dibuat ini tinggal login sebagai Admin, masuk ke Control Panel | Administration | Setting | Theme Option.

1. Community Server 2007 mempunyai master page yang bertingkat, master page paling atas adalah master.Master yang ada di dalam direktori Common pada direktori theme milik kita (dalam hal ini direktori Geeks). Kemudian mesti diketahui ada modul-modul utama dari CS2007 yaitu Blog, File, Gallery, Forum setiap modul itu akan mempunyai master page sendiri, tetapi tetap akan mengacu pada master.Master. Untuk Blog maka bisa anda lihat ada blogs.Master yang ada pada direktori Geeks/Blogs, begitu juga yang lainnya. Untuk merubah muka secara keseluruhan anda cukup bermain-main terlebih dahulu pada file master.Master, sedangkan untuk master page yang lain seperti (home.Master, blogs.Master, files.Master hanya akan merubah content pada side area saja).
2. Bila anda menggunakan theme Default atau Lean and Green maka CSS akan tersimpan pada direktori style pada direktori themes tersebut. File CSS utamanya adalah Common.css kemudian setiap modul akan punya style sendiri, misal untuk Blogs ada blogs.css dan blog_print.css begitu juga untuk modul yang lain. Harap di cek pada juga pada setiap master page karena ada link yang mengacu pada file CSS, jadi harus disesuaikan.

Bisa dilihat pada contoh di atas, acuan file CSS-nya masih ke direktori themes/default, perlu di ganti ke themes/geeks. Oh iya, DynamicStyle.aspx kadang sesuatu yang sedikit membuat pusing karena kadang kita sudah ngubah macem-macem tapi perubahaan tidak terjadi juga, hal ini dikarenakan file ini. Cara paling sangar sih tinggal di set Visible=false untuk file ini tapi itu akan membuat Theme anda tidak dapat dimodifikasi via Control Panel. Saat Theme Contest Extravaganza saya mematikan fungsi ini :)

Coba cek juga master page pada modul-modul lain, karena ada beberapa yang memakai baris-baris di atas.

1. Setelah langkah-langkah di atas selesai, sekarang anda sudah bisa melakukan pekerjaan memodifiksi theme utama untuk Geeks Portal (kenapa saya sebut theme utama? Karena anda perlu membuat 1 theme lagi untuk Blogs personal yang ada pada direktori Themes/Blogs tanpa theme ini nanti ada sesuatu yang janggal ketika user masuk ke modul Blogs).
2. Sekali lagi mulai dulu untuk mengubah muka CS2007 dengan memodifikasi file master.Master.

Membuat theme Blog :

1. Untuk membuat theme blog ini kita bisa melakukan cara yang sama, yaitu dengan memakai blog yang sudah ada, misal theme Blogs Default.
2. Pilih direktori default yang ada pada direktori Themes/Blogs tekan Ctrl+C dan Ctrl+V kemudian rename menjadi Geeks.
3. Modifikasi file theme.config.
4. Modifikasi file theme.Master perhatikan baris berikut :

Menjadi :

1. Sekali lagi anda akan bertemu dengan DynamicStyle.aspx, terserah anda mau diapakan file ini :)

Tip yang lain bisa mengunjungi link berikut : http://geeks.netindonesia.net/blogs/reyza/archive/2007/10/17/CS2007.1-SDK-on-Vista.aspx

Hmm...sebenarnya tip ini membuat saingan jadi lebih banyak nih, tapi mungkin dengan adanya kontes ini akan didapat Theme yang terbaik untuk Geeks Portal dan juga banyak yang tertarik dengan CS2007 untuk Skinning dan pembuatan custom modul, semoga lagi ada yang dari Bandung jadi bisa sekalian bantu-bantu saya apabila ada kerjaan serupa entah itu dari Telligent atau yang lainnya.

Selamat mencoba.

Share this post: | | | |