OpenSID menyediakan dua tema penampilan web:

  1. Tema default, 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 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

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.

Tema Ubahan Desa

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.

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.

× Chat