This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

Pendahuluan

Perhatikan: pada LimeSurvey versi sebelumnya, file yang menentukan tampilan survei, yaitu cara survei disajikan dalam hal warna, font, tata letak, dan (sebagian) perilaku, disebut "templat". Berdasarkan pemahaman baru, hal ini sekarang disebut "tema", sedangkan templat dikhususkan untuk survei contoh.

Pada halaman ini Anda akan mempelajari cara untuk:

Menggunakan sistem tema baru LimeSurvey 3.0.
Menggunakan pewarisan untuk mengelola tema Anda sendiri.
Menambahkan gambar ke tema Anda
Mengelola opsi tema untuk survei dan grup survei Anda

LimeSurvey 3 memperkenalkan sistem mesin tema yang sepenuhnya baru, berbasis Twig 1.29 dan Bootstrap, serta mendukung pewarisan tema dan opsi tema. Sistem ini menghapus sepenuhnya sistem kata kunci pengganti yang lama. Jadi sekarang, 100% HTML frontend dapat dikustomisasi. Misalnya, pada sistem tema lama terdapat kata kunci {ASSESSMENTS} yang diganti dengan HTML penilaian saat eksekusi. Perancang tema tidak punya cara untuk menyesuaikan HTML ini (selain menggunakan JavaScript). Sekarang ada file bernama assessments.twig yang berisi logika (ditulis dalam Twig) untuk menghasilkan HTML tersebut. Pada halaman-halaman ini, kami akan memberikan penjelasan tentang cara menggunakan mesin tema baru ini.

Kami tidak akan menjelaskan secara rinci cara kerja Twig di sini. Twig adalah semacam PHP yang sangat disederhanakan dan menawarkan tingkat keamanan tinggi berkat sistem “sandbox” (kita akan membahasnya lebih rinci pada bagian tentang kode inti Mesin Tema). Jika Anda sudah mengenal PHP, Anda akan sangat mudah menguasainya. Jika Anda belum mengenal PHP, Twig seharusnya tetap cukup mudah dipelajari. Silakan lihat dokumentasi Twig 1.X: https://twig.symfony.com/

Mengedit Menggunakan Antarmuka Admin

Daftar tema

Di dasbor admin, sekarang terdapat kotak untuk mengakses daftar tema:

Daftar ini dibagi menjadi 5 kolom:

pratinjau tema: hanya berupa file gambar bernama “preview.png” di root tema
“judul” tema sebagaimana ditentukan dalam manifes (config.xml di root tema)
deskripsi tema: string yang ditetapkan dalam manifesnya
jenis tema: Tema inti (disediakan bersama LimeSurvey), Tema pengguna (ditambahkan di direktori upload), tema XML (tidak dimuat ke basis data)
Perpanjang: jika tema memperluas tema lain, namanya akan ditampilkan di sini
Beberapa tombol aksi:
- Instal: memuat manifes tema untuk menambahkannya ke basis data dan membuatnya tersedia untuk dipilih di tingkat survei
- Copot instalasi: menghapus entri konfigurasi tema di basis data
- Penyunting tema: mengarahkan Anda ke penyunting tema
- Opsi tema: membawa Anda ke konfigurasi global opsi tema

Penyunting Tema

Dokumentasi ini mengasumsikan Anda sudah tahu cara menggunakan Penyunting Tema pada LS versi sebelumnya.

Penyunting Tema dipertahankan semirip mungkin dengan yang asli. Jadi, ketika Anda membuka Tema Inti, Anda tidak dapat mengeditnya. Namun sekarang, alih-alih tombol “salin”, Anda memiliki “tombol perpanjang”.

Sekarang Anda memperpanjang tema — *Sekarang Anda **memperpanjang** tema*

Gambaran singkat tentang konsep pewarisan tema

Di LS3, sebuah tema sekarang dapat mewarisi tema lain, atau dengan kata lain “memperluas” tema lain. Artinya, direktori tema akan nyaris kosong dan hanya berisi file (tampilan, stylesheet, skrip, sumber daya, dll.) yang berbeda dari file aslinya. Dengan begitu, Anda akan mudah membuat banyak tema untuk berbagai pengguna tanpa harus memelihara banyak tema yang berbeda. Misalnya: Anda dapat memiliki tema buatan sendiri, lalu satu versi untuk sebuah perusahaan (dengan logo, gaya, mungkin tautan ke situs webnya di footer, dll.), versi lain untuk perusahaan lain, dan seterusnya. Jika kemudian Anda memperbarui CSS atau tata letak global tema kustom Anda, semua tema yang mewarisinya akan diperbarui secara otomatis. Perhatikan bahwa pewarisan bersifat rekursif: sebuah tema dapat memperluas tema yang memperluas tema lain, dan seterusnya.

Ini juga berarti bahwa jika Anda memperluas salah satu tema inti LimeSurvey, Anda tetap akan mendapatkan manfaat dari pembaruannya.

Hal-hal baru pada antarmuka pengguna

Untuk memperluas tema Monochrome milik LimeSurvey, buka daftar tema, lalu klik tombol “Penyunting tema” pada tema Monochrome. Kemudian klik “perpanjang” dan konfirmasi nama baru “extends_monochrome”.

Jika sekarang Anda membuka direktori upload (dengan klien file/FTP Anda), Anda akan melihat bahwa direktori baru telah dibuat: upload/themes/extends_monochrome Direktori ini berisi sebuah file XML dan beberapa direktori, tetapi sebagian besar direktori kosong. Tidak ada tampilan, CSS, maupun JS. Namun, Anda tetap dapat memilih tema ini seperti tema biasa dari sebuah survei dan tampilannya akan persis sama dengan tema monochrome.

*Struktur tema (direktori dan file) tepat setelah dibuat. Isinya nyaris kosong*

Sumber daya (jpg, png, dll.) dari tema asli disalin saat memperluas tema. Hal ini karena jika Anda menyalin file CSS dari tema asli ke tema lokal, dan file tersebut merujuk ke file-file itu (misalnya pada pernyataan background-image), CSS tersebut perlu menemukan gambar-gambar itu di jalur tema saat ini.

Penyunting tema untuk tema extends_monochrome terlihat seperti ini:

Tidak ada perbedaan besar dengan penyunting tema yang lama. Berikut perbedaan utamanya:

Kata kunci inherited pada daftar file. Artinya file tersebut tidak ada di direktori tema dan file dari tema asli akan digunakan.

Penyunting utama ( ACE editor ) menampilkan isi file yang dipilih. File tidak hanya berisi HTML, CSS, atau JS, tetapi juga pernyataan Twig. Pernyataan Twig ini memberi kita kemungkinan untuk memindahkan sebagian logika ke tampilan tema yang sebelumnya terletak jauh di dalam inti, dan kini dapat dikustomisasi.

*Beberapa kode twig, untuk Daftar Survei*

Karena itu, sekarang tersedia lebih banyak jenis layar pada pemilih tarik-turun di menu atas. Anda akan melihat halaman seperti ‘Daftar Survei’, ‘Muat’, ‘Simpan’, ‘Kesalahan’, ‘Registrasi’, ‘Penilaian’, ‘Cetak Jawaban’ yang sebelumnya tidak tersedia, atau yang sebelumnya tidak benar-benar dapat dikustomisasi.

*Sekarang, Anda dapat mengustomisasi semua layar*

Tautan ‘tip’ di bagian bawah daftar file memberi Anda cara Twig untuk menambahkan gambar ke HTML Anda

Tombol ‘simpan perubahan’ menjadi tombol Salin ke tema lokal dan simpan perubahan

Contoh singkat: menambahkan gambar

Tombol Salin ke tema lokal dan simpan perubahan akan melakukan persis seperti namanya: jika Anda mengedit apa pun di dalam file lalu mengklik tombol itu, file akan disalin ke tema yang sedang Anda edit, dan perubahan Anda disimpan.
Misalnya: klik file layout_global.twig, lalu tepat sebelum blok content ( {% block content %}) tambahkan teks “TEST” dan klik tombolnya. Anda dapat melihat bahwa label file berubah dari “inherited” menjadi “local” dan sekarang tombolnya menjadi tombol biasa simpan perubahan.

Jika Anda membuka penjelajah file dan masuk ke direktori upload/themes/extends_monochrome/views/, Anda akan melihat bahwa direktori itu hanya berisi satu file, yaitu layout_global.twig, dan string “TEST” ada di dalamnya.

Sekarang, alih-alih menambahkan teks acak, kita akan menambahkan gambar. Jika Anda mengklik tautan tip, akan muncul keterangan:
Untuk menggunakan gambar dalam file .twig: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Jika Anda sudah membaca dokumentasi Twig (dan seharusnya sudah pada tahap ini), Anda tahu bahwa {{ function( ) }} akan menampilkan hasil sebuah fungsi di layar. Di sini, fungsinya adalah image( ).

Jika Anda penasaran dengan apa yang dilakukannya, Anda dapat menemukannya di kode berikut (versi RC3): fungsi image() di RC3

Jika Anda tidak memahami kodenya: jangan khawatir, Anda tidak perlu tahu cara kerjanya, tetapi mengapa dan bagaimana menggunakannya.

Anda sebaiknya menggunakan fungsi image() karena dua alasan:

Fungsi image menelusuri tema untuk menemukan gambar. Jika tema yang Anda kerjakan memperluas tema lain, dan Anda menyalin file tempat Anda menyisipkan gambar ke tema lokal, tetapi gambar tersebut tidak disalin ke tema lokal, fungsi ini akan menelusuri pohon pewarisan tema untuk menemukan lokasi gambar itu.
Fungsi ini menggunakan asset manager, sehingga akan meningkatkan kinerja tema Anda. Lihat dokumentasi Yii Asset Manager untuk informasi lebih lanjut: http://www.yiiframework.com/wiki/148/understanding-assets/

Jadi, untuk menambahkan gambar ke tema Anda:

cukup unggah seperti biasa dengan pengunggah file di sebelah kanan, lalu tambahkan di tempat yang Anda inginkan pada file twig mana pun:

{{ image('./files/myfile.png') }}

Jika Anda ingin menambahkan teks alternatif untuk gambar Anda (untuk pembaca layar dan validasi HTML), tambahkan:

Jika Anda ingin menambahkan atribut class dan id:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Beberapa hal dalam daftar TO-DO kami

Memberi pengguna kemungkinan untuk mengunggah file pratinjau kustom langsung dari penyunting
Menambahkan tombol untuk menghapus file lokal dan kembali ke status inherited
Hanya menyalin gambar yang digunakan dalam file CSS (dengan mencantumkannya di manifes sebagai file yang harus disalin)
Menampilkan tema mana yang diperluas oleh tema saat ini (jika ada)

Opsi tema

Hal baru lainnya di LS3 adalah halaman opsi tema. Seperti yang akan kita lihat nanti, pembuat tema dapat membuat opsi mereka sendiri bahkan halaman opsi admin mereka sendiri. Di sini, kita akan melihat sekilas cara kerja halaman opsi Tema Inti. Untuk mengakses opsi tema di tingkat global: klik “Opsi tema” pada daftar tema

Opsi lanjutan

Saat Anda membuka tab Opsi tema, Anda dapat memilih untuk mengedit Opsi sederhana atau Opsi lanjutan. “Opsi lanjutan” hanyalah formulir polos yang memberi Anda akses ke kolom konfigurasi utama tema dari basis data. Untuk memahami cara kerjanya, Anda juga perlu membaca tentang file XML dan pembuatan tema dari awal. Jadi, fitur ini cukup rumit dan dibuat untuk pengguna tingkat lanjut.

Namun, jika Anda memang ingin mengedit pengaturan lanjutan, klik tab Opsi lanjutan

File CSS: File CSS yang harus ditambahkan ke templat;
File JS: File JS yang harus ditambahkan ke templat;
File Cetak CSS: File CSS yang dimuat saat mencetak templat;
Opsi: Kolom ini berisi opsi (beserta nilainya) yang harus diteruskan ke tampilan templat;
Nama CssFramework: Nama kerangka kerja CSS yang akan dimuat. Untuk saat ini, hanya Bootstrap atau tidak sama sekali;
Cssframework Css: Anda dapat mengganti bootstrap.css inti pada kolom ini dengan versi kustom yang berbeda;
Cssframework Js: Kolom boostrap.js inti dapat diganti dari sini dengan versi kustom yang berbeda;
Paket untuk dimuat: Dari pengaturan ini, Anda dapat memuat beberapa paket aset inti dari LimeSurvey.

Anda akan melihat input unggah di bagian atas, yang memungkinkan Anda mengunggah file ke direktori file tema. Parameter ini dapat digunakan untuk mengubah seluruh tampilan tema.

Peringatan! : Jangan ubah nilai-nilai ini kecuali Anda tahu apa yang Anda lakukan!

Opsi sederhana

Halaman opsi sederhana berasal dari Templat itu sendiri. Halaman ini dibuat melalui file twig dan beberapa javascript di dalam direktori /options tema: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Tautan rusak)

Halaman ini dapat sangat berbeda dari satu tema ke tema lain, dan penyedia tema sangat dianjurkan untuk membuat tampilan dan nuansa mereka sendiri.

Halaman opsi sederhana pada dasarnya hanya mengisi input formulir lanjutan. Anda dapat melihatnya dengan mengaktifkan atau menonaktifkan sebuah pengaturan di halaman sederhana, lalu melihat bagaimana input terkait di formulir lanjutan berubah sesuai pengaturan tersebut. Misalnya, pada opsi sederhana Templat Default, jika Anda mengubah tema Bootswatch menjadi “Darkly” lalu mengklik tab opsi lanjutan (bahkan tanpa menyimpan), Anda akan melihat bahwa kolom “Cssframework Css” berubah dari

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
menjadi
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Berikut adalah berbagai opsi sederhana untuk tema inti:

Ajax mode: Apakah halaman berikutnya dimuat melalui ajax (lebih cepat) atau melalui pemuatan ulang halaman (lebih baik untuk keperluan debugging)
Gambar latar belakang: jika diatur ke Ya, gambar bernama pattern.png akan dimuat (akan diganti dengan pemilih berkas di Master)
Box container: jika diatur ke Tidak, pertanyaan tidak akan ditempatkan dalam kotak (sehingga Anda dapat menggunakan larik besar yang melebihi lebar layar)
Brandlogo: jika diatur ke tidak, nama survei akan ditampilkan di bilah atas; jika tidak, Anda dapat memilih salah satu gambar di dalam direktori berkas untuk digunakan sebagai gambar logo.
Animasikan tubuh: jika diatur ke ya, Anda dapat memilih salah satu animasi yang akan diterapkan saat isi survei dimuat
Animasikan pertanyaan: sama halnya dengan pertanyaan
Animate alerts: sama halnya dengan peringatan
Bootstrap theme: di sini, Anda dapat memilih tema Bootstrap yang akan dimuat. Tema ini berasal dari Bootswatch https://bootswatch.com/3/

Pustaka yang digunakan untuk animasi adalah animate.css: https://daneden.github.io/animate.css/ Tentu saja, penyedia tema dapat menambahkan pustaka animasi sendiri atau tidak menggunakan pustaka animasi sama sekali.

Tema monochrome menggunakan tema warna bootstrap yang sama dengan antarmuka pengguna admin. Tema ini tidak menggunakan sistem penggantian kerangka kerja CSS, tetapi hanya menambahkan berkas CSS. Dengan demikian, ini menggambarkan cara lain bagi penyedia tema untuk menangani tema kustom.

Sistem pewarisan

Pada bagian sebelumnya, kita telah melihat bahwa sebuah tema dapat memperluas tema lain. Konfigurasi tema juga dapat mewarisi dari konfigurasi tema lain. Artinya, untuk sebuah tema tertentu, Anda dapat memiliki konfigurasi pada

tingkat global (yang baru saja kita lihat, dapat diakses dari daftar tema)
tingkat grup survei
dan yang terakhir pada tingkat survei.

Setiap parameter pada tingkat tertentu dapat mewarisi dari tingkat di atasnya: pewarisan grup survei. Pertama, mari kita lihat tingkat grup survei.

Pada tingkat grup survei

Memang, salah satu kebaruan hebat lainnya dari LS3 adalah sistem grup survei. Sekarang Anda dapat membuat berbagai grup untuk mengatur survei Anda. Untuk mengaksesnya, buka daftar survei lalu klik tab grup survei:

Dalam daftar ini, terdapat dua tombol aksi. Jika grup kosong, Anda dapat menghapusnya. Jika tidak, Anda selalu dapat mengeditnya. Dengan mengklik tombol edit, Anda akan masuk ke halaman konfigurasi Grup Survei:

Tab ketiga pada halaman ini bernama “Template options for this survey group”. Jika Anda mengkliknya, Anda akan melihat daftar tema yang sama seperti pada daftar tema, hanya saja di sini yang terlihat hanya tombol opsi (penyunting tema hanya dapat diakses dari daftar utama).
Sekarang, jika Anda mengklik opsi untuk Default Template, Anda akan melihat ini:

Wariskan semuanya berarti seluruh konfigurasi akan diwarisi dari tingkat konfigurasi Global.
Jika Anda membuka halaman opsi lanjutan, Anda akan melihat bahwa semua kolom diatur untuk mewarisi.
Jika Anda mengklik "tidak" pada "Wariskan semuanya" di opsi sederhana, Anda akan kembali melihat halaman yang sangat mirip dengan halaman opsi global. Satu-satunya perbedaan adalah bahwa untuk setiap kolom, Anda dapat mengaturnya ke ya, tidak, atau mewarisi; dan setiap pemilih tarik-turun memiliki nilai inherit'.

Sebuah grup survei dapat menjadi anak dari grup lain. Dalam hal ini, grup tersebut akan mewarisi dari induknya.

Pada tingkat survei

Saat mengedit survei, pada menu bilah kiri, Anda akan melihat entri baru “Opsi tema”. Entri ini akan membawa Anda ke halaman opsi dari tema yang dipilih untuk survei saat ini. Anda akan menemukan sistem pewarisan yang sama seperti pada grup survei, tetapi kali ini, mewarisi berarti pengaturan akan diwarisi dari Grup Survei dari survei tersebut.

Contoh kasus penggunaan

Misalkan Anda menggunakan satu tema untuk beberapa perusahaan (A dan B). Anda mengatur opsi favorit Anda pada tingkat global (misalnya: ajax aktif, animasikan tubuh dengan slide in, peringatan dengan pulse). Lalu Anda membuat grup survei untuk setiap perusahaan: satu grup survei untuk perusahaan A yang akan menampung semua survei perusahaan tersebut, dan satu grup survei untuk perusahaan B yang akan menampung semua survei perusahaan B. Pada tingkat ini, Anda hanya akan mengatur logo dan latar belakang, dan membiarkan opsi lainnya mewarisi. Dengan demikian, semua survei dalam grup A akan menggunakan logo perusahaan A, dan semua survei dalam grup B akan menggunakan logo perusahaan B. Untuk salah satu survei perusahaan A, Anda dapat menggunakan latar belakang berbeda sesuai dengan topik survei: Anda cukup mengubah latar belakang pada opsi di tingkat survei. Jika seseorang di perusahaan B mengatakan bahwa peringatan berdenyut terlalu agresif dan ia lebih suka sesuatu yang lebih halus seperti fade in, Anda cukup mengubah animasi peringatan pada tingkat Grup Survei B dan semua survei dalam grup ini akan menggunakan animasi tersebut. Jika perusahaan A mengganti logonya, Anda dapat mengubahnya pada tingkat Grup Survei A, dan semua survei dalam grup ini akan menggunakan logo baru.

Contoh-contoh ini didasarkan pada opsi tema inti saat ini. Namun tentu saja, jika Anda adalah penyedia tema, atau jika Anda dapat sedikit membuat skrip dengan twig, Anda dapat menambahkan opsi Anda sendiri. Misalnya, Anda dapat menambahkan opsi “info footer” yang berisi data seperti situs web perusahaan atau nomor telepon bantuan. Kemudian, jika perusahaan A memiliki beberapa departemen dengan nomor telepon berbeda, Anda cukup membuat satu subgrup untuk setiap departemen di Grup Survei A. Setiap subgrup akan memiliki nomor teleponnya sendiri pada opsi ini.

FAQ tentang kustomisasi tema

Di sini Anda akan menemukan beberapa jawaban atas pertanyaan yang telah diajukan di forum dan dapat membantu Anda menyesuaikan tema Anda.

Menyesuaikan CSS/JS: menangani asset manager ("mengapa perubahan saya tidak diterapkan?")

Jika Anda mencoba memperbarui CSS/JS sebuah tema dengan mengedit kode secara langsung menggunakan editor favorit Anda, Anda mungkin terkejut karena perubahan Anda tidak diterapkan.

Sejak 2.50, LS menggunakan asset manager Yii: Dokumentasi Yii tentang Aset

Asset manager memindahkan berkas CSS/JS sebuah tema ke subdirektori tmp/ dengan string acak (mis.: "tmp/1ef64ml/"). Jadi jika Anda membuat perubahan pada berkas css/js dan memberi tahu asset manager, berkas tersebut akan disalin ke subdirektori baru dengan nama baru sehingga cache browser pengguna diperbarui dan mereka melihat css/js yang baru. Jika tidak, mereka harus membersihkan cache browser mereka.

Berikut tautan CSS pada header ketika asset manager aktif:

Seperti yang Anda lihat, semuanya merujuk ke subfolder tmp/.

Berikut tautan CSS pada header ketika asset manager nonaktif:

Seperti yang Anda lihat, tautan tersebut mengarah ke berkas asli tema.

Tentu saja, jika Asset Manager tidak mengetahui bahwa Anda telah mengubah berkas, berkas lama di direktori tmp/ yang lama akan tetap tidak berubah, dan perubahan Anda tidak akan pernah diterapkan..

Jadi, saat Anda mengedit CSS/JS sebuah tema, Anda memiliki beberapa kemungkinan:

Anda dapat menggunakan Penyunting tema LS: editor ini menangani asset manager sehingga Anda tidak perlu khawatir tentang apa pun
Anda dapat mengaktifkan mode debug: mode ini akan menonaktifkan asset manager, sehingga berkas css/js asli dari tema Anda yang dipanggil (tetapi Anda harus menyegarkan cache browser pada setiap pemuatan)
Anda dapat menyegarkan cache aset: dari Pengaturan global -> General -> Clear asset cache

Menggunakan penyunting tema untuk mengedit CSS kustom adalah solusi terbaik.

Menggunakan penyunting tema akan membantu Anda memahami arsitektur mesin tema yang baru. Selain itu, jika Anda menyesuaikan fruity, berhati-hatilah dengan spesifisitas CSS: sebagian besar definisi menggunakan selektor ".fruity" (salah satu kelas dari elemen body)

Menambahkan font kustom ke tema saya

Cara mudah: menggunakan Google Font CDN

Tema Survei Bootswatch menggunakan Google Font CDN. Mari kita lihat cara kerjanya: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Kemudian font Lato digunakan melalui aturan CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

Anda dapat menggunakan font Google apa pun dengan cara tersebut pada tema kustom Anda. Tentu saja, Anda sebaiknya menghapus pemilih font dari opsi tema Anda. Hapus baris-baris berikut di options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Menggunakan font lokal

Tentu saja, Anda juga dapat mengunduh berkas font dan menggunakannya dari server lokal daripada dari Google CDN (lebih baik untuk privasi). Sebagai contoh cara melakukannya, berikut versi lokal font noto kami: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Anda dapat menggunakan definisi yang sangat mirip pada berkas css tema Anda, lalu menyalin berkas NotoSans-Regular.ttf ke folder css/font-src/ tema Anda.

Kemudian, terapkan font tersebut ke body Anda (atau elemen lainnya) seperti di atas, dan hapus pemilih font opsi bawaan.

Membuat pemilih font Anda sendiri di opsi

Saat ini, Anda tidak dapat dengan mudah menggunakan pemilih font inti untuk menambahkan font Anda sendiri di opsi. Pertama-tama kami perlu memberi pengguna akhir kemampuan untuk mengunggah paket khusus (lihat paragraf berikutnya: A look into the Fruity Font Selector)
Berikut langkah-langkahnya:

Tambahkan dua font (my_custom_font dan my_custom_other_font) ke dalam tema Anda, menggunakan CDN atau server lokal
Lalu, di berkas css Anda, tambahkan dua kelas baru:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

Di berkas XML tema Anda, tambahkan opsi font (yang default adalah my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

di option.twig, tambahkan pemilih font Anda dengan menambahkan baris-baris berikut (belum diuji, jadi silakan sampaikan keluhan di forum jika tidak berfungsi):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Sekarang pengguna Anda seharusnya dapat memilih di antara kedua font tersebut.

A look into the Fruity Font Selector

Di masa mendatang, kami akan memberi pengguna akhir kemampuan untuk mengunggah paket aset mereka sendiri, termasuk paket font. Hal ini akan membuat penyesuaian font menjadi sangat mudah.
Untuk memahami paket Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Paket LimeSurvey didefinisikan di berbagai berkas. Paket font didefinisikan di sini: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Misalnya, paket font Noto didefinisikan di sini: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

Berkas noto.css yang dimuatnya ada di sini: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Perhatikan definisi kelas css ".font-noto" di bagian akhirnya:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

Lalu, di Tema Vanilla, font noto digunakan dengan menambahkan paket noto dan menetapkan opsi font ke noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Lalu, font pada class body didefinisikan menggunakan nilai ini: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Tentu saja, berkas XML hanya berisi nilai default untuk konfigurasi tema Anda. Namun sebenarnya, nilai-nilai tersebut didefinisikan dan dibaca di dalam basis data (tabel "template_configuration" (Pertanyaan: "template_" atau "theme_"?) sebagai string json. Berkas option.js hanya menggunakan nilai pemilih font pada opsi sederhana untuk mengubah nilai di dalam formulir tab lanjutan: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Jadi, ketika fungsi "unggah paket aset" sudah tersedia, akan mudah menambahkan skrip yang memindai semua paket font yang ada untuk menambahkannya ke dalam pemilih.

Menambahkan opsi tema untuk mengatur posisi dan tampilan elemen survei

Tutorial ini menunjukkan cara menambahkan opsi ke tema yang diperluas untuk menampilkan elemen survei di berbagai lokasi. Dalam kasus ini, kita akan membuat opsi tema untuk menampilkan judul survei di dua lokasi yang berbeda.

Demi kesederhanaan, tutorial ini didasarkan pada perluasan tema "bootswatch" di LimeSurvey versi 3.4.3.

Membuat tema khusus

Perluas tema "bootswatch" seperti dijelaskan di atas.
Salin custom.css ke tema lokal seperti dijelaskan di atas.

Membuat opsi tema baru

Salin isi /themes/survey/bootswatch/options/ ke /upload/themes/survey/yourThemeName/options/.

Buka /upload/themes/survey/yourThemeName/options/options.twig di editor dan temukan "{# Bootstrap Bootswatch theme #}". Tepat sebelum elemen induknya <div class='row'>, tambahkan ini:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Buka /upload/themes/survey/yourThemeName/config.xml dan tambahkan dua item ke blok "options" sehingga terlihat seperti ini:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

Ini akan memberi Anda dua opsi baru di layar Opsi tema seperti berikut:

Tampilan yang dimodifikasi untuk Judul Survei di navbar

Buat direktori baru /upload/themes/survey/yourThemeName/views/subviews/header/.
Salin /themes/survey/vanilla/views/subviews/header/nav_bar.twig ke direktori baru tersebut.

Buka /themes/survey/vanilla/views/subviews/header/nav_bar.twig dan cari "{# Logo option #}". Di bawahnya, ubah pernyataan IF untuk logo/nama survei, sehingga terlihat seperti ini:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

Tambahkan sesuatu seperti ini ke /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Ubah opsi tema "Survey name in navbar" menjadi "Ya"
Anda akan melihat ini:

Tampilan yang dimodifikasi untuk Judul Survei di bawah bilah kemajuan

Buat direktori baru /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Salin /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig ke direktori baru tersebut.

Buka /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig dan tambahkan elemen <h1> untuk nama survei. Sehingga terlihat seperti ini:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

Tambahkan sesuatu seperti ini ke /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

Ubah opsi tema "Survey name below progress bar" menjadi "Ya"
Anda akan melihat ini:

Unduhan

Contoh tema yang diperluas: Media:Test_survey_names.zip

Membuat tema dari awal

Dokumentasi segera hadir.

Untuk saat ini, berikut beberapa tips.

Struktur tema

Berkas dan direktori

Saat Anda membuat tema dari awal, Anda tidak perlu mengikuti struktur berkas/direktori/css/js dari Vanilla. CSS/JS yang wajib ditambahkan oleh core (Anda tetap dapat menghapusnya jika perlu).

Satu-satunya berkas yang harus dimiliki tema Anda adalah berkas layout:

layout_global.twig : merender halaman untuk pengisian survei
layout_survey_list.twig : merender daftar survei (jika tema ini ditetapkan sebagai default)
layout_errors.twig : digunakan untuk merender kesalahan yang menghalangi rendering survei. (ID survei salah, grup kosong dalam pratinjau grup, dll.)
layout_user_forms.twig: merender formulir pengguna seperti: token (peserta survei), dan pendaftaran.
layout_print.twig : digunakan untuk mencetak survei ke PDF
layout_printanswers.twig: mencetak jawaban

Isi berkas-berkas tersebut, serta berkas yang disertakan atau tidak, sepenuhnya terserah Anda. Semua berkas dan direktori lain yang Anda temukan di Vanilla bersifat opsional; silakan atur kode Anda sesuai keinginan.

Jika Anda membaca kode rendering frontend, Anda akan melihat bahwa nama-nama berkas tersebut muncul langsung di dalamnya. Itulah sebabnya berkas-berkas tersebut wajib.

Misalnya: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Konten

Di layout_global.twig milik Vanilla, Anda akan melihat bahwa kami menggunakan variabel bernama "include_content" untuk menentukan apa yang ditampilkan https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

aSurveyInfo.include_content memberi tahu Anda aksi apa yang sedang berlangsung: menampilkan pertanyaan? menampilkan hasil pengiriman? menampilkan hapus semua? dll. Seperti yang Anda lihat, di vanilla kami membuat satu berkas untuk disertakan per aksi. Jadi jika Anda ingin mengetahui daftar aksi, cukup periksa direktori vanilla views/subviews/content, lalu hapus ekstensi "twig": https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

clearall.twig
firstpage.twig
load.twig
mainrow.twig
main.twig
optin.twig
optout.twig
outerframe.twig
printanswers.twig
quotas.twig
register.twig
save.twig
submit_preview.twig
submit.twig
userforms.twig

Jika Anda pernah membuat tema untuk LimeSurvey versi 2.x, Anda akan melihat bahwa sebagian besar berkas tersebut sesuai dengan berkas pstpl lama pada LimeSurvey 2.x. Sekali lagi, tema Anda tidak wajib membuat berkas-berkas tersebut dengan nama-nama tersebut di direktori ini. Misalnya, Anda cukup menambahkan switch besar di layout_global.twig dengan HTML yang diinginkan untuk setiap aksi.

Manifes config.xml

Manifes tema berisi informasi utama tentang tema Anda. Saat Anda memasang tema, isi manifes akan dimuat ke basis data, dalam dua tabel berbeda: template dan template_configuration. Jadi setiap kali Anda mengubah manifes sebuah tema, Anda harus mencopot dan memasangnya kembali (atau cukup menyetel ulang). Karena proses ini merepotkan saat mengembangkan tema, Anda dapat memaksa penggunaan langsung berkas XML alih-alih entri DB. Untuk melakukannya, di config.php aktifkan mode debug dan setel 'force_xmlsettings_for_survey_rendering' ke true.

Bagian metadata

Tidak rumit: hanya informasi utama tentang tema Anda. Informasi ini akan dimasukkan ke tabel templates_configuration

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

Beberapa catatan:

name: akan digunakan sebagai kunci di DB. Jadi harus unik, dan tidak boleh memiliki karakter khusus (tanpa spasi). Perhatikan bahwa huruf besar/kecil tidak diperhitungkan
Title: akan digunakan untuk menampilkan nama tema Anda di berbagai daftar. Boleh memiliki karakter khusus
description: akan digunakan di daftar utama tema survei. Boleh berisi karakter khusus, bahkan kode HTML dengan menggunakan
extends: opsional, menentukan tema induk. Jadi jika ada berkas yang tidak ada di tema ini (twig/js/css/jpg, dll.), berkas tersebut akan dicari di tema induk

Jika Anda memperluas salah satu dari 3 tema core (Vanilla, Bootswatch, Fruity), Anda dapat mengubah nilai "extends" dari satu tema induk ke tema induk lainnya. Tentu saja, Anda harus menyetel ulang tema tersebut.

Bagian berkas

Bagian ini penting. Isinya akan dimasukkan ke tabel template_configuration, pada kolom files_css, files_js, files_print_css sebagai array JSON.

Misalnya: bagian berkas dari Material Premium Theme:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

Semua berkas CSS/JS yang ada di bagian ini akan dimuat saat survei dimulai (dalam mode ajax. Jika mode ajax nonaktif, tentu saja semua berkas dimuat ulang di setiap halaman).

Berkas-berkas tersebut akan ditambahkan ke Yii Asset Packet berdasarkan nama tema. Jadi saat Asset Manager aktif (mode debug nonaktif), berkas-berkas tersebut akan disalin ke direktori tmp bersama sisa tema (sehingga Anda dapat menggunakan path relatif di CSS dan JS untuk menjangkau berkas gambar). Tentang Asset manager di Yii: https://www.yiiframework.com/wiki/148/understanding-assets Tentang paket di Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Berkas-berkas tersebut menggunakan sistem pewarisan. Artinya, jika Anda menambahkan berkas CSS/JS ke sebuah tema, tetapi berkas itu tidak ada di tema tersebut, maka mesin akan mencari di semua tema induk dari tema ini dan menggunakan yang pertama ditemukan. Jadi jika pengguna memperluas tema Anda melalui penyunting tema, semua berkas tersebut akan diwarisi di temanya. Kata kunci merujuk pada sistem pewarisan ini.

add : akan menambahkan berkas ke tema, dan ke semua tema turunannya
replace: akan mengganti berkas dari tema induknya
remove: akan menghapus berkas dari paket mana pun, bahkan paket core (sejak 3.14)

Ingat bahwa Anda dapat menyetel 'force_xmlsettings_for_survey_rendering' di config.php sehingga konfigurasi dibaca dari XML alih-alih DB (tanpa perlu setel ulang). Ini akan mempermudah pengujian modifikasi berkas XML, dan menghindarkan Anda dari mencopot/memasang tema setiap kali XML dimodifikasi

Beberapa catatan tentang kata kunci tersebut:

Tips pewarisan

Seperti dijelaskan sebelumnya, kata kunci "add" dapat merujuk ke file yang berada di salah satu tema induk. Jadi, Anda dapat "menambahkan" file di bagian ini tanpa file tersebut ada di tema Anda, melainkan di salah satu tema induknya. Mesin tema akan memeriksa semua tema induk dan menggunakan file pertama yang ditemukan. Jika file tidak ditemukan, mode debug aktif di konfigurasi, dan mode debug JS frontend aktif di pengaturan global, sebuah pesan di konsol akan memperingatkan Anda. Contoh: jika kita menambahkan di my_theme: <add>css/unexisting.css</add>, di konsol kita akan melihat:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

Jika mode debug nonaktif, tidak ada kesalahan yang akan ditampilkan. Mesin tema hanya akan mengabaikan pernyataan add yang salah.

Kapan menggunakan add, kapan menggunakan replace, dan kapan cukup diserahkan ke tema induk?

Pertama: add dan replace sebenarnya kata kunci yang sama. Anda dapat menggunakan salah satunya, mesin tema akan melakukan hal yang sama. Keduanya dibedakan demi pembaca manusia, agar mereka memahami maksud Anda.

Anda tidak dapat menambahkan file dengan nama yang sama dengan file di tema induk: file tersebut akan selalu menggantikannya. Contoh: jika Anda memiliki file bernama "my_mother_theme/foo.css" dan Anda menambahkan file bernama "foo.cs" di tema turunan, hanya "daughter_theme/foo.css" yang akan ditambahkan ke tema. Jika Anda ingin mempertahankan "my_mother_theme/foo.css", pilih saja nama lain untuk "daughter_theme/foo.css", misalnya "daughter_theme/bar.css". Jadi, kata kunci "add" dapat digunakan sebagai kata kunci "replace".

Jika Anda bertanya-tanya mengapa: hal ini membuat pembuatan tema turunan secara otomatis jauh lebih mudah, karena menyalin bagian file langsung berfungsi (tidak perlu mengubah "add" menjadi "replace" saat memperluas salah satu file).

Agar lebih jelas, mari kita ambil contoh Fruity. Berikut bagian file CSS-nya:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

Jika Anda melihat file custom.css di Fruity, isinya persis sama dengan yang ada di Vanilla. Kita dapat menghapus file custom.css di dalam Fruity, dan file milik Vanilla akan dimuat. Kita juga dapat menghapus pernyataan <replace>custom.css</replace> dari manifes Fruity, maka pernyataan dari Vanilla akan digunakan, dan custom.css milik Vanilla akan dimuat.

Lalu mengapa kita menggunakan pernyataan <replace>custom.css</replace> di dalam manifes Fruity? Jawabannya mudah: karena kita ingin pengguna akhir dapat memperluas tema Fruity, mengubah file di tema lokalnya, dan memuat file yang telah diubah itu dari tema turunannya. Untuk memahaminya, cukup perluas Fruity dan lihat tema hasil perluasannya. Tema tersebut bahkan tidak memiliki file custom.css, sehingga file milik Fruity yang akan digunakan. Namun, jika pengguna membuat file ini di tema hasil perluasan (dengan mengklik "Perpanjang" di editor tema), maka file ini akan dimuat dari temanya.

Jadi secara umum: jika Anda membuat tema dari awal tanpa memperluas tema apa pun, cukup gunakan pernyataan add untuk menambahkan file CSS/JS Anda. Mudah sekali. jika Anda membuat tema yang memperluas tema lain, dan Anda tidak ingin pengguna dapat memperluas file CSS/JS dari tema induk: jangan gunakan pernyataan add di manifes Anda. File tetap akan dimuat dari konfigurasi tema induk. jika Anda membuat tema yang memperluas tema lain, dan Anda ingin mengganti file dari tema induk: gunakan kata kunci replace (kata kunci add akan memberikan hasil yang sama). jika Anda membuat tema yang memperluas tema lain, Anda tidak mengganti file CSS/JS tertentu, tetapi Anda ingin pengguna dapat memperluas file tersebut: gunakan pernyataan "replace" di manifes Anda untuk file ini. Meskipun Anda tidak mengganti file tersebut, dengan menggunakan kata kunci replace di manifes Anda mengizinkan pengguna melakukannya jika mereka mau.

Hanya kasus terakhir ini yang memerlukan sedikit olah pikir untuk dipahami, semua kasus lainnya sederhana.

Anda juga dapat mendaftarkan file CSS dan JS langsung dari kode twig. File-file tersebut hanya akan dimuat ketika file twig dipanggil. Jika Anda ingin pengguna dapat mewarisi file JS/CSS tersebut dari editor tema, ingatlah untuk menggunakan fungsi Template:RegisterTemplateCssFile('my style.css') dan Template:RegisterTemplateScript('my script.js'). Jika Anda tidak menggunakan fungsi-fungsi ini, tema Anda mungkin tetap berfungsi, tetapi pewarisan padanya akan rusak. Logikanya sama dengan fungsi Template:Image('my picture.jpg')

Kata kunci remove

Kata kunci remove baru tersedia sejak versi 3.14. Dengan kata kunci ini, Anda dapat menghapus file CSS/JS apa pun dari paket mana pun, bahkan paket inti. Kata kunci ini digunakan di Material Premium Theme untuk menghapus file Awesome Bootstrap Checkbox:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

jadi Anda harus menggunakan sintaks yang persis sama dengan file milik paket (contoh: "awesome-bootstrap-checkbox.css" saja tanpa path folder tidak akan berfungsi). Anda akan menemukan daftar lengkap paket inti beserta file-filenya di /application/config/packages.php dan config/third_party.php. Contohnya, untuk awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

Cara lain untuk menemukan nama yang tepat untuk tag remove adalah dengan mengaktifkan asset manager (menonaktifkan mode debug atau mengatur 'use_asset_manager'=>true di konfigurasi). Setelah itu, path yang digunakan adalah bagian tepat setelah direktori acak di direktori tmp. Contohnya, untuk awesome-bootstrap-checkbox.css:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

File yang tidak boleh Anda hapus:

jquery-3.1.1.min.js : diperlukan

jquery-migrate-3.0.0.min.js : diperlukan

survey.js : diperlukan

moment-with-locales.min.js : diperlukan untuk jenis pertanyaan tanggal (dan beberapa lainnya, sepertinya)

em_javascript.js : diperlukan untuk semua JavaScript ExpressionScript

Bagian options

Bagian ini berkaitan dengan opsi tema Anda. Bagian ini digunakan untuk mengisi kolom "options" pada tabel template_configuration sebagai larik JSON.

Informasi lebih lanjut

Theme:Available function

Beberapa catatan

CATATAN: jika Anda mengedit file XML sebuah tema, Anda harus menghapus instalasi lalu memasang ulang tema tersebut agar perubahan diterapkan.

CATATAN: untuk menghindari hal itu, Anda dapat memaksa penggunaan XML alih-alih database. Di config.php, aktifkan mode debug dan hapus tanda komentar pada:

'force_xmlsettings_for_survey_rendering' => true, // Hapus tanda komentar jika Anda ingin memaksa penggunaan file XML alih-alih DB (untuk memudahkan pengembangan tema)

Berhati-hatilah: semuanya akan dimuat dari XML (termasuk opsi, dll.)

CATATAN: jika Anda mengedit file CSS/JS secara manual (tanpa menggunakan Penyunting tema), dan mode debug nonaktif, sekarang Anda dapat memaksa aset untuk dibersihkan. Di "Pengaturan global", tab "General", klik tombol "Clear assets cache".

CATATAN: jika Anda menghapus bagian

Bab utama

Sistem Templat Baru di LS3.x

From LimeSurvey Manual