Penyunting tema

Pengenalan

Tema tinjauan mengawal rupa tinjauan anda kepada peserta: susun atur halaman, warna, fon, logo dan gaya setiap soalan. Tema dibina menggunakan templat Twig, CSS dan JavaScript, serta menggunakan Bootstrap 5 sebagai rangka kerja CSS.

Banyak perubahan biasa tidak memerlukan sebarang kod. Logo, warna, fon dan beberapa tetapan paparan boleh diubah melalui pilihan tema. Gunakan penyunting tema yang diterangkan dalam halaman ini apabila anda ingin melangkah lebih jauh: menambah CSS atau JavaScript anda sendiri, mengubah HTML sesebuah halaman, atau memuat naik imej dan fail lain untuk tema anda.

LimeSurvey disertakan dengan tema tinjauan teras berikut:

• Fruity TwentyThree (fruity_twentythree): Tema lalai.
• Bootstrap Vanilla (vanilla): Tema asas biasa untuk pembangun yang ingin membina tema berasaskan Bootstrap mereka sendiri.
• Fruity (fruity) dan Bootswatch (bootswatch): Kedua-duanya memanjangkan Bootstrap Vanilla.

Rupa setiap jenis soalan dikawal oleh tema soalan, bukan oleh tema tinjauan. Untuk mengubah HTML sesuatu jenis soalan, cipta tema soalan.

Sebelum anda bermula

Untuk menggunakan penyunting tema, anda memerlukan kebenaran global Tema (lihat kebenaran global) atau mestilah seorang superadministrator. Memanjangkan tema memerlukan hak Cipta, menyimpan perubahan memerlukan Kemaskini, dan memadam tema atau menetapkan semula fail memerlukan Padam.

  Tema yang mempunyai ralat boleh menyebabkan setiap tinjauan yang menggunakannya tidak dapat digunakan. Uji perubahan anda dengan pratonton tinjauan sebelum anda menggunakan tema dalam tinjauan sebenar.

Tema teras tidak boleh diedit: panjangkannya

Tema teras dikemas kini bersama LimeSurvey, jadi anda tidak boleh mengubahnya secara langsung. Untuk menyesuaikannya, panjangkan tema tersebut. Memanjangkan akan mencipta tema pengguna baharu yang mewarisi segala-galanya daripada tema induknya. Tema anda hanya mengandungi fail yang anda ubah; yang lain diambil daripada tema induk. Dengan cara ini tema anda tetap mendapat pembetulan pepijat dan penambahbaikan apabila LimeSurvey mengemas kini tema induk.

Untuk memanjangkan tema, sama ada:

• Pergi ke Konfigurasi > Tema, buka menu tindakan (⋯) di hujung baris tema dan klik Panjangkan, atau
• Buka tema dalam penyunting tema dan klik Panjangkan pada bar alat.

Masukkan nama untuk tema baharu. Penyunting tema kemudian membuka tema baharu anda.

Lokasi penyimpanan tema

• Tema teras: themes/survey/ dalam pemasangan LimeSurvey anda.
• Tema pengguna (tema yang dipanjangkan, dimuat naik atau diimport): upload/themes/survey/.

Anda juga boleh mengedit fail tema pengguna secara terus pada pelayan dengan penyunting anda sendiri. Pastikan pelayan web masih boleh membaca dan menulis fail tersebut selepas itu, supaya anda masih boleh menggunakan penyunting tema.

Penyunting tema

Untuk membuka penyunting tema, pergi ke Konfigurasi > Tema, buka menu tindakan (⋯) di hujung baris tema dan klik Penyunting tema.

Jika anda membuka tema teras, satu nota akan memaklumkan bahawa ini ialah tema standard dan menawarkan pautan untuk memanjangkannya. Anda boleh melihat fail dan pratontonnya, tetapi anda tidak boleh menyimpan perubahan.

Bar alat

• Ekspot: Memuat turun tema sebagai fail ZIP.
• Panjangkan: Mencipta tema baharu yang mewarisi daripada tema ini (lihat di atas).
• Namakan semula: Menamakan semula tema. Hanya tersedia untuk tema pengguna.
• Padam: Memadam tema. Anda tidak boleh memadam tema yang ditetapkan sebagai tema lalai.
• Tema: Menukar penyunting tema kepada tema lain.
• Skrin: Memilih halaman tinjauan yang dipaparkan dalam pratonton dan fail yang disenaraikan untuk diedit. Skrin yang ada ialah: Soalan, Senarai tinjauan, Alu-aluan, Selesai, Penilaian, Ralat, Kosongkan semua, Muat, Simpan, Pendaftaran, Cetak jawapan, Statistik awam, PDF, Melebihi kuota, Navigasi dan Peserta.

Mengedit fail

Panel di sebelah kanan menyenaraikan fail yang digunakan oleh skrin yang dipilih:

• Fail bahagian skrin: Templat Twig yang membina halaman.
• Fail JavaScript
• Fail CSS
• Lain-lain fail: Imej, fon dan sebarang fail lain bagi tema.

Klik nama fail untuk membukanya dalam penyunting. Fail yang ditandakan Diwarisi datang daripada tema induk. Anda masih boleh mengedit fail yang diwarisi: butang di bawah penyunting kemudian tertera Salin ke tema setempat dan simpan perubahan, dan menyimpan akan menyalin fail ke dalam tema anda bersama perubahan anda. Mulai saat itu, salinan anda digunakan menggantikan fail induk.

Fail yang tergolong dalam tema anda mempunyai butang Mengulang. Tindakan ini memadam salinan anda, supaya fail daripada tema induk digunakan semula.

Memuat naik fail

Gunakan medan muat naik di bahagian bawah panel Lain-lain fail untuk menambah imej, fon atau fail lain pada tema anda. Fail yang dimuat naik disimpan dalam folder files/ tema. Secara lalai anda boleh memuat naik imej (gif, ico, jpg, jpeg, png) dan jenis fail berikut: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq dan lsg. Pentadbir anda boleh mengubah senarai ini melalui tetapan allowedthemeimageformats dan allowedthemeuploads dalam config.php.

Untuk memaparkan imej yang dimuat naik dalam fail Twig, gunakan fungsi image():

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

Dalam fail CSS, rujuk fail yang dimuat naik dengan laluan relatif kepada folder css, contohnya url('../files/background.jpg').

Pratonton

Di bawah penyunting, pratonton memaparkan skrin yang dipilih dengan kandungan contoh. Gunakan butang Mudah alih, 640x480, 800x600, 1024x768 dan Penuh untuk menyemak halaman pada saiz skrin yang berbeza.

Pratonton menggunakan data contoh dan mungkin tidak memaparkan setiap gaya dengan tepat seperti tinjauan sebenar. Sentiasa semak perubahan anda dalam pratonton tinjauan sebenar juga.

Mengimport dan mengeksport tema

• Untuk memindahkan tema ke pemasangan LimeSurvey yang lain, klik Ekspot pada bar alat penyunting tema. Ini akan memuat turun tema sebagai fail ZIP.
• Untuk memasang tema daripada fail ZIP, pergi ke Konfigurasi > Tema dan klik Muat naik & pasang.

Cara tema dibina

Folder tema

Folder tema mengandungi:

• config.xml: Manifes tema: nama, tema induk, fail CSS dan JavaScript, pilihan tema dan skrin yang dipaparkan dalam penyunting tema.
• views/: Templat Twig. layout_global.twig ialah susun atur utama untuk kebanyakan halaman tinjauan. Susun atur lain digunakan untuk halaman khas, contohnya layout_survey_list.twig untuk senarai tinjauan awam dan layout_errors.twig untuk halaman ralat. Folder views/subviews/ mengandungi templat yang lebih kecil yang disertakan oleh susun atur tersebut.
• css/ dan scripts/: Fail CSS dan JavaScript tema.
• files/: Imej dan fail lain yang digunakan oleh tema.
• options/: Halaman untuk pilihan tema.

Templat Twig

Templat menerima data tinjauan dalam pemboleh ubah aSurveyInfo. Untuk melihat semua kandungannya, hidupkan mod nyahpepijat dalam application/config/config.php dan tambahkan baris ini pada penghujung elemen body dalam layout_global.twig:

{{ dump(aSurveyInfo) }}

Untuk fungsi yang boleh anda gunakan dalam templat, lihat Fungsi Twig yang tersedia. Atas sebab keselamatan, templat dijalankan dalam kotak pasir, jadi hanya fungsi ini yang tersedia.

config.xml

Bahagian <files> menyenaraikan fail CSS dan JavaScript yang dimuatkan pada halaman tinjauan:

• <add> menambah fail. Jika tema induk sudah mempunyai fail dengan nama yang sama, fail anda akan menggantikannya.
• <remove> menghentikan fail tema induk daripada dimuatkan.

Anda tidak perlu menyenaraikan semula fail daripada tema induk: fail tersebut tetap dimuatkan.

LimeSurvey membaca config.xml semasa tema dipasang dan menyimpan tetapan dalam pangkalan data. Selepas anda mengubah config.xml bagi tema yang telah dipasang, pergi ke Konfigurasi > Tema, buka menu tindakan (⋯) tema tersebut dan klik Tetapkan semula untuk memuatkan semula fail.

Menambah CSS dan JavaScript anda sendiri

Setiap tema teras mempunyai dua fail yang dikhaskan untuk kod anda sendiri:

• css/custom.css: Dimuatkan selepas semua fail CSS yang lain, jadi peraturannya mengatasi gaya tema.
• scripts/custom.js: Dimuatkan selepas JavaScript tema itu sendiri.

Apabila anda memperluas tema, inilah fail yang perlu diubah. Tambahkan CSS anda dalam custom.css dan bukannya mengedit fail CSS utama tema, supaya tema anda terus mendapat kemas kini tema induk.

Untuk menambah lebih banyak fail, muat naik fail tersebut dan senaraikannya dalam bahagian <files> pada config.xml tema anda. Gunakan nama fail yang tidak wujud dalam tema induk, jika tidak fail anda akan menggantikan fail induk:

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

Halaman tinjauan dimuatkan dengan Ajax secara lalai, jadi pelayar tidak memuatkan halaman sepenuhnya apabila peserta beralih ke halaman seterusnya. Jalankan JavaScript anda pada pemuatan halaman pertama dan pada setiap pemuatan halaman Ajax:

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

Menggayakan soalan dengan CSS

Semua contoh dalam bahagian ini diletakkan dalam fail custom.css tema anda.

Kelas halaman

Elemen <html> dan <body> membawa kelas yang boleh anda gunakan untuk menggayakan keseluruhan halaman:

• html: Kod bahasa (contohnya en) dan arah teks (dir-ltr atau dir-rtl).
• body: Nama tema dan setiap tema induk (contohnya fruity_twentythree), fon (contohnya font-ibm-sans), bahasa (contohnya lang-en), dan brand-logo apabila logo dipaparkan.

Kelas bekas soalan

Setiap soalan dibalut dalam elemen dengan kelas question-container. Ia juga membawa:

• Kelas jenis soalan (lihat jadual di bawah).
• mandatory: Soalan itu wajib atau wajib lembut.
• input-error: Jawapan tidak lulus pengesahan, atau soalan wajib tidak dijawab.
• missing: Soalan masih mempunyai bahagian yang belum dijawab dan peserta sudah melepasinya.
• ls-hidden dan ls-irrelevant: Soalan disembunyikan oleh syaratnya.
• ls-hidden-attribute: Soalan disembunyikan oleh tetapan "Sentiasa sembunyikan soalan ini".
• Sebarang kelas yang dimasukkan dalam tetapan Kelas CSS soalan (di bawah Paparan). Gunakan ini untuk menggayakan soalan tunggal.

Contohnya, soalan Senarai (Radio) yang wajib dan tidak dijawab:

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

Kelas jenis soalan

Jenis soalan	Kelas	Kod jenis
Pilihan 5 poin	.choice-5-pt-radio	5
Tatasusunan	.array-flexible-row	F
Tatasusunan (pilihan 5 poin)	.array-5-pt	A
Tatasusunan (pilihan 10 poin)	.array-10-pt	B
Tatasusunan (Naik/Sama/Turun)	.array-increase-same-decrease	E
Tatasusunan (Nombor)	.array-multi-flexi	:
Tatasusunan (Teks)	.array-multi-flexi-text	;
Tatasusunan (Ya/Tidak pasti/Tidak)	.array-yes-uncertain-no	C
Tatasusunan mengikut lajur	.array-flexible-column	H
Skala dwi tatasusunan	.array-flexible-dual-scale	1
Tarikh/Masa	.date	D
Persamaan	.equation	*
Muat naik fail	.upload-files	|
Jantina	.gender	G
Teks percuma besar	.text-huge	U
Suis bahasa	.language	I
Senarai (Senarai Kebawah)	.list-dropdown	!
Senarai (Radio)	.list-radio	L
Senaraikan dengan komen	.list-with-comment	O
Teks bebas panjang	.text-long	T
Pelbagai pilihan	.multiple-opt	M
Pelbagai pilihan dengan komen	.multiple-opt-comments	P
Input berangka berbilang	.numeric-multi	K
Teks pendek berbilang	.multiple-short-txt	Q
Input berangka	.numeric	N
Kedudukan	.ranking	R
Teks percuma pendek	.text-short	S
Paparan teks	.boilerplate	X
Ya/Tidak	.yes-no	Y

Kelas untuk bahagian soalan

Di dalam bekas soalan, kawasan jawapan menggunakan kelas ini. Sebahagiannya bergantung pada tetapan paparan soalan: contohnya, Tatasusunan (Nombor) menggunakan kelas yang berbeza apabila ia memaparkan kotak semak dan bukannya juntai bawah.

Kelas	Digunakan untuk	Digunakan oleh (contoh)
.ls-answers	Elemen yang mengandungi semua pilihan jawapan	Semua jenis soalan
.answers-list	Senarai atau baris pilihan jawapan	Senarai (Radio), Pelbagai pilihan, Kedudukan, baris bagi kebanyakan tatasusunan
.subquestion-list, .questions-list	Senarai atau jadual subsoalan	Tatasusunan, Teks pendek berbilang, Input berangka berbilang
.answer-item	Satu pilihan jawapan atau input	Hampir semua jenis soalan
.noanswer-item	Pilihan "Tiada jawapan"	Tatasusunan, Pilihan 5 poin, Senaraikan dengan komen
.question-item	Subsoalan yang juga merupakan jawapan	Pelbagai pilihan, Teks pendek berbilang, Input berangka berbilang
.radio-list	Senarai atau baris butang radio	Senarai (Radio), Pilihan 5 poin, Senaraikan dengan komen, baris tatasusunan radio
.radio-array	Jadual butang radio	Tatasusunan, Tatasusunan (pilihan 5 poin), Tatasusunan (pilihan 10 poin), Tatasusunan (Naik/Sama/Turun), Tatasusunan (Ya/Tidak pasti/Tidak)
.radio-item	Satu butang radio beserta labelnya	Senarai (Radio), Pilihan 5 poin, Senaraikan dengan komen, tatasusunan radio
.checkbox-list	Senarai kotak pilihan	Pelbagai pilihan, Pelbagai pilihan dengan komen
.checkbox-array	Jadual kotak pilihan	Tatasusunan (Nombor) dengan susun atur kotak pilihan
.checkbox-item	Satu kotak pilihan beserta labelnya	Pelbagai pilihan, Pelbagai pilihan dengan komen, Tatasusunan (Nombor) dengan susun atur kotak pilihan
.checkbox-text-item	Kotak pilihan dengan medan teks	Pelbagai pilihan dengan komen
.comment-item	Medan komen di sebelah kotak pilihan	Pelbagai pilihan dengan komen
.text-list	Senarai input teks	Teks pendek berbilang, Input berangka berbilang
.text-item	Satu input teks	Teks percuma pendek, panjang dan besar, Teks pendek berbilang, Tatasusunan (Teks)
.number-list, .numeric-item	Input berangka	Input berangka berbilang, Input berangka
.number-array	Jadual input berangka	Tatasusunan (Nombor), Tatasusunan (Teks)
.text-array	Jadual input teks	Tatasusunan (Teks), Tatasusunan (Nombor)
.dropdown-array, .dropdown-list, .dropdown-item	Jadual, baris dan sel dengan juntai bawah	Tatasusunan (Nombor), Skala dwi tatasusunan dengan juntai bawah
.date-item	Input tarikh	Tarikh/Masa
.upload-item	Kawasan muat naik fail	Muat naik fail
.answertext	Teks subsoalan dalam baris tatasusunan	Tatasusunan
.col-answers	Lajur teks subsoalan	Tatasusunan
.ls-heading	Baris pengepala dengan pilihan jawapan	Tatasusunan
.ls-odd, .ls-even	Baris berselang-seli	Tatasusunan
.ls-label-xs-visibility	Label yang hanya kelihatan pada skrin kecil dan kepada pembaca skrin	Sel tatasusunan
.ls-input-group-extra	Awalan atau akhiran bagi input	Teks percuma pendek, Input berangka, Teks pendek berbilang, Input berangka berbilang
.ls-js-hidden	Disembunyikan apabila JavaScript aktif	Skala dwi tatasusunan, Senarai (Radio)
.ls-no-js-hidden	Disembunyikan apabila JavaScript tidak aktif	Kedudukan
.ls-js-hidden-sr	Disembunyikan apabila JavaScript aktif, tetapi masih dibaca oleh pembaca skrin	Kedudukan

Dalam Senarai (Radio), pilihan "Tiada jawapan" mempunyai kelas no-anwser-item (dengan ejaan ini) dan bukannya noanswer-item.

Sebagai contoh, ini ialah HTML bagi jawapan soalan Senarai (Radio):

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

Kelas pengesahan dan tip

Tip pengesahan (seperti "Pilih SATU dari jawapan yang diberi" atau "Sila masukkan nombor antara 1 dan 10") sentiasa mempunyai kelas ls-em-tip. Semasa peserta menjawab, LimeSurvey menambah ls-em-success apabila peraturan tip dipenuhi dan ls-em-error apabila tidak dipenuhi, supaya anda boleh menggayakan kedua-dua keadaan secara berbeza. Tip yang disembunyikan dengan tetapan Sembunyikan tip pada soalan mendapat kelas hide-tip.

Setiap tip juga mempunyai kelas mengikut jenisnya:

Kelas	Tip
.em_default	Tip lalai bagi jenis soalan (contohnya "Pilih SATU dari jawapan yang diberi")
.em_num_answers	Bilangan jawapan minimum atau maksimum
.em_value_range	Nilai minimum atau maksimum
.em_sum_range	Jumlah nilai minimum atau maksimum
.em_sum_equals	Nilai mesti berjumlah dengan jumlah tertentu
.em_value_integer	Hanya nombor bulat dibenarkan
.em_numbers_only	Hanya nombor dibenarkan
.em_other_numbers_only	Hanya nombor dibenarkan dalam medan "Lain-lain"
.em_other_comment_mandatory	Pilihan "Lain-lain" dipilih tetapi medan teksnya kosong
.em_regex_validation	Jawapan mesti sepadan dengan corak pengesahan
.em_q_fn_validation	Persamaan pengesahan soalan
.em_sq_fn_validation	Persamaan pengesahan subsoalan

Bahasa kanan-ke-kiri (RTL)

Untuk bahasa kanan-ke-kiri, elemen <html> mempunyai kelas dir-rtl dan tema teras memuatkan versi RTL bagi fail CSS utamanya. Gunakan .dir-rtl dalam CSS anda untuk peraturan yang hanya digunakan pada bahasa kanan-ke-kiri.

Tip & trik

Resipi ini diletakkan dalam custom.css (atau fail Twig, jika dinyatakan) bagi tema yang anda lanjutkan daripada tema teras. Dalam contoh, gantikan #c0392b dengan warna anda sendiri.

Tukar warna butang radio dan kotak pilihan

Untuk menggunakan salah satu warna yang disertakan dengan Fruity TwentyThree, pilih Theme color dalam pilihan tema. Pilihan tema juga membolehkan anda memilih Ikon semak yang berbeza.

Untuk warna lain, tambah CSS dalam custom.css. Tema teras melukis butang radio dan kotak pilihan mereka sendiri dan bukannya yang lalai pelayar, jadi menukar warna bermakna menukar elemen yang dilukis ini.

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity dan Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

Kekalkan kontras yang mencukupi antara warna dan latar belakang, supaya peserta yang mempunyai penglihatan lemah masih dapat melihat jawapan yang dipilih.

Besarkan butang radio dan kotak pilihan

Butang radio dan kotak pilihan yang lebih besar lebih mudah diketik pada telefon dan tablet. Ini berfungsi dalam semua tema teras:

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Dalam Fruity TwentyThree, tambah juga sedikit ruang antara butang radio dan teks jawapan:

.radio-item label {
    padding-left: 14px;
}

Nilai sehingga kira-kira 1.4 berfungsi tanpa perubahan lanjut. Dengan nilai yang lebih besar, kawalan mula bertindih dengan teks jawapan dan tepi baris tatasusunan pada skrin kecil, jadi anda juga perlu menambah lebih banyak ruang di sekelilingnya.

Tukar warna bar kemajuan

.progress-bar {
    background-color: #c0392b;
}

Paparkan kandungan dalam satu bahasa sahaja

Elemen <body> mempunyai kelas dengan bahasa semasa, seperti lang-en atau lang-fr. Anda boleh menggunakannya untuk memaparkan kandungan berbeza bagi setiap bahasa, contohnya baris bantuan dalam pengaki. Tambah teks bagi setiap bahasa dalam fail Twig tema anda, seperti subviews/footer/footer.twig:

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

Kemudian sembunyikan teks bahasa lain dalam custom.css:

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

Gunakan logo berbeza bagi setiap tinjauan

Anda tidak memerlukan tema berasingan untuk setiap logo. Pilihan tema boleh ditetapkan untuk satu tinjauan: buka tinjauan, klik Pilihan tema dalam menu Tetapan tinjauan dan pilih Fail logo yang berbeza. Lihat Pilihan tema.

Paparkan favicon tersuai

Favicon ialah ikon kecil yang dipaparkan pada tab pelayar dan dalam penanda halaman. Tema teras memaparkan fail files/favicon.ico bagi tema. Untuk menggunakan ikon anda sendiri, namakan ia favicon.ico dan muat naik dalam panel Lain-lain fail bagi tema lanjutan anda. Ia menggantikan ikon tema induk.

Letakkan logo di tengah dalam Fruity TwentyThree

Hidupkan Logo dalam pilihan tema, kemudian tambahkan yang berikut ke custom.css:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Tambah logo anda sendiri ke senarai tinjauan awam

Senarai tinjauan awam memaparkan logo LimeSurvey secara lalai. Untuk memaparkan logo anda sendiri:

1. Extend Fruity TwentyThree dan buka tema anda dalam penyunting tema.
2. Muat naik logo anda dalam panel Lain-lain fail.
3. Pilih skrin Senarai tinjauan dan buka layout_survey_list.twig.
4. Cari <div> yang mengandungi {{ include('./ls_logo_svg.twig') }}. Gantikan keseluruhan <div> ini, termasuk baris include, dengan kod yang ditunjukkan di bawah langkah-langkah ini.
5. Klik Salin ke tema setempat dan simpan perubahan.
6. Pergi ke Konfigurasi > Tetapan global > Secara Am dan pilih tema anda sebagai Theme for public survey list and error pages.

Gunakan nama fail yang anda muat naik, dan nama organisasi anda sebagai teks alternatif:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

Tambah garis pemisah pada tatasusunan skala dwi

Untuk melukis garis menegak di antara dua skala bagi soalan Skala dwi tatasusunan:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

JavaScript dalam soalan

Untuk menjalankan JavaScript pada semua halaman tinjauan anda, letakkannya dalam custom.js tema anda (lihat di atas).

Anda juga boleh menambah skrip pada teks satu soalan atau kumpulan. LimeSurvey membuang skrip daripada teks ini kecuali penapis XSS dimatikan untuk pengguna anda. Penapis ini tidak pernah dikenakan kepada superpentadbir. Bagi pengguna lain, Tapis HTML untuk XSS mesti dimatikan dalam Konfigurasi > Tetapan global > Keselamatan. Lakukan ini hanya jika anda mempercayai semua orang yang boleh mengedit tinjauan. Untuk butiran dan contoh, lihat Workarounds: Manipulating a survey at runtime using Javascript.