SLiMS 5 (Meranti) : Mengkustomisasi Template Default

SLiMS 5 Meranti memiliki 2 template bawaan yaitu template default dan template lightweight. Nah
Ayo kita coba mengkustomisasi template default

---

Ketahui Lebih Dahulu

Untuk mengkustomisasi template default yang kita rubah adalah

• File File gambar yang ada dalam folder images. File file gambar ini ada di D:\xampp\htdocs\5\template\default\images
• File style.css . File ini ada di D:\xampp\htdocs\5\template\default.

---

Pra Kustomisasi

Sebagai tools editing & konversi gambar instalah GIMP. GIMP adalah software Open Source yang digunakan untuk olah grafis gambar bitmap
Download GIMP di http://www.gimp.org/ , kemudian install GIMP

GIMP

Install Notepad ++ sebagi tools editing code.
Download dan install di http://notepad-plus-plus.org/

---

Kustomisasi

1) Agar memiliki back up template default , copy lah template default
klik kanan folder template default - klik copy -

Memback Up Template Default

kemudian klik kanan paste untuk mengandakan template default

Kemudian Rename-lah folder yang baru anda paste , Rename sesuai keinginan Anda. Kami me-Rename-nya menjadi jozz :D

Rename Folder , Inilah Template Yang Bakal Kita Kustomisasi

2) Siapkan 2 gambar untuk meghiasi SLiMS. Anda dapat menggunakan : foto bangunan perpustakaan anda , wallpaper , atau dapat mengunduh nya dari internet. Kami mengunduh nya dari internet. Unduh saja dari http://art.gnome.org/backgrounds
Di situs ini tersedia ratusan wallpaper yang bebas Anda unduh :D
Silahkan pilih 2 background

GNOME ArtWork BackGround

3) Setelah terunduh, rescale gambar  background tadi menggunakan GIMP. Jalankan GIMP dan bukalah gambar background Anda. Hal ini perlu dilakukan karena  ukuran  gambar ideal untuk background SLiMS adalah 800 x 500 pixel
Klik Image - Scale Image

Klik Image - Scale Image

Pada kotak dialog
Width : 800
Height : 500
Kemudian klik Scale

Ubah Width 800 dan Height 500 ,

Setelah ukuran diubah , saat nya menyimpan gamabar background tadi ke D:\xampp\htdocs\5\template\joz\image
klik File - Save As

Rename klik File - Save As

Pada kotak dialog  , ketikkan 1.jpg

Pada-name-ketik 1.jpg agar menempa file gambar default 1

Klik folder lain nya. dan simpan di D:\xampp\htdocs\5\template\joz\images

Simpan di D: \xampp \ htdocs \ slims \ template\ joz \ images

Pada Quality geser slider sesuai keinginan Anda , semakin besar Quality semakin bagus kualittas gambar, namun ukuran gambar besar. Klik Save

Quality ubah sesuai keinginan Anda

Berkas sudah ada ganti saja , klik ganti nama untuk menempa nya

Berkas Sudah Ada Ganti Nama , REPLACE

Lakukan juga pada gambar gambar background ke 2 Anda.
Ganti juga gambar logo sesuai logo perpustakaan Anda . sampai tahap ini Anda sudah sukses mengkustomisasi template default, agar warna tab nya serasi dengan background Anda dapat menganti sedikit kode kode nya
3) Oprek Coding
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 
Dalam contoh kita akan mengganti warna Biru ( #89c1db) menjadi warna Hijau(#16a030)
Sesuaikan dengan warna kesukaan Anda / sesuikan dengan warna instansi Anda
Jika Anda tidak tahu kode warna html Anda dapat menggunakan bantuan GiMP
Cara nya klik dua kali pada palet warna , kemudain geser slider warna , dan copy kode warna nya

Bantuan Kode warna GiMP

4 ) Buka file style.css menggunakan Notepad++.
Klik Icon Find , Icon yang berupa teropong , atau tekan tombol bersama CTRL +  F
Klik tab Replace  
pada Find What ketikkan 89c1db ( ini adalah kode warna biru muda yang selalu muncul di tampilan SLiMS)
pada Replace With pastekan  kode warna yang tadi anda copy dari GiMP. Kami mengganti nya dengan warna hijau (#16a030)
Setelah itu klik Replace All , untuk mengganti semua kode warna biru

Replace Kode Warna

Replace OK

kalau sudah klik save , untuk menyimpan semua perubahan

Save

Login ke System SLiMS dan aktifkan / pilih template publik  hasil oprekan Anda

Ubah Template Publik

Dan lihat hasil nya di browser :D

Wah Hijau Rame

Jika Anda ingin mengganti nya satu persatu silahkan lihat gambar berikut 

Merubah Kode Warna Pada Template SLiMS Meranti

Selamat mencoba

---

Daftar Pustaka

Web Desain , Step By Step: Web Design Theory And Practices. Penulis: Asep Herman Suyanto , Andipublisher , 2009 , Cetakan II