Panduan Mengubah Penampilan Web

Struktur Tema

OpenSID menyediakan dua tema penampilan web:

1. Tema default, dan
2. Tema hadakewa.

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

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

1. Style/css tema default ada di folder themes/default/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.

Folder desa/css

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 default, letakkan di folder desa/css/default, 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.

Contoh 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/default 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.

Buat Issue Jika Perlu

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