Urejevalnik predlog
From LimeSurvey Manual
Predstavitev
LimeSurvey ima osnovni sistem za predloge in stile, ki omogoča tematsko prilagoditev aplikacije za uporabo v številnih brskalnikih. Tukaj jih enostavno imenujemo Predloge. Predloge omogočajo upravljanje z izgledom in občutkom pri anketiranju. Skrbnik lahko izbere predlogo, jo uporabi za vsako anketo in tako prilagodi izgled ter občutek anket svojim potrebam. Spremembe na predlogah so lahko tako enostavne, kot je dodajanje posebnega logotipa na pozdravno stran, menjava barv odzadja ali morda nova barva besedila za določene tipe vprašanj.
Z LimeSurvey-em dobite komplet predlog.Te prvotne predloge se nahajajo v imenikih znotraj LimeSurvey-eve namestitve v mapi "templates". Vsaka predloga ima svojo lastno mapo. Znotraj glavne mape vsake predloge se nahaja kopica datotek: predloge (.pstpl), oblikovni stili (.css), slike (.jpg ali .png) in morda še druge.
Kot pri ostalih sistemih, ki temeljijo na temah, so deli HTML kode shranjeni v datotekah predlog (.pstpl). Ta koda je prebrana in uporabljena za izgradnjo strani za prikaz anketirancem med anketiranjem. Pogosto se uporabljajo ključne besede, obdane z zavitimi oklepaji, ki so vključene v datoteke in se nato zamenjajo s pravim besedilom. Poglejmo si primer takšne vsebine datoteke predloge in njen rezultat pri prikazu na strani za anketiranje:
<center><font face='verdana' color='red'>{SURVEYNAME}</font><br />
<font face='verdana' color='blue'><u>{SURVEYDESCRIPTION}</u></center>
Anketiranec vidi stran podobno tej:
Predloge, sestavljene iz HTML kode, skrbijo za opredelitev položaja in vrsto prikazanega besedila ter podobne strukturne značilnosti strani. Pogosto vključujejo ali se sklicujejo na druge datoteke. Večina sklicevanj je na datoteke za oblikovne stile (CSS-je), ki opredeljujejo slog pisave, barvo, velikost, ozadje in podobne parametre, skupne vsem stranem ankete. HTML parametri za sklicevanja na CSS oblikovne stile so povezani z različnimi vrstami predmetov v HTML kodi. To omogoča oblikovnim stilom enkraten opis, kako naj prikaže vsakega od mnogih vrst pisav za besedilo ali druge predmete, ki se lahko prikažejo na več mestih. Obstajajo edinstveni razredi za vsak LimeSurvey-ev tip vprašanja, ki s tem omogočajo podroben nadzor nad videzom posameznega vprašanja. Datoteke predlog se lahko prav tako sklicujejo na datoteke slik, kot so logotipi ali gradniki za vrstico s prikazom napredka. Tudi posebne ključne besede med zavitimi oklepaji se zamenjajo z besedilom, ki je opredeljen v anketi za vsak pripadajoč prevod jezika (na primer naslov ankete ali besedilo vprašanja za vsak opredeljen jezik).
Če ustvarite novo predlogo po meri, prosimo razmislite o prispevanju nazaj v LimeSurvey-evo skupnost in jo tako omogočite za uporabo drugim uporabnikom. Z vašo pomočjo lahko raste naša zbirka predlog, anket in drugih dodatkov ter tako skupaj naredimo LimeSurvey še boljši! Poglejte si obstoječo zbirko predlog
Ustvarjanje nove predloge
Da lahko ustvarite novo predlogo (ali uredite obstoječo), potrebujete na anketnem sistemu kot uporabnik pravico za urejanje predlog in prav tako pravico za delo z datotekami v osnovnem operacijskem sistemu, na katerem gosti vaš anketni sistem.
Zaželeni način za izdelavo nove predloge je s pomočjo urejevalnika predlog (glej v nadaljevanju) preko spletnega vmesnika za skrbnike. Nekateri uporabniki bi morda raje delali neposredno z datotekami predlog, da bi lahko uporabljali svoj priljubljeni urejevalnik besedila namesto spletnega vmesnika. Tudi v tem primeru je potrebno najprej uporabiti urejevalnik predlog, da z njim izdelate novo predlogo. Tako se bodo ustvarile nove osnove za predlogo z vsemi potrebnimi datotekami v mapi LimeSurvey-ev_spletni_koren/upload/templates/vaša_nova_predloga. Od tu naprej lahko uporabljate vaš priljubljeni urejevalnik besedila za ročno prilagajanje datotek predloge.
Morda datoteke predlog zgledajo na prvi pogled zapletene. Dobro je razumeti HTML označevalni jezik, po možnosti še CSS oblikovanje in imeti dostop do osnovnih namestitvenih datotek anketnega sistema, če datoteke in mape predlog ni mogoče urejati. Da si lažje razjasnite koncept predlog, se malce poigrajte z njeno vsebino. Pred tem ne pozabite ustvariti kopijo obstoječe predloge v novo mapo.
Številne LimeSurvey-eve 'javne' elemente je možno nastaviti z vrsto predlog. V tem razdelku je prikazana zelo kratka razlaga takšnih predlog.
LimeSurvey-ev urejevalnik predlog
Za lažje razumevanje in hitro posodobitev predlog LimeSurvey omogoča uporabo urejevalnika predlog, dosegljivega v glavni skrbniški orodni vrstici anketnega sistema. Ta urejevalnik predlog je na voljo le uporabnikom z dano pravico v varnostnih nastavitvah uporabnikov. Predloge vplivajo na vse ankete in lahko povzročijo, da je anketa neuporabna, če niso pravilno urejene. Zato je smiselno omejiti urejanje predlog zgolj na del uporabnikov, ki to delo res obvladajo. Imeti pravico za vstop v urejevalnik besedil ni dovolj.
LimeSurvey-ev urejevalnik besedil vam dovoljuje urejanje vsebine predlog neposredno na spletu. V urejevalnik predlog vstopite s klikom na ikono "Urejevalnik predlog" v LimeSurvey-evi skrbniški orodni vrstici. Glavno okno je podobno LimeSurvey-evemu oknu za delo z anketami. Omogoča vam izbiro predloge za urejanje ali ogled. Ko ste izbrali predlogo, lahko izbirate med številnimi zasloni ankete, ki se prikazujejo anketirancem. Predstavi se vam seznam datotek izbrane predloge, ki sestavljajo ta izbran zaslon.
Meni za delo s predlogami
- Ikona za urejanje: ikona za "urejanje" nakazuje ali je predlogo možno urejati ali ne. Nejasna ikona nakazuje, da je predloga le za branje, med tem ko izpostavljena/obarvana ikona pomeni, da je možno predlogo spreminjati. Za spreminjanje ikone iz zamegljene v obarvano je potrebno spremeniti dovoljenja predloge.
- Uvozi predlogo: omogoča uvažanje predlog.
- Izvozi predlogo: omogoča izboz trenutne predloge v datoteko oblike .zip.
- Kopiraj to predlogo:omogoča ustvarjanje nove predloge, ki je kopija trenutno izbrane.
- Preimenuj to predlogo: omogoča spreminjanje imena izbrane predloge. Običajno se uporablja po kopiranju obstoječe predloge ali po uvažanju predloge za spreminjanje map v ozadju predlog.
Spustni seznam "Zaslon" na desni strani vam omogoča izbiro določenega dela ankete, ki ga želite videti.
Uvažanje/izvažanje/kopiranje predloge
Kadar predlogo izvozite, s tem ustvarite arhiv v obliki zip datoteke, v kateri se nahajajo vse datoteke, ki sestavljajo predlogo (.pstpl datoteke, slike, css datoteke, ...). Izvoženo zip datoteko lahko enostavno uvozite v drug LimeSurvey-ev anketni sistem z uporabo njene funkcionalnosti za uvažanje ali s pomočjo ročnega kopiranja arhivske datoteke v namestitvene mape drugega anketnega sistema ter razpakiranjem v njeno ustrezno mapo za predloge. Če kopirate predlogo na isti anketni sistem, boste morali preimenovati mapo z drugim imenom kopije te predloge.
V kolikor vaše pravice za dostop do LimeSurvey-evih datotek in map vključujejo pravico branja in pisanja, potem lahko za ustvarjanje lokalne kopije predloge uporabite programa copy in rename.
Zgradba strani / uporaba v predlogah
- Pozdravna stran: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
- Strani z vprašanji: startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl
- Stran za oddajo ankete: startpage.pstpl, survey.pstpl, submit.pstpl, (privacy.pstpl), navigator.pstpl, endpage.pstpl
- Zaključna stran: startpage.pstpl, assesment.pstpl, completed.pstpl, endpage.pstpl
Datoteke predlog
Sledi seznam datotek za predloge, ki se uporabljajo za izgradnjo javne ankete in ki morajo obstajati v vsaki novo ustvarjeni mapi za predloge:
- startpage.pstpl: oblikuje začetek vsake html strani. Prične se pri oznaki "<head>" in ne sme vsebovati oznake "<html>". Ta 'sam začetek' standardne html strani je napisan s pomočjo ukaznih datotek (skript). Prosimo poskrbite, da vaše datoteke startpage.pstpl vsebujejo oznako <body>, kljub temu da z upoštevanjem W3 HTML standarov tega številni brskalniki ne zahtevajo striktno. Za zagon določenih javascript elementov morajo to oznako <body> najti LimeSurvey-eve ukazne datoteke. Ne pričakuje se, da se bodo v datoteki startpage.pstpl uporabljale številne 'ključne besede', najbrž pa si boste želeli v naslov vstaviti {SURVEYNAME}. Datoteka startpage.pstpl lahko vsebuje oznake, ki se zaključijo v ustrezni datoteki endpage.pstpl. Tako lahko začnete tabelo v tej datoteki in jo zaključite v datoteki endpage.pstpl. Datoteki startpage.pstpl in endpage.pstpl objameta vse možne datoteke, ki jih uporablja LimeSurvey.
- survey.pstpl: ta datoteka je druga najpogosteje uporabljena na večini anketnih straneh in zagotavlja prostor za umestitev imena in opisa ankete. Ta datoteka nima ustrezne 'zaključne' datoteke in je tako posledično potrebno zapreti vse odprte oznake v tej datoteki (oziroma ne puščajte odprtih tabel v tej datoteki, ker jih ni mogoče nikjer drugje zaključiti)
- welcome.pstpl: ta datoteka se uporablja le na pozdravni strani (kar je tudi glavna stran za ankete v obliki 'Vse skupaj'). To datoteko lahko uporabite, če želite natisniti pozdravno besedilo in ostale informacije, ki se naj bi nahajale v uvodni predstavitvi. Podobno kot pri datoteki 'survey.pstpl' za to datoteko ne obstaja ustrezna 'zaključna' datoteka, zato je potrebno prav tako zapreti vse odprte oznake v tej datoteki.
- startgroup.pstpl: ta datoteka nudi 'povzetek' za vprašanja znotraj skupine. Ima ustrezno zaključno datoteko 'endgroup.pstpl', ki jo lahko uporabimo za zapiranje odprtih oznak v tej datoteki, zato lahko odpremo tabelo znotraj te datoteke.
- groupdescription.pstpl: ta datoteka predloge se uporablja za prikaz opisa skupine. Je ločena od datoteke startgroup.pstpl, ker je v anketi oblike "Po vprašanjih" prikazana na svoji strani med skupinami, medtem ko v anketi oblike "Po skupinah" ali "Vse skupaj" ta datoteka skrbi za glavo za naslednja vprašanja. Datoteka groupdescription.pstpl nima ustrezne 'zaključne' datoteke, zato morajo biti vse oznake ustrezno zaključene.
- question.pstpl: ta datoteka vsebuje vaše anketno vprašanje, njen odgovor in območje za besedilo pomoči. Pri anketah oblike "Po skupinah" in "Vse skupaj" se ta datoteka predloge ciklično ponavlja za vsako vprašanje. Zanjo ni ustrezne zaključne datoteke, zato morajo biti vse oznake ustrezno zaključene.
- question_start.pstpl: ta datoteka vsebuje posamezne elemente, ki se nahajajo na začetku vprašanja. Vključena je znotraj datoteke 'question.pstpl' preko ključne besede {QUESTION}. To naj bi omogočilo oblikovalcem predlog več nadzora nad izgledom vprašanja. Ta del predloge se nahaja zunaj običajnega sistema predlog in je bila nadomeščena (od LS1.87 naprej). Vse ključne besede iz tega dela predloge so sedaj na voljo neposredno v datoteki question.pstpl. Opozorilo: predloge, ki uporabljajo datoteko question_start.pstpl, bodo še vedno delovale vsaj za nekaj nadaljnjih različic LS 1.x
- submit.pstpl (in privacy.pstpl): ta stran je predzadnja stran za vse oblike anket (razen za obliko "Vse skupaj"), kjer je anketirancu ponujena možnost pregleda vprašanj pred oddajo njihovih odzivov. Zagotavlja podatke o zasebnosti, kadar je anketa anonimna, ki jih izlušči iz datoteke privacy.pstpl.
- completed.pstpl: ta stran se prikaže kot končna stran, ko so odzivi na anketo shranjeni in je anketa zaključena. Uporabi se lahko za prikaz "povezave za posredovanje", katera se navede v nastavitvah ankete.
- endgroup.pstpl: ta datoteka zaključi skupino in se lahko uporabi za zaključevanje morebitnih odprtih oznak v datoteki startgroup.pstpl.
- navigator.pstpl: ta datoteka vsebuje gumbe za navigacijo po anketi (povezave "naslednja", "prejšnja", "zadnja", "oddaj", "shrani" in "počisti vse"). Uporablja se na vseh straneh razen na zaključni strani.
- printanswers.pstpl: ta datoteka vsebuje HTML sveženj za tiskanje ankete.
- print_group.pstpl: ta datoteka je enaka kot startgroup.pstpl in endgroup.pstpl skupaj,vendar je namenjena za tiskanje ankete.
- print_question.pstpl: ta datoteka je enake kot question.pstpl, vendar je namenjena za tiskanje ankete.
- print_survey.pstpl: ta datoteka je enaka kot survey.pstpl, vendar je namenjena za tiskanje ankete.
CSS in Javascript
Za predlogo se vedno uporabljata dve datoteki: template.css za css in template.js za javascript.
- {TEMPLATECSS}: doda vrstice za privzeto obliko css, template.css in template-rtl.css za rtl jezik.
- {TEMPLATEJS}: doda vrstice za privzete datoteke javascript-a, template.js in vse datoteke oblike js, ki jih potrebuje LimeSurvey.
Zamenjava privzetega css-ja ali javascript-a
Nekatera vprašanja uporabljajo posebne datoteke za javascript ali css. Lahko uporabite tudi svoje datoteke. Vse uporabljene datoteke v vaši anketi vključene v ./scripts ali v .//styles-public so lahko zamenjane. Potrebno je samo dodati datoteko z enakim imenom v vašo predlogo.
Druge datoteke predloge
Datotek privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl in confirmationemail.pstpl LimeSurvey več ne uporablja. Namesto tega je vsebina privzeto nastavljena v ustreznih jezikovnih datotekah. Elektronska sporočila se lahko tako zdaj urejajo v anketi na nivoju ankete.
Standardne datoteke
Obstaja deset standardnih strani, ki jih lahko anketiranec vidi med anketiranjem ali dostopanjem do anketnega sistema. Vsaka stran je sestavljena iz več skupnih datotek predloge, ki je določena v nastavitvah ankete. Spodnja tabela nakazuje katere datoteke predlog se uporabljajo pri sestavljanju posamezne strani.
*Opomba: v različici 1.90 in višji ta nadomešča question.pstpl in question_start.pstpl. Če uporabljate starejšo predlogo po meri, boste morali na začetek datoteke question.pstpl dodati naslednje vrstice:
<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">
In potem dodajte še ustrezne zaključne oznake na konec datoteke question.pstpl:
</div>
*Opomba: LimeSurvey-eve js datoteke v različici 1.91 in prejšnjih niso vključene s predlogo. V različici 2 morate uporabiti ključno besedo {TEMPLATEJS} v eni izmed vaših datotek predloge, da s tem dodate povezavo do js datoteke. Lahko jo dodate v datoteki startpage.pstpl ali v datoteki endpage.pstpl. Odstranite lahko vrstico {TEMPLATEURL}/template.js in jo nadomestite z {TEMPLATEJS}, da s tem posodobite osebno predlogo.
Področje za kontrolo datoteke
In the "file control" window on the left, you can click on one of the template files that is used to compile the page. The HTML code for that file will then appear in the "Now editing" window in the center. If the template is editable (determined by directory permissions) you can then make any changes and save them.
The "Other Files" window shows a list of all other files in the template directory. You can use the right side to upload and select image files (your pics, logos,...) or other files needed to create your template. Note: Instead of a link directly to each picture in your template you can use the field string {TEMPLATEURL}. So instead of:
img src='/limesurvey/templates/yourtemplate/mypicture.jpg'
You can use:
img src='{TEMPLATEURL}mypicture.jpg'
A "sample" of the template page you are editing will be visible at the bottom of the screen. There is no way to to delete a template from the template editor. This must be done by accessing the underlying directory and deleting the file there.
Location of template files
LimeSurvey stores each of the 'standard' templates in their own distinct sub-directory within the /templates directory that is kept in the public directory with the other LimeSurvey public files. Customized user templates are stored in the /upload/templates directory.
To create a new template, use the according icon in the template editor.
There should ALWAYS be a "default" directory in the templates directory. This template is used by default and as a fall-back if a template folder doesn't exist, or can't be found. The "default" directory comes with the package.
You can use any image files that you upload into the template management area with syntax like this:
{TEMPLATEURL}filename.xyz
Styling questions with CSS
Styling of questions in CSS has become much easier. Each question type now has a unique class. Mandatory question's also have an additional mandatory class. For example, for a non-mandatory question:
<div id="question5" class="gender">
...
</div>
and if the question is mandatory
<div id="question5" class="gender mandatory">
...
</div>
and if the question is mandatory but the user didn't answer it or if there is validation on a question
<div id="question5" class="gender mandatory input-error">
...
</div>
and if the question has validation applied but the user hasn't answered correctly
<div id="question6" class="text-short input-error">
...
</div>
Global classes for question part
This class are used for each question type. Some question type use only one or two class, but other can use much more.
Class name | Part | Question type | Examples | Note | |
---|---|---|---|---|---|
.question | All question block | All question type | <p class="question">, <ul class="question">, <table class="question"> | ||
.subquestions-list | List of subquestion | Multi choice question, array question type | <ul class="subquestions-list">, <table class="subquestions-list"> | .questions-list is used too | |
.answers-list | List of answers | Single choice question, array question type, Multi input text question | <ul class="answers-list">, <table class="answers-list"> | ||
.answer-item | The answer part: one answer | Single choice question, array question type, Multi input text question | <li class="answer-item">, <td class="answer-item"> | ||
.noanswer-item | The answer part for no answer | Single choice question, array question type | <li class="noanswer-item">, <td class="noanswer-item"> | No answer is an answer too, then have double class noanswer-item and answer-item | |
.question-item | The question part: one question | Multi text question, array question type | <li class="question-item">, <tr class="question-item"> | Some answer are question too, then we have a lot of class="question-item answer-item" | |
.checkbox-list | A list of checkbox | Multi choice question, array number (checkbox) question type | <ul class="checkbox-list">, <tr class="checkbox-list"> | Some question type have multi list class: like checkbox with comment : class="checkbox-list text-list" | |
.checkbox-item | The answer part with a checkbox | Multi choice question, array number (checkbox) question type | <li class="checkbox-item">, <td class="checkbox-item"> | ||
.radio-list | A list of radio item | Single choice question, array question type | <ul class="radio-list">, <tr class="radio-list"> | ||
.radio-item | The answer part with a radio | Single choice question, array question type | <li class="radio-item">, | ||
.text-list | A list of text input | Multi text question type, array of text | <ul class="text-list">, <tr class="text-list"> | ||
.text-item | The answer part of a text input | Multi text question type, array of text | <li class="text-item">, | ||
.numeric-list | A list of text input with numeric only answer | Multi numeric question type, array of number | <ul class="text-list numeric-list">, <tr class="text-list numeric-list"> | ||
.numeric-item | The answer part of a numeric input | Multi numeric question type, array of number | <li class="numeric-item">, <td class="numeric-item"> | ||
.select-list | A list of select | Array numbers, Dual scale array (select) | <table class="select-list"> | ||
.select-item | The answer part of a select | Array numbers, Dual scale array (select), single choice with select | <p class="select-item">, <td class="select-item"> | ||
.hide | Used for accessibility: hidden with css but read by screenreader | Short text question | <label class="hide"> | Can be used for other purpose | |
.dontread | Used for accessibility: not be read by screenreader | Array question type | <th class="dontread"> | ||
.checkbox | input[type=checkbox] | Question with checkbox | <input type="checkbox" class="checkbox"> | With modern browser: not needed but some old browser need this | |
.radio | input[type=radio] | Question with radio | <input type="radio" class="radio"> | With modern browser: not needed but some old browser need this | |
.text | input[type=text] | Question with input text, or textarea | <textarea class="text"> | ||
.answertext | Array question type | Answer part of array question type | <th class="answertext"> | ||
.col-answers | Array question type | Column of answers | <col class="col-answers"> | ||
.odd .even | Array question type | Alternation for column | <col class="odd"> | ||
.odd .even | Array question type | Alternation for column | <col class="odd"> | ||
.array1 .array2 | Array question type | Alternation for line | <tr class="array1"> |
Some example of question part with classes
text-short question type:
<p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text empty">
</p>
Multiple short text
<ul class="subquestions-list questions-list text-list">
<li class="question-item answer-item text-item" id="javatbdSGQA">
<label for="answerSGQA">Some example subquestion</label>
<span><input type="text" value="" id="answerSGQA" name="SGQA" size="20" class="text empty"></span>
</li>
</ul>
Array question type
<table class="question subquestion-list questions-list ">
<caption class="hide read">Some explanation for accessibility.</caption>
<colgroup class="col-responses">
<col width="50%" class="col-answers">
<col width="25%" class="odd">
<col width="13.3%" class="col-no-answer even">
</colgroup>
<thead>
<tr class="array1 dontread">
<td> </td>
<th>1</th>
<th>No answer</th>
</tr>
</thead>
<tbody>
<tr class="array2 answers-list radio-list" id="javatbdSGQ">
<th width="20%" class="answertext">Some example subquestion
</th>
<td class="answer_cell_001 answer-item radio-item">
<label for="answerSGQA" class="hide read">1</label>
<input type="radio" value="1" id="answerSGQA" name="SGQA" class="radio">
</td>
<td class="answer-item radio-item noanswer-item">
<label for="answerSGQA" class="hide read">No answer</label>
<input type="radio" value="" id="answerSGQA" name="SGQA" class="radio">
</td>
</tr>
</tbody>
</table>
The full list of question classes
Question Type | Question Class | Question ID |
5 point choice | .choice-5-pt-radio | 5 |
Array (10 point choice) | .array-10-pt | B |
Array (5 point choice) | .array-5-pt | A |
Array (Flexible Labels) dual scale | .array-flexible-duel-scale | 1 |
Array (Increase, Same, Decrease) | .array-increase-same-decrease | E |
Array (Multi Flexible) (Numbers) | .array-multi-flexi | : |
Array (Multi Flexible) (Text) | .array-multi-flexi-text | ; |
Array (Yes/No/Uncertain) | .array-yes-uncertain-no | C |
Array (flexible labels) | .array-flexible-row | F |
Array (flexible labels) by column | .array-flexible-column | H |
Boilerplate question | .boilerplate | X |
Date | .date | D |
Gender | .gender | G |
Huge free text | .text-huge | U |
Language switch | .language | I |
List (dropdown) | .list-dropdown | ! |
List (radio) | .list-radio | L |
List with comment | .list-with-comment | O |
Long free text | .text-long | T |
Multiple numerical input | .numeric-multi | K |
Multiple options | .multiple-opt | M |
Multiple options with comments | .multiple-opt-comments | P |
Multiple short text | .multiple-short-txt | Q |
Numerical input | .numeric | N |
Ranking | .ranking | R |
Short free text | .text-short | S |
Yes/No | .yes-no | Y |
The full list of validation classes
These apply to the help and/or validation tip messages so that each type can be individually styled.
The .hide-tip option and .input-error options, by default, interact so that you can have validation tips start hidden, but appear when there validation errors, and disappear again when those errors are rectified.
All of these are designed to eliminate the need for pop-up alert messages. Instead, tips can appear/disappear as needed, and are color-coded to indicate whether the answers pass the validation criteria.
Furthermore, when you first visit a page that has unmet validation criteria, you can color-code the tips in a pleasing color to show which validation criteria have not been med; then re-display the page using a harsher color if the person submits the page with lingering validation errors.
Purpose | CSS Class | Description |
Mandatory | .mandatory | the question is mandatory |
User input error | .input-error | the question had at least one validation error |
Hide Tip | .hide-tip | added if you use the hide_tip option |
Num answers | .em_num_answers | for for min_answers and max_answers |
Value range | .em_value_range | for min/max_num_value_n and multiflexible_min/max |
Sum range | .em_sum_range | for min/max/equals_num_value |
Regex validation | .em_regex_validation | for regular-expression validation of the question |
Question-level validation function | .em_q_fn_validation | for the em_validation_q option |
Subquestion-level validation function | .em_sq_fn_validation | for the em_validation_sq option |
Other comment mandatory | .em_other_comment_mandatory | for other_comment_mandatory option - shows when "other" is selected but associated comment is missing. |
Importing styles into your custom template
The custom question styles are near the bottom of each template's CSS file and start with:
/* --------------------------- START: Question styles ------------------------------ */
If you're styling your own custom template, You should be able to copy everything after the above from templates/default/template.css (for tables based layouts) or /templates/limespired/template.css (for CSS based layouts) into your own style sheet without any impact on your other styles.
Internet Explorer conditional style sheets
Because of the marked discrepancies in rendering between IE6, IE7 and most other browsers, there are special IE conditional style sheets included for each template.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->
You should include the above code within your startpage.pstpl and copies of both the IE style sheets from either /templates/default/ or /templates/limespired for Tables base layout and CSS based layout respectively.
Alternative solution for Internet explorer
You can put conditional class for body in startpage.pstpl, and use this class in your template.css. This method is used in citronade template. Adding a js / no-js class to to have javascript / no javascript system.
<!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9 no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script>
And in template.css use
.ie6{/*specific for internet explorer 6*/}
.ielt8{/*specific for internet explorer 6 and 7*/
.ie{/*specific for all internet explorer */}
Right-to-Left (RTL) Languages and justify
The text editor within LimeSurvey is able to format RTL Text. However, the editor itself shows the RTL language in a left to right format when justified. This is just an editor display issue. The RTL and justified question or text will display correctly from right to left, even when justified, in your survey or on preview.
Keywords
Keywords within a template file get replaced by the current survey information. They are surrounded by curly brackets, for example: {SURVEYNAME}
The following strings will be replaced by LimeSurvey when parsing the template file and presenting it to survey users. These field strings will work on almost every template except for the 'Completed Page'. (Most of these strings can be found in the common.php file. If it's not there, look in the index.php file.)
Keyword | Template files | Description |
---|---|---|
{SURVEYNAME} | All Files | The survey title |
{SURVEYDESCRIPTION} | All Files | The survey description |
{WELCOME} | All files (mainly for welcome.pstpl) | The survey 'welcome' text |
{PERCENTCOMPLETE} | survey.pstpl | A small graph showing the percentage of the survey completed |
{GROUPNAME} | startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl | Displays the current group name |
{GROUPDESCRIPTION} | startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl | Displays the current group description |
{NUMBEROFQUESTIONS} | welcome.pstpl | Displays the total number of questions in the survey (just the number) |
{THEREAREXQUESTIONS} | welcome.pstpl | Displays the sentence "There are X questions in this survey" - from the relevant language file. The X is replaced with the number of questions. Note that this will also work appropriately for singular or plural. If there is only 1 question, it will print "There is 1 question in this survey". |
{CHECKJAVASCRIPT} | All files (mainly for welcome.pstpl) | Warning message when end-user browser have javascript disabled |
{QUESTION} | Question.pstpl | (Has been superseeded but the {QUESTION_...} keywords as of LS1.87) Displays the current question text (The format of {QUESTION} can customised by editing 'question_start.pstpl') Use the following: {QUESTION_TEXT}, {QUESTION_MANDATORY}, {QUESTION_HELP}, {QUESTION_MAN_MESSAGE}, {QUESTION_VALID_MESSAGE} and {QUESTION_INPUT_ERROR_CLASS} and appropriate wrapping HTML instead of {QUESTION} |
{ANSWER} | question.pstpl, print_question.pstpl | presents the answer form for the current question |
{SGQ} | question.pstpl, question text | Can be used in the question text itself, to reference the input field of the question dynamically by displaying the Survey-Group-Question id for the current question. (as of svn build 9755) |
{QUESTIONHELP} | question.pstpl, print_question.pstpl | Displays help text (predefined tip for question type) for the current question |
{QUESTION_CLASS} | question.pstpl, print_question.pstpl | unique class for each question type. (To be included in the question's wrapping tag.) |
{QUESTION_CODE} | question.pstpl, print_question.pstpl | Displays the current question code |
{QUESTION_ESSENTIALS} | question.pstpl | the question ID and (if a question is conditional), 'style="display:none;"'. (To be included in the question's wrapping tag.) |
{QUESTION_HELP} | question.pstp, question_start.pstpl | Displays the user defined help text for the current question |
{QUESTION_TYPE_HELP} | print_question.pstp | Displays the user defined help text for the current question |
{QUESTION_INPUT_ERROR_CLASS} | question.pstp, question_start.pstpl | Provides a class if there was user input error |
{QUESTION_ID} | print_question.pstp | Provides a unique ID for each question to allow styling for specific questions |
{QUESTION_TEXT} | question.pstp, print_question.pstp, question_start.pstpl | Displays the text for the current question |
{QUESTION_MANDATORY} | question.pstp, print_question.pstp, question_start.pstpl | Displays the translated 'Mandatory' text for the current question |
{QUESTION_MAN_CLASS} | question.pstpl, print_question.pstpl | class if a question is mandatory. (To be included in the question's wrapping tag.) |
{QUESTION_MAN_MESSAGE} | question.pstp, print_question.pstp, question_start.pstpl | Displays the translated 'Mandatory' help message text for the current question |
{QUESTION_NUMBER} | print_question.pstpl | Incremental count of questions. |
{QUESTION_VALID_MESSAGE} | question.pstp, print_question.pstp, question_start.pstpl | Displays the translated valid help message text for the current question |
{QUESTION_SCENARIO} | print_question.pstp | Prints out the 'scenario' text for conditional questions. |
{NAVIGATOR} | navigator.pstpl | Displays navigation buttons (next, prev, last) |
{CLEARALL} | All files (but intended for navigator.pstpl) | Displays the "Exit and Clear Results" link |
{SUBMITBUTTON} | submit.pstpl | Displays the final submit button |
{COMPLETED} | completed.pstpl | Displays the 'completed' message for registering, will change depending on whether the attribute_1 and attribute_2 fields are set. |
{URL} | completed.pstpl | Displays the survey 'url' and 'url text' |
{PRIVACY} | submit.pstpl | Displays privacy information when survey is anonymous |
{PRIVACYMESSAGE} | privacy.pstpl | The privacy message is shown if you set your survey to be anonymous. The text can be edited/translated in the language files. This can also be changed manually by editing the privacy.pstpl template you wish to use. |
{TEMPLATEURL} | All Files | The URL to the current template location (useful for referencing image files in your template) |
{SUBMITCOMPLETE} | endpage.pstpl | The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button |
{SUBMITREVIEW} | survey.pstpl | The statement (from the language files) that tells the user they can review/change the answers they have made by clicking "<< prev" |
{TOKEN:FIRSTNAME} | All Files | ***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table |
{TOKEN:LASTNAME} | All Files | ***If survey answers are NOT ANONYMOUS - gets replaced with the users last name from the tokens table*** |
{TOKEN:EMAIL} | All Files | ***If survey answers are NOT ANONYMOUS - gets replaced with the users email from the tokens table*** |
{TOKEN:ATTRIBUTE_1} | All Files | ***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_1 from the tokens table*** |
{TOKEN:ATTRIBUTE_2} | All Files | ***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_2 from the tokens table*** |
{ANSWERSCLEARED} | Preferably in navigator.pstpl | The "Answers Cleared" statement from the language files |
{RESTART} | clearall.pstpl | URL to restart the survey |
{CLOSEWINDOW} | All Files (Preferably in navigator.pstpl) | URL to close current window |
{REGISTERERROR} | register.pstpl | Shows any error messages in the register page (ie: "You must include an email address") |
{REGISTERMESSAGE1} | register.pstpl | The statement "You must be registered to complete this survey" from the language files |
{REGISTERMESSAGE2} | register.pstpl | Details about registering from the language files |
{REGISTERFORM} | register.pstpl | The actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set. |
{SAVE} | Works suitable on navigator.pstpl | Displays the 'Save your responses so far' button to offer the user to save and come back later to continue the survey. If the Save option is deactivated in the survey properties the tag will not be shown and ignored. |
{LANGUAGECHANGER} | survey.pstpl | Displays a switch in multilingual surveys to change the question. |
Input/Buttons
Each "input" type in a survey has been given its own class name, so that you can add CSS to your "startpage.pstpl" file, and have some control over the appearance of form buttons and inputs. These class names are as follows:
- submit (Submit Buttons)
- text (Text Inputs - for short free text, date and numerical type)
- answertext (Text of answers)
- radio (Radio Buttons)
- checkbox (Check Boxes)
- select (Select / List Boxes)
- textarea (Large text inputs - for long free text)
- clearall (The "Exit and Clear Survey" link)
- rank (The rank style question. Doesn't set the colour of the select box or the text boxes (these are set by relevant section above) but does allow changing of background colour, text colour and size etc for the rest of the ranking question)
- graph (The "percentage completed" graph table)
- innergraph (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
- question (General settings for any question that is displayed within a table. Generally you should use this to make sure that their font size and colour is the same as you have used elsewhere as a default)
- mandatory (Mandatory questions)
- input-error (User input error - for if a user has made a mistake with a mandatory question or question with validation)
- array1 and array2 (These two styles are cycled when presenting the range of answers for an array type question. This allows you to set an alternating background colour for these question types. Array1 is also used for the column headings in these question types)
- errormandatory (Sets the colour and style of the "This question is mandatory" error message)
- warningjs (Sets the colour and style of the warning message displayed if the participant's browser has javascript disabled)
There are also some elements that can be accessed using the ID of the element (#ID in CSS):
- surveycontact (The contact message shown on the start page)
- tokenmessage (used for messages inside the survey, e.g. the session expired error message)
An example of using these classes with style sheets can be found in the "bubblegum" template that comes with the LimeSurvey application.
Because you can edit all the HTML aspects, there's no reason to surround your templates with a
Styling the progress bar
Before version 1.87:
The chart.jpg file is a simple one pixel image file which is used to create the progress bar image in the 'PERCENTCOMPLETE' table. If the file does not exist, LimeSurvey will use the default 'maroon' coloured image in the public directory. If you want to create a bar to match your own colour scheme, then you should save the color in this file. Remember it should be a JPEG file, 1 pixel x 1 pixel, in the colour desired.
Version 1.87 and newer:
The progress bar appearance can be modified with CSS.
To change the background colour of the bar, add something like the following to the end of your template.css file.
#progress-wrapper .ui-widget-header {
background-color: #3300FF;
}
To change the border colour of the bar, add something like the following to the end of your template.css file.
#progress-wrapper .ui-widget-content,
#progress-wrapper .ui-widget-header {
border: 1px solid #FF0000;
}
Advanced Features Available to Developers
Starting with version 0.99, LimeSurvey has integrated some user-made patches that allow for some special changes. These very advanced features generally require changes to the underlying code base of LimeSurvey and should be done carefully so as not to introduce security holes.
Basic CMS Integration support
To be able to integrate LimeSurvey into another CMS, use the following options in config.php:
// Set $embedded to true and specify the header and footer functions if the survey is to be displayed embedded in a CMS
$embedded = false; $embedded_inc = ""; // path to the header to include if any $embedded_headerfunc = ""; // e.g. COM_siteHeader for geeklog $embedded_footerfunc = ""; // e.g. COM_siteFooter for geeklog
Set $embedded = true; to enable CMS-embedding. By using the $embedded_inc variable one can include their own .php files. By setting $embedded_headerfunc or $embedded_footerfunc, one can call functions from within included files that output the relevant headers or footers instead of LimeSurveys default ones.
Support for your own Javascript functions
Some users may need to run Javascript on the survey pages, but calling checkconditions() in the BODY element made it impossible to do so. This call has been replaced with a small JavaScript function in the HEAD that sniffs for the existence of checkconditions() and template_onload() before calling each. This way a template author can create their own template_onload() function in the HEAD that replaces the default one.
Version 1.87 and newer:
- Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
- Enter your script in the source of a question or group description.
- There are more details in the workaround section.
Videos on Templates
This video will demonstrate the basic and advanced template functions that are available to all LimeSurvey users. This includes changing the appearance of certain forms and inserting custom graphics. Additionally, it will thoroughly walk you through on how to edit and preview specific page templates, importing/exporting templates, modify appearance of questions in the CSS, customizing survey description page, and completed page.
LimeSurvey training video - template customization
Tips & Tricks
Some language specific element
If you want to have some langage specific sentence in a survey, for example an help at end of each page, you can add in a .pstl file a sentence and hidding it for other langage. And hidding it in the template.css, we can use psuedo selector :lang, but for best compatibility, we use some class.
Example for a help sentence at bottom of the page, in french an english, put this on endpage.pstpl:
<div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<div class="en" lang="en">For some help, please call 000000</div>
and in template.css
.lang-fr .en{display:none}
.lang-en .fr{display:none}
You can use it to for other sentence in your question before 1.92 ( in 1.92, there are better solutions).
Change the layout of the survey page
When editing a template this template can be assigned to a single survey while the survey list page, which is shown at www.yourdomain.org/limesurveyinstallfolder, lists all your surveys.
To use your current template for this page you have change the according setting at the Global Settings screen; at older versions this change can be done by editing the $defaulttemplate setting at the config file: Copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to $defaulttemplate = 'yourtemplatename';
Import/Export of templates: Mac users
Mac users, please note: Mac OSX default archive utility may have problems with zip folders "generated on the fly".
a work around is to unix'es unzip from the command line:
$ unzip template.zip -d template
Archive: template.zip
inflating: template/startpage
inflating: ...
or scripts in their mac-compiled counterparts:
http://homepage.mac.com/roger_jolly/software/
Changing your templates traffic light from red to green
If you haven't already, set the admin directory to read/write/execute (777). The files within it, however, may be set to read/execute only (chmod 755).
GO to file directory ie file manager, find templates directory.
1 change permission on eg"vallendar" (or any template of your choice) directory to read 777
2 voila! the red traffic light on "vallendar" is now green.
3 NOTE: to restrict access for safety, when finished editing template files, change all templates files back to what they were eg 644
Replacing the help icon
When a question help text is shown then an help.gif image is used from the default template folder.
You can replace this image by uploading a new help.gif, help.png or help.jpg in your custom template folder. It then will be automatically used instead of the default help icon.
Replacing an existing logo
Note: Before uploading a new logo always delete the old, existing one!
1. To edit the logo go to the „template.css” file which you can find it here:
2. Click the search button to find occurrences of logo related styles.
3. Search for #logo
4. Edit the main style file
You will see something similar to:
If you want to change the image just replace logo.gif with another image link. Example: (logo.png or logo.jpg).
If you want change the image size adjust width and height (in pixels) like this:
width:100px; height:100px;
Adding your own logo
1. Find and open the „startpage.pstpl” template file.
<body ... >
<img id="page_logo" src="{TEMPLATEURL}logo.png"><br>
3. To add logo go to „template.css”, you can find it here (see in screen):
3.1 Then go to the end of the main „template.css” style file.
3.2 To align the logo add...
If you want the logo to be placed at left side:
#page_logo{
float:left;
}
If you want the logo to be placed at right side:
#page_logo{
float:right;
}
If you want to center the logo
#page_logo{
display: block;
margin-left: auto;
margin-right: auto;
}
Use the same template with different logos
If you want to use the same template for all surveys and just want to change the logo for each survey, you can use the {SID} placeholder in the template .pstpl file and thereby refer to different images:
<img src="{TEMPLATEURL}logoImage-{SID}.png">
Remove the default help to all question (hide_tip)
There are 3 solutions to remove the default help:
- like a hide_tip attribute but for all question and survey.
- you can remove the {QUESTIONHELP} and is container from the file question.pstl, but it can be a bad idea for screenreader.
- for the default template and some other, add this at the end of tempate.css
span.questionhelp{display:none;}
Display custom favicon
A favicon is the little icon you see in the browser's address bar, list of bookmarks or tab. You can display your own icon as follows:
- Create a favicon - google will find you lots of free favicon generators
- Name your new favicon "favicon.ico" and place it in your template directory
- Add the following code to your startpage.pstpl before the </head> tag
<link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">
<link rel="icon" href="{TEMPLATEURL}favicon.ico" type="image/x-icon">
Different appearance for survey-/question-pages
(Version 1.91 and newer)
If you want LimeSurvey to change the appearance of every second page (i.e. of even and odd survey pages) you can use .page-odd class in your css file to change the appearance of odd pages.
example from default template of LimeSurvey 1.91+
.page-odd table.question-group {
background-color: #D2F2D3;
}
To not differentiate even and odd pages at the (default) template find all instances of .page-odd in template.css and remove those styles.
Create a vertical separator border for dual scale array
To create a vertical separator border for a dual scale array you can add the following lines to your template.css-file.
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
border-right:solid 1px #00A8E1;
}
header_separator is used to adress the separator for the header "td" and "dual_scale_separator" is used to adress the separator column in the dual scale array.
Hide the survey contact message shown on the start page/survey list
To hide the "Please contact ..." message on the start page (with the survey list) you can add the following to the $(document).ready function in the template.js of your used design template:
$('#surveycontact').hide(); //Hides the survey contact message
Remove the survey contact message shown on error messages
If you want to remove the survey contact message from error messages it'll be trickier. You can add the following function call to the $(document).ready function in the template.css of your used design template:
removeContactAdressFromMessage(); //Removes the survey contact message from error messages
and add the following function to your *template.js* file
function removeContactAdressFromMessage()
{
if ($('#tokenmessage').length > 0)
{
var oldMessage = $('#tokenmessage').html();
var indexContact = oldMessage.indexOf('Bitte kontaktieren');
var newMessage = oldMessage.substr(0, indexContact);
$('#tokenmessage').html(newMessage);
}
}
It will probably not work for an englisch survey and have to be extended when using for multilingual surveys. But it's an idea/tip how to solve this.
How to deal with multilingual question attributes (before version 2.0 at which those were added)
If you have a multilingual survey and e. g. want to use a different string for the "other" field, this could only be done for the base language (until this feature was added at LimeSurvey 2.0). To work around this, paste in the field to change the label for "other"
<span class="en">New label</span><span class="fr">Nouveau label</span>
At the template.css of your template (at /limesurvey/upload/templates/<yourtemplatename>/template.css) add:
html:lang(en) .fr{display:none}
html:lang(fr) .en{display:none}