Editor ng tema

Panimula

Kinokontrol ng tema ng survey kung paano lumalabas ang iyong survey sa mga kalahok: ang layout ng pahina, mga kulay, font, logo, at ang istilo ng bawat tanong. Ang mga tema ay binubuo gamit ang mga template ng Twig, CSS at JavaScript, at gumagamit ng Bootstrap 5 bilang CSS framework.'

Maraming karaniwang pagbabago ang hindi na nangangailangan ng code. Ang logo, mga kulay, font, at ilang setting ng display ay mababago gamit ang mga opsyon sa tema. Gamitin ang editor ng tema na inilalarawan sa pahinang ito kapag gusto mong lumampas pa roon: magdagdag ng sarili mong CSS o JavaScript, baguhin ang HTML ng isang pahina, o mag-upload ng mga larawan at iba pang file para sa iyong tema.

Kasama sa LimeSurvey ang mga pangunahing tema ng survey na ito:

• Fruity TwentyThree (fruity_twentythree): Ang default na tema.
• Bootstrap Vanilla (vanilla): Isang payak na batayang tema para sa mga developer na gustong bumuo ng sarili nilang temang nakabatay sa Bootstrap.
• Fruity (fruity) at Bootswatch (bootswatch): Parehong nag-e-extend ng Bootstrap Vanilla.

Ang hitsura ng mga indibidwal na uri ng tanong ay kinokontrol ng mga tema ng tanong, hindi ng tema ng survey. Para baguhin ang HTML ng isang uri ng tanong, gumawa ng tema ng tanong.

Bago ka magsimula

Para magamit ang editor ng tema, kailangan mo ng global na pahintulot na Mga Tema (tingnan ang mga global na pahintulot) o dapat kang superadministrator. Ang pag-extend ng tema ay nangangailangan ng karapatang Gumawa, ang pag-save ng mga pagbabago ay nangangailangan ng I-update, at ang pagtanggal ng tema o pag-reset ng file ay nangangailangan ng Tanggalin.

  Ang temang may mga error ay maaaring maging dahilan para hindi magamit ang bawat survey na gumagamit nito. Subukan ang iyong mga pagbabago gamit ang preview ng survey bago mo gamitin ang tema sa isang live na survey.

Hindi maaaring i-edit ang mga pangunahing tema: i-extend ang mga ito

Ang mga pangunahing tema ay ina-update kasabay ng LimeSurvey, kaya hindi mo ito direktang mababago. Para i-customize ang isa, i-extend ito. Ang pag-extend ay gumagawa ng bagong tema ng user na namamana ang lahat mula sa parent na tema nito. Ang iyong tema ay naglalaman lamang ng mga file na binago mo; ang lahat ng iba pa ay kinukuha mula sa parent na tema. Sa ganitong paraan, makukuha pa rin ng iyong tema ang mga bug fix at pagpapabuti kapag in-update ng LimeSurvey ang parent na tema.

Para mag-extend ng tema, maaari mong:

• Pumunta sa Configuration > Mga Tema, buksan ang menu ng mga aksyon (⋯) sa dulo ng row ng tema at i-click ang I-extend, o
• Buksan ang tema sa editor ng tema at i-click ang I-extend sa toolbar.

Maglagay ng pangalan para sa bagong tema. Pagkatapos ay bubuksan ng editor ng tema ang iyong bagong tema.

Saan iniimbak ang mga tema

• Mga pangunahing tema: themes/survey/ sa iyong LimeSurvey installation.
• Mga tema ng user (mga na-extend, na-upload o na-import na tema): upload/themes/survey/.

Maaari mo ring i-edit nang direkta ang mga file ng tema ng user sa server gamit ang sarili mong editor. Tiyaking mababasa at masusulatan pa rin ng web server ang mga file pagkatapos, para magamit mo pa rin ang editor ng tema.

Ang editor ng tema

Para buksan ang editor ng tema, pumunta sa Configuration > Mga Tema, buksan ang menu ng mga aksyon (⋯) sa dulo ng row ng tema at i-click ang Editor ng tema.

Kung magbubukas ka ng pangunahing tema, magpapakita ng paalala na ito ay isang karaniwang tema at may link para i-extend ito. Maaari mong tingnan ang mga file nito at ang preview, ngunit hindi ka makakapag-save ng mga pagbabago.

Toolbar

• Mag-export: Dina-download ang tema bilang ZIP file.
• I-extend: Gumagawa ng bagong tema na namamana mula sa isang ito (tingnan ang sa itaas).
• Palitan ang pangalan: Pinapalitan ang pangalan ng tema. Available lamang para sa mga tema ng user.
• Tanggalin: Tinatanggal ang tema. Hindi mo maaaring tanggalin ang temang nakatakda bilang default na tema.
• Tema: Inililipat ang editor ng tema sa ibang tema.
• Screen: Pinipili kung aling pahina ng survey ang ipapakita sa preview at kung aling mga file ang ililista para i-edit. Ang mga screen ay: Tanong, Listahan ng survey, Welcome, Tapos, Assessments, Error, I-clear lahat, Load, I-save, Registration, I-print ang mga sagot, Pampublikong istatistika, PDF, Lumampas sa mga quota, Navigation at Kalahok.

Pag-edit ng mga file

Inililista ng mga panel sa kanan ang mga file na ginagamit ng napiling screen:

• Mga screen part file: Ang mga Twig template na bumubuo sa pahina.
• Mga JavaScript file
• Mga CSS file
• Iba pang file: Mga larawan, font, at anumang iba pang file ng tema.

I-click ang pangalan ng file para buksan ito sa editor. Ang mga file na may markang Inherited ay galing sa parent na tema. Maaari mo pa ring i-edit ang isang inherited na file: ang button sa ibaba ng editor ay magiging Kopyahin sa lokal na tema at i-save ang mga pagbabago, at kokopyahin ng pag-save ang file sa iyong tema kasama ang iyong mga pagbabago. Mula noon, ang iyong kopya na ang gagamitin sa halip na ang file ng parent.

Ang mga file na pag-aari ng iyong tema ay may button na I-reset. Tinatanggal ng pag-reset ang iyong kopya, kaya ang file mula sa parent na tema ang muling gagamitin.

Pag-upload ng mga file

Gamitin ang upload field sa ibaba ng panel na Iba pang file para magdagdag ng mga larawan, font, o iba pang file sa iyong tema. Ang mga na-upload na file ay iniimbak sa folder na files/ ng tema. Bilang default, maaari kang mag-upload ng mga larawan (gif, ico, jpg, jpeg, png) at ng mga uri ng file na ito: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq at lsg. Mababago ng iyong administrator ang mga listahang ito gamit ang mga setting na allowedthemeimageformats at allowedthemeuploads sa config.php.

Para magpakita ng na-upload na larawan sa isang Twig file, gamitin ang function na image():

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

Sa mga CSS file, tukuyin ang mga na-upload na file gamit ang path na relatibo sa folder na css, halimbawa url('../files/background.jpg').

Preview

Sa ibaba ng editor, ipinapakita ng isang preview ang napiling screen na may sample na nilalaman. Gamitin ang mga button na Mobile, 640x480, 800x600, 1024x768 at Ganap para suriin ang page sa iba't ibang laki ng screen.

Gumagamit ang preview ng sample na data at maaaring hindi nito maipakita nang eksakto ang bawat istilo gaya ng sa totoong survey. Palaging suriin din ang iyong mga pagbabago sa preview ng totoong survey.

Pag-import at pag-export ng mga tema

• Para ilipat ang isang tema sa ibang pag-install ng LimeSurvey, i-click ang Mag-export sa toolbar ng editor ng tema. Ida-download nito ang tema bilang ZIP file.
• Para mag-install ng tema mula sa ZIP file, pumunta sa Configuration > Mga Tema at i-click ang Mag-upload at mag-install.

Paano binubuo ang isang tema

Folder ng tema

Naglalaman ang folder ng tema ng:

• config.xml: Ang manifest ng tema: pangalan, parent na tema, mga CSS at JavaScript file, mga opsyon sa tema at ang mga screen na ipinapakita sa editor ng tema.
• views/: Ang mga Twig template. Ang layout_global.twig ang pangunahing layout para sa karamihan ng mga page ng survey. Ginagamit ang iba pang layout para sa mga espesyal na page, halimbawa ang layout_survey_list.twig para sa pampublikong listahan ng survey at ang layout_errors.twig para sa mga error page. Ang folder na views/subviews/ ay naglalaman ng mas maliliit na template na isinasama ng mga layout.
• css/ at scripts/: Ang mga CSS at JavaScript file ng tema.
• files/: Mga larawan at iba pang file na ginagamit ng tema.
• options/: Ang page para sa mga opsyon sa tema.

Mga Twig template

Natatanggap ng mga template ang data ng survey sa variable na aSurveyInfo. Para makita ang lahat ng laman nito, i-on ang debug mode sa application/config/config.php at idagdag ang linyang ito sa dulo ng body element sa layout_global.twig:

{{ dump(aSurveyInfo) }}

Para sa mga function na magagamit mo sa mga template, tingnan ang Mga available na Twig function. Para sa seguridad, tumatakbo ang mga template sa isang sandbox, kaya ang mga function na ito lang ang magagamit.

config.xml

Inililista ng seksyong <files> ang mga CSS at JavaScript file na nilo-load sa mga page ng survey:

• Nagdaragdag ng file ang <add>. Kung may file na ang parent na tema na may parehong pangalan, papalitan ito ng iyong file.
• Pinipigilan ng <remove> ang pag-load ng isang file ng parent na tema.

Hindi mo na kailangang ilista muli ang mga file mula sa parent na tema: nilo-load pa rin ang mga ito.

Binabasa ng LimeSurvey ang config.xml kapag na-install ang isang tema at iniimbak ang mga setting sa database. Pagkatapos mong baguhin ang config.xml ng isang naka-install na tema, pumunta sa Configuration > Mga Tema, buksan ang menu ng mga aksyon (⋯) ng tema at i-click ang I-reset para i-reload ang file.

Pagdaragdag ng sarili mong CSS at JavaScript

May dalawang file ang bawat pangunahing tema na nakalaan para sa sarili mong code:

• css/custom.css: Nilo-load pagkatapos ng lahat ng iba pang CSS file, kaya ino-override ng mga rule nito ang mga istilo ng tema.
• scripts/custom.js: Nilo-load pagkatapos ng sariling JavaScript ng tema.

Kapag nag-extend ka ng tema, ito ang mga file na dapat baguhin. Idagdag ang iyong CSS sa custom.css sa halip na i-edit ang mga pangunahing CSS file ng tema, para patuloy na makatanggap ang iyong tema ng mga update ng parent na tema.

Para magdagdag ng mas maraming file, i-upload ang mga ito at ilista sa seksyong <files> ng config.xml ng iyong tema. Gumamit ng pangalan ng file na wala sa parent na tema, kung hindi ay papalitan ng iyong file ang file ng parent:

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

Bilang default, nilo-load gamit ang Ajax ang mga page ng survey, kaya hindi nagsasagawa ang browser ng buong pag-load ng page kapag lumipat ang kalahok sa susunod na page. Patakbuhin ang iyong JavaScript sa unang pag-load ng page at sa bawat pag-load ng page gamit ang Ajax:

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

Pag-istilo ng mga tanong gamit ang CSS

Ang lahat ng halimbawa sa seksyong ito ay ilalagay sa custom.css file ng iyong tema.

Mga page class

Ang mga elementong <html> at <body> ay may mga class na magagamit mo para i-istilo ang buong page:

• html: Ang code ng wika (halimbawa en) at ang direksyon ng text (dir-ltr o dir-rtl).
• body: Ang pangalan ng tema at ng bawat parent na tema (halimbawa fruity_twentythree), ang font (halimbawa font-ibm-sans), ang wika (halimbawa lang-en), at brand-logo kapag ipinapakita ang logo.

Mga class ng container ng tanong

Ang bawat tanong ay nakabalot sa isang elementong may class na question-container. May dala rin itong:

• Ang class ng uri ng tanong (tingnan ang talahanayan sa ibaba).
• mandatory: Mandatoryo o soft mandatory ang tanong.
• input-error: Hindi pumasa ang sagot sa pag-validate, o hindi nasagot ang isang mandatoryong tanong.
• missing: May mga bahagi pa ring hindi nasasagot ang tanong at nalampasan na ito ng kalahok.
• ls-hidden at ls-irrelevant: Nakatago ang tanong dahil sa kondisyon nito.
• ls-hidden-attribute: Nakatago ang tanong dahil sa setting nitong "Palaging itago ang tanong na ito".
• Anumang class na inilagay sa setting na (Mga) CSS class ng tanong (sa ilalim ng Isaad). Gamitin ito para i-istilo ang mga indibidwal na tanong.

Halimbawa, isang mandatoryong tanong na Listahan (Radio) na hindi nasagot:

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

Mga class ng uri ng tanong

Uri ng tanong	Class	Code ng uri
Opsyong may 5 point	.choice-5-pt-radio	5
Array	.array-flexible-row	F
Array (opsyong may 5 point)	.array-5-pt	A
Array (opsyong may 10 point)	.array-10-pt	B
Array (Dagdagan/Walang pinagbago/Bawasan)	.array-increase-same-decrease	E
Array (Numero)	.array-multi-flexi	:
Array (Text)	.array-multi-flexi-text	;
Array (Oo/Hindi sigurado/Hindi)	.array-yes-uncertain-no	C
Array ayon sa column	.array-flexible-column	H
Dual scale ng array	.array-flexible-dual-scale	1
Petsa/Oras	.date	D
Equation	.equation	*
Pag-upload ng file	.upload-files	|
Kasarian	.gender	G
Malaking free text	.text-huge	U
Paglipat ng wika	.language	I
Listahan (Drop-down)	.list-dropdown	!
Listahan (Radio)	.list-radio	L
Listahang may komento	.list-with-comment	O
Mahabang free text	.text-long	T
Multiple choice	.multiple-opt	M
Multiple choice na may komento	.multiple-opt-comments	P
Maraming numerical input	.numeric-multi	K
Maraming maikling text	.multiple-short-txt	Q
Numerical input	.numeric	N
Ranking	.ranking	R
Maikling free text	.text-short	S
Display ng text	.boilerplate	X
Oo/Hindi	.yes-no	Y

Mga class para sa mga bahagi ng isang tanong

Sa loob ng container ng tanong, ginagamit ng bahagi ng mga sagot ang mga class na ito. May ilang nakadepende sa mga setting ng display ng tanong: halimbawa, gumagamit ang Array (Numero) ng iba't ibang class kapag nagpapakita ito ng mga checkbox sa halip na mga drop-down.

Class	Gamit	Ginagamit ng (mga halimbawa)
.ls-answers	Ang element na naglalaman ng lahat ng opsyon sa sagot	Lahat ng uri ng tanong
.answers-list	Isang listahan o row ng mga opsyon sa sagot	Listahan (Radio), Multiple choice, Ranking, mga row ng karamihan ng array
.subquestion-list, .questions-list	Isang listahan o talahanayan ng mga subquestion	Array, Maraming maikling text, Maraming numerical input
.answer-item	Isang opsyon sa sagot o input	Halos lahat ng uri ng tanong
.noanswer-item	Ang opsyong "Walang sagot"	Array, Opsyong may 5 point, Listahang may komento
.question-item	Isang subquestion na sagot din	Multiple choice, Maraming maikling text, Maraming numerical input
.radio-list	Isang listahan o row ng mga radio button	Listahan (Radio), Opsyong may 5 point, Listahang may komento, mga row ng radio array
.radio-array	Isang talahanayan ng mga radio button	Array, Array (opsyong may 5 point), Array (opsyong may 10 point), Array (Dagdagan/Walang pinagbago/Bawasan), Array (Yes/Uncertain/No)
.radio-item	Isang radio button kasama ang label nito	Listahan (Radio), Opsyong may 5 point, Listahang may komento, mga radio array
.checkbox-list	Isang listahan ng mga checkbox	Multiple choice, Multiple choice na may komento
.checkbox-array	Isang talahanayan ng mga checkbox	Array (Numero) na may layout na checkbox
.checkbox-item	Isang checkbox kasama ang label nito	Multiple choice, Multiple choice na may komento, Array (Numero) na may layout na checkbox
.checkbox-text-item	Isang checkbox na may text field	Multiple choice na may komento
.comment-item	Ang field ng komento sa tabi ng checkbox	Multiple choice na may komento
.text-list	Isang listahan ng mga text input	Maraming maikling text, Maraming numerical input
.text-item	Isang text input	Maikli, mahaba at malaking free text, Maraming maikling text, Array (Text)
.number-list, .numeric-item	Mga numeric input	Maraming numerical input, Numerical input
.number-array	Isang talahanayan ng mga numeric input	Array (Numero), Array (Text)
.text-array	Isang talahanayan ng mga text input	Array (Text), Array (Numero)
.dropdown-array, .dropdown-list, .dropdown-item	Mga talahanayan, row at cell na may mga drop-down	Array (Numero), Dual scale ng array na may mga drop-down
.date-item	Ang input ng petsa	Petsa/oras
.upload-item	Ang lugar ng pag-upload ng file	Pag-upload ng file
.answertext	Ang text ng subquestion sa isang row ng array	Array
.col-answers	Ang column ng mga text ng subquestion	Array
.ls-heading	Ang header row na may mga opsyon sa sagot	Array
.ls-odd, .ls-even	Salitang mga row	Array
.ls-label-xs-visibility	Isang label na makikita lamang sa maliliit na screen at ng mga screen reader	Mga cell ng array
.ls-input-group-extra	Ang prefix o suffix ng isang input	Maikling free text, Numerical input, Maraming maikling text, Maraming numerical input
.ls-js-hidden	Nakatago kapag aktibo ang JavaScript	Dual scale ng array, Listahan (Radio)
.ls-no-js-hidden	Nakatago kapag hindi aktibo ang JavaScript	Ranking
.ls-js-hidden-sr	Nakatago kapag aktibo ang JavaScript, ngunit binabasa pa rin ng mga screen reader	Ranking

Sa Listahan (Radio), ang opsyong "Walang sagot" ay may class na no-anwser-item (ganito ang baybay) sa halip na noanswer-item.

Halimbawa, ito ang HTML ng mga sagot ng isang tanong na Listahan (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>

Mga class para sa pag-validate at tip

Ang mga tip sa pag-validate (gaya ng "Pumili lamang ng isa sa sumusunod na mga sagot" o "Maglagay ng numero mula 1 hanggang 10") ay laging may class na ls-em-tip. Habang sumasagot ang kalahok, nagdaragdag ang LimeSurvey ng ls-em-success kapag natugunan ang patakaran ng tip at ls-em-error kapag hindi, kaya maaari mong i-style nang magkaiba ang dalawang estado. Ang mga tip na itinago gamit ang setting na Itago ang tip ng tanong ay may class na hide-tip.

Ang bawat tip ay may class din para sa uri nito:

Class	Tip
.em_default	Ang default na tip ng uri ng tanong (halimbawa "Pumili lamang ng isa sa sumusunod na mga sagot")
.em_num_answers	Minimum o maximum na bilang ng mga sagot
.em_value_range	Minimum o maximum na halaga
.em_sum_range	Minimum o maximum na kabuuan ng mga halaga
.em_sum_equals	Ang mga halaga ay dapat umabot sa isang takdang kabuuan
.em_value_integer	Buong numero lamang ang pinapayagan
.em_numbers_only	Numero lamang ang pinapayagan
.em_other_numbers_only	Numero lamang ang pinapayagan sa field na "Iba pa"
.em_other_comment_mandatory	Napili ang opsyong "Iba pa" ngunit walang laman ang text field nito
.em_regex_validation	Dapat tumugma ang sagot sa pattern ng pag-validate
.em_q_fn_validation	Equation sa pag-validate ng tanong
.em_sq_fn_validation	Equation sa pag-validate ng subquestion

Mga wikang right-to-left (RTL)

Para sa mga wikang right-to-left, ang element na <html> ay may class na dir-rtl at nilo-load ng mga pangunahing tema ang RTL na bersyon ng kanilang pangunahing CSS file. Gamitin ang .dir-rtl sa iyong CSS para sa mga patakarang para lamang sa mga wikang right-to-left.

Mga tip at trick

Ang mga recipe na ito ay inilalagay sa custom.css (o sa isang Twig file, kung nabanggit) ng temang ginawa mong extension mula sa isang pangunahing tema. Sa mga halimbawa, palitan ang #c0392b ng sarili mong kulay.

Baguhin ang kulay ng mga radio button at checkbox

Para gumamit ng isa sa mga kulay na kasama ng Fruity TwentyThree, pumili ng Theme color sa mga opsyon sa tema. Sa mga opsyon sa tema, maaari ka ring pumili ng ibang Icon na tsek.

Para sa anumang ibang kulay, magdagdag ng CSS sa custom.css. Ang mga pangunahing tema ay gumuguhit ng sarili nilang mga radio button at checkbox sa halip na gamitin ang default ng browser, kaya ang pagpapalit ng kulay ay nangangahulugang pagbabago sa mga iginuhit na element na ito.

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 at 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;
}

Panatilihin ang sapat na contrast sa pagitan ng kulay at ng background, upang makita pa rin ng mga kalahok na mahina ang paningin kung aling mga sagot ang napili.

Palakihin ang mga radio button at checkbox

Mas madaling i-tap sa mga telepono at tablet ang mas malalaking radio button at checkbox. Gumagana ito sa lahat ng pangunahing tema:

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

Sa Fruity TwentyThree, magdagdag din ng kaunting espasyo sa pagitan ng mga radio button at ng text ng sagot:

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

Gumagana nang walang karagdagang pagbabago ang mga halagang hanggang humigit-kumulang 1.4. Sa mas malalaking halaga, magsisimulang mag-overlap ang mga control sa text ng sagot at sa mga gilid ng mga row ng array sa maliliit na screen, kaya kailangan mo ring magdagdag ng mas maraming espasyo sa paligid ng mga ito.

Baguhin ang kulay ng progress bar

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

Ipakita ang nilalaman sa isang wika lamang

Ang element na <body> ay may class na naglalaman ng kasalukuyang wika, gaya ng lang-en o lang-fr. Magagamit mo ito para magpakita ng iba't ibang nilalaman sa bawat wika, halimbawa isang linya ng tulong sa footer. Idagdag ang text para sa bawat wika sa isang Twig file ng iyong tema, gaya ng 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>

Pagkatapos, itago ang text ng ibang mga wika sa custom.css:

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

Gumamit ng ibang logo sa bawat survey

Hindi mo kailangan ng hiwalay na tema para sa bawat logo. Maaaring itakda ang mga opsyon sa tema para sa isang survey lamang: buksan ang survey, i-click ang Mga opsyon sa tema sa menu na Mga setting ng survey at pumili ng ibang File ng logo. Tingnan ang Theme options/tl.

Magpakita ng custom na favicon

Ang favicon ay ang maliit na icon na makikita sa tab ng browser at sa mga bookmark. Ipinapakita ng mga pangunahing tema ang file na files/favicon.ico ng tema. Para gamitin ang sarili mong icon, pangalanan itong favicon.ico at i-upload ito sa panel na Iba pang file ng iyong na-extend na tema. Papalitan nito ang icon ng parent na tema.

I-center ang logo sa Fruity TwentyThree

I-on ang Logo sa mga opsyon sa tema, pagkatapos ay idagdag ito sa custom.css:

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

Idagdag ang sarili mong logo sa pampublikong listahan ng survey

Ipinapakita ng pampublikong listahan ng survey ang logo ng LimeSurvey bilang default. Para ipakita ang sarili mong logo:

1. I-extend ang Fruity TwentyThree at buksan ang iyong tema sa editor ng tema.
2. I-upload ang iyong logo sa panel na Iba pang file.
3. Piliin ang screen na Listahan ng survey at buksan ang layout_survey_list.twig.
4. Hanapin ang <div> na naglalaman ng {{ include('./ls_logo_svg.twig') }}. Palitan ang buong <div> na ito, kasama ang linya ng include, ng code na ipinapakita sa ibaba ng mga hakbang na ito.
5. I-click ang Kopyahin sa lokal na tema at i-save ang mga pagbabago.
6. Pumunta sa Configuration > Mga pangkalahatang setting > Pangkalahatan at piliin ang iyong tema bilang Theme for public survey list and error pages.

Gamitin ang pangalan ng na-upload mong file, at ang pangalan ng iyong organisasyon bilang alternatibong teksto:

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

Magdagdag ng linyang panghiwalay sa mga dual scale na array

Para gumuhit ng patayong linya sa pagitan ng dalawang scale ng tanong na Dual scale ng array:

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

JavaScript sa mga tanong

Para magpatakbo ng JavaScript sa lahat ng pahina ng iyong mga survey, ilagay ito sa custom.js ng iyong tema (tingnan ang itaas).

Maaari ka ring magdagdag ng script sa teksto ng isang tanong o grupo. Inaalis ng LimeSurvey ang mga script mula sa mga tekstong ito maliban kung naka-off ang XSS filter para sa iyong user. Hindi kailanman nalalapat ang filter sa mga superadministrator. Para sa ibang user, dapat naka-off ang I-filter ang HTML para sa XSS sa Configuration > Mga pangkalahatang setting > Seguridad. Gawin lamang ito kung pinagkakatiwalaan mo ang lahat ng maaaring mag-edit ng mga survey. Para sa detalye at mga halimbawa, tingnan ang Workarounds: Manipulating a survey at runtime using Javascript.