Mengubah Penampilan Web - JackMizh/Sisekar GitHub Wiki

OpenSID menyediakan dua tema penampilan web:

1. Tema klasik, dan
2. Tema hadakewa (tema ini responsif).

Setting tema yang akan digunakan dijelaskan di Panduan Konfigurasi Aplikasi, lihat bagian Setting web_theme. Jika setting ini dikosongkan, yang akan ditampilkan adalah tema klasik.

Pada SID inti (berkas asli rilis unduhan), berkas tema ada di folder themes. Style/css masing-masing tema ada di:

1. Style/css tema klasik ada di folder themes/klasik/css, dan
2. Style/css tema hadakewa ada di folder themes/hadakewa/css.

Di masing-masing folder tersebut bisa ditemukan berkas berikut:

1. first.css yang mengubah style yang ada di assets/front/css/first.css, dan
2. default.css yang mengubah style yang ada di assets/front/css/default.css.

Kedua berkas tersebut berisi setting css yang terpenting untuk menentukan penampilan modul Web.

OpenSID menyediakan folder khusus desa/css untuk menyimpan css yang mengubah penampilan web SID sesuai dengan kebutuhan desa. Untuk penjelasan struktur folder desa lihat Folder Desa.

Untuk mengubah penampilan masing-masing tema, letakkan berkas css di:

1. untuk tema klasik, letakkan di folder desa/css/klasik, dan
2. untuk tema hadakewa, letakkan di folder desa/css/hadakewa.

Pada masing-masing folder ini, letakkan perubahan css di berkas sebagai berikut:

1. berkas desa-default.css. Script css di dalam berkas ini secara otomatis akan menggantikan setting css yang sama di berkas themes/[tema]/default.css dan di assets/front/css/default.css.
2. berkas desa-web.css. Script css di dalam berkas ini secara otomatis akan menggantikan setting css yang sama di file themes/[tema]/first.css dan di assets/front/css/first.css.

Script css yang dimasukkan ke dalam kedua file tersebut hanya perlu mencakup style yang akan diubah saja. Tidak perlu menyalin keseluruhan style yang ada di file default.css ataupun first.css.

Rilis OpenSID menyediakan contoh di folder desa-contoh. Apabila anda belum membuat folder desa, anda dapat men-copy keseluruhan folder desa-contoh ke folder desa.

Di dalam folder desa-contoh disediakan contoh perubahan css di folder css/klasik dan di folder css/hadakewa. Sebagai contoh, di berkas css/hadakewa/desa-web.css, bisa ditemukan css berikut:

body{
  background: url(images/img1.jpg) no-repeat center fixed;
}

#topsection{
  background: url(images/bg_header.jpg);
}

Script css ini akan secara otomatis menggantikan setting css yang sama di file first.css. Penampilan situs web akan menampilkan latar belakang memakai gambar img1.jpg (yang disimpan di folder css/hadakewa/images) sesuai setting di atas.

Background header juga akan secara otomatis menggunakan gambar bg_header.jpg (yang disimpan di folder css/hadakewa/images) sesuai setting di atas.

Bagi yang ingin menyusun tema sendiri atau menggunakan tema yang di-share oleh pegiat OpenSID, dapat melakukan dengan menggunakan folder desa/themes. Buat sub-folder, misalnya desa/themes/tema-saya. Masukkan di sub-folder itu semua berkas yang diperlukan untuk menampilkan modul web, termasuk css yang diinginkan.

Penyusunan berkas tema bisa menggunakan folder themes/default atau themes/hadakewa sebagai contoh.

Setelah meletakkan subfolder tema ubahan tersebut di dalam folder desa/themes/ kemudian jangan lupa untuk melakukan Migrasi Database terlebih dahulu. Migrasi Database akan mendeteksi tema yang ditambahkan supaya bisa tampil di pilihan Pengaturan>Aplikasi.

Aktifkan tema ubahan desa di halaman Pengaturan dengan memasukkan tema dengan prefix "desa/", misalnya "desa/tema_saya", di mana sub-folder desa/themes/tema-saya berisi berkas tema 'tema_saya'.

Sebagai contoh, anda dapat mengunduh tema batudaa dari https://github.com/batudaa/batudaa-theme/releases, dan menyalin folder batudaa di unduhan itu ke folder desa/themes. Di halaman Pengaturan > Setting Aplikasi, pilihan tema desa/batudaa akan muncul di setting web_theme.

Jika diperlukan anda dapat mengubah sendiri script di desa/themes/batudaa sesuai kebutuhan. Perubahan yang dilakukan di folder ini tidak akan tertimpa pada waktu mengupgrade ke rilis OpenSID baru.

Untuk mengaktifkan fitur anti-CSRF di tema anda, tambahkan kode <?php $this->load->view('head_tags_front') ?> pada [NAMA_TEMA]/layouts/header.php seperti contoh yang bisa dilihat di file themes/klasik/layouts/header.php.

Jika ada kustomisasi tema yang diinginkan tetapi tidak bisa dilakukan melalui css di folder desa/css, sebaiknya anda buat issue di https://github.com/OpenSID/OpenSID/issues untuk diterapkan oleh pegiat OpenSID. Petunjuk membuat issue ada di Pengelolaan-Masalah-dan-Permintaan-Perbaikan-SID.

Selain menggunakan modul Web yang disediakan OpenSID, desa dapat juga mengembangkan web desa memakai WordPress dan menggunakan WPSID-shortcode untuk menampilkan data dari database penduduk di OpenSID. Dengan menggunakan WordPress, desa bebas menyesuaikan penampilan web desa sesuai dengan kemampuan WordPress.

Tetapi, tentunya pengguna WordPress tidak bisa langsung memanfaatkan perubahan modul web yang disediakan di rilis OpenSID baru, dan harus melalukan perubahan script menggunakan rilis WPSID-shortcode yang baru. Yaitu, desa yang menggunakan WordPress akan bergantung pada pegiat yang menyusun web desa -- atau minimal pada programmer yang mengerti pemrograman WordPress.

Petunjuk penggunaan WPSID-shortcode ada di Integrasikan-OpenSID-dan-SID-ke-web-Wordpress.