Default Theme Hacking

Cara termudah dan tercepat untuk merubah tampilan web berbasis AuraCMS adalah dengan memodifikasi default theme-nya. Kita bisa memulai dari melihat struktur theme yang terletak di: c:\xampp\htdocs\smkn1\themes\auracms. Setiap theme tersimpan dalam sebuah folder sesuai nama theme-nya (misalnya, default theme diberi nama ‘auracms').

Jika kita tengok ke dalam folder ‘auracms' tersebut, bisa kita lihat susunan file dan folder sebagai berikut:

[gb4-1]

Dari gambar di atas bisa kita lihat bahwa theme AuraCMS terdiri dari:

1.       3 (tiga) file HTML untuk mengatur tampilan / layout

2.       2 (dua) folder: css (menampung file pengaturan style) dan images (menampung file-file gambar/image yang dipergunakan dalam layout).

Untuk mengubah tampilan secara sederhana, kita bisa melakukannya dengan mengganti file-file gambar utama dengan file-file baru. Mari kita tengok terlebih dahulu file-file utama yang membentuk layout default AuraCMS.

[gb4-2]

[gb4-3]

Dimensi dari masing-masing gambar adalah:

• aura-cms.gif -- 200 x 79 pixel
• headerbg.gif -- 1 x 85 pixel
• headerphoto.jpg -- 820 x 120 pixel
• tableft.gif -- 4 x 84 pixel
• tabright.gif -- 175 x 84 pixel

Ubah nama ke-lima gambar di atas dengan menambahkan satu karakter, misalnya tambahkan underscore ( _ ) di depan nama file sehingga:

aura-cms.gif       >          _aura-cms.gif

Ini perlu kita lakukan agar nama-nama file aslinya masih dapat diketahui. Selanjutnya, kita perlu membuat gambar-gambar penggantinya.

Mendesain dengan Macromedia Fireworks

Pembuatan desain dalam tutorial ini menggunakan Macromedia Fireworks. Anda bisa menggunakan Adobe Photoshop atau software lain yang sudah dikuasai. Tutorial ini juga tidak akan menjelaskan detil melakukan ini-itu di Fireworks, jika menjumpai kesulitan.. tekan F1.

Pertama, buat area kerja dengan ukuran 820 x 400 pixel. Susun gambar atau bentuk sesuai keinginan dengan ukuran sesuai dimensi file-file di atas.

[gb4-4]

Setelah semua tersusun, yang kedua kita bisa mulai melakukan slice untuk memotong gambar-gambar tersebut sesuai ukuran. Potongan-potongan tersebut selanjutnya di-ekspor.

[gb4-5]

Jangan lupa untuk memastikan bahwa ‘Properties' masing-masing potongan memiliki format yang sesuai, perhatikan bagian .

Ketiga, kita lakukan proses ekspor one by one untuk tiap-tiap slice. Klik-kanan masing-masing slice, kemudian pilih "Export Selected Slice...", kemudian arahkan menuju folder themes/auracms/images. Beri nama sesuai bagiannya masing-masing. Hasil pemotongan gambar di atas adalah sebagai berikut:

[gb4-6]

Dan hasil akhir default theme yang telah dimodifikasi tampak seperti di bawah ini.

[gb4-7]

kirim ke teman | versi cetak