LimeSurvey Manual
Menu
Navigation
Main page
Recent changes
Random page
Help
Search
Special pages
Printable version
Recent changes
Help
English
Log in
Actions
Translate
Language statistics
Message group statistics
Export
Special
Export translations
Settings
Group
Activating a survey
Adding answers or subquestions
Administering LimeSurvey
Alternatives to the LimeSurvey import function
Assessments
Backup entire database
Batch deletion
Category:Advanced Question Settings
Category:General Question Options
Category:Question Settings
Central Participant Database
Changing an active survey
Check data integrity
Check question logic
Check survey logic - Advanced
Closing a survey
ComfortUpdate
Copy question
Custom translation
Data encryption
Data entry
Data policy settings
DateFunctions
Default answers
Delete question
Delete survey
Display/Export survey
Edit question
Email bounce tracking system
Email templates
Export question
Export responses
Exporting results
Expression Manager
Expression Manager sample surveys
ExpressionScript - Presentation
ExpressionScript Engine - Quick start guide
ExpressionScript examples
ExpressionScript How-tos
ExpressionScript sample surveys
Extension compatibility
Failed email notifications
First login - your user preferences
General FAQ
General settings
Getting started
Global settings
Google API howto
Home page settings
How to design a good survey (guide)
Import responses
Importing a survey
Installation - LimeSurvey CE
Installation FAQ
Installation of the LimeSurvey XAMPP package
Installation security hints
Installation using a command line interface (CLI)
Installation Version 1.92 or older
Iterate survey
Label sets
LDAP settings
License
LimeSurvey Manual
LimeSurvey PRO vs LimeSurvey CE
LimeSurvey Users
LimeSurvey Video-Tutorial
LimeSurvey-compatible hosting companies
List question groups
List questions
Localization
Major version upgrade
Make your plugin compatible with LS4
Manage user groups
Manage users
Menu configuration
Menu entries configuration
Multilingual survey
New Template System in LS3.x
Not categorized and advanced features
Notifications & data
Optional settings
Overview
Panel integration
Participant settings
Plugin manager
Plugin menu
Plugins - advanced
Presentation
Preview function
Problems & solutions
Publication & access
QS:Allowed filetypes
QS:Alphasort
QS:Answer width
QS:Array filter
QS:Array filter exclude
QS:Array filter style
QS:Assessment value
QS:Autocheck exclusive option
QS:Category separator
QS:Chart type
QS:Choice column width
QS:Choice header
QS:Code filter
QS:Commented checkbox
QS:CSS Class
QS:Date max
QS:Date min
QS:Date time format
QS:Display chart
QS:Display columns
QS:Display map
QS:Display rows
QS:Display type
QS:Dropdown dates
QS:Dropdown dates year max
QS:Dropdown dates year min
QS:Dropdown prefix
QS:Dropdown prepostfix
QS:Dropdown separators
QS:Dropdown size
QS:Dualscale headerA
QS:Dualscale headerB
QS:Em validation q
QS:Em validation q tip
QS:Em validation sq
QS:Em validation sq tip
QS:Encryption
QS:Equals num value
QS:Equation
QS:Exclusive option
QS:Get order previous q
QS:Hidden
QS:Hide tip
QS:Input box size
QS:Input boxes
QS:Input max characters
QS:Label column width
QS:Location city
QS:Location country
QS:Location defaultcoordinates
QS:Location mapheight
QS:Location mapservice
QS:Location mapwidth
QS:Location mapzoom
QS:Location nodefaultfromip
QS:Location postal
QS:Location state
QS:Mandatory
QS:Max answers
QS:Max filesize
QS:Max num value
QS:Max num value n
QS:Max num value sgqa
QS:Max subquestions
QS:Maximum chars
QS:Maximum number of files
QS:Min answers
QS:Min num value
QS:Min num value n
QS:Minimum number of files
QS:Minute step interval
QS:Month display style
QS:Multiflexible checkbox
QS:Multiflexible max
QS:Multiflexible min
QS:Multiflexible step
QS:Num value int only
QS:Numbers only
QS:Other
QS:Other comment mandatory
QS:Other numbers only
QS:Other Position
QS:Other replace text
QS:Page break
QS:Prefix
QS:Preg validation
QS:Printable survey relevance help
QS:Public statistics
QS:Question theme
QS:Random group
QS:Random order
QS:Rank header
QS:Relevance
QS:Remove text or uncheck checkbox
QS:Repeat headers
QS:Reverse
QS:Samechoiceheight
QS:Samelistheight
QS:Scale export
QS:Show comment
QS:Show grand total
QS:Show title
QS:Show totals
QS:Showpopups
QS:Slider accuracy
QS:Slider default
QS:Slider handle shape
QS:Slider handle Unicode shape
QS:Slider initial value
QS:Slider layout
QS:Slider max
QS:Slider middlestart
QS:Slider min
QS:Slider orientation
QS:Slider rating
QS:Slider reset
QS:Slider reverse
QS:Slider separator
QS:Slider showminmax
QS:Subquestion width
QS:Suffix
QS:Text input width
QS:Theme editor - advanced options
QS:Time limit
QS:Time limit action
QS:Time limit countdown message
QS:Time limit disable next
QS:Time limit disable prev
QS:Time limit message
QS:Time limit message delay
QS:Time limit message style
QS:Time limit timer style
QS:Time limit warning
QS:Time limit warning display time
QS:Time limit warning message
QS:Time limit warning style
QS:Use dropdown
QS:Value range allows missing
Question groups - introduction
Question toolbar options
Question type - 5 point choice
Question type - Array
Question type - Array (10 point choice)
Question type - Array (5 point choice)
Question type - Array (Increase-Same-Decrease)
Question type - Array (Numbers)
Question type - Array (Texts)
Question type - Array (Yes-No-Uncertain)
Question type - Array by column
Question type - Array dual scale
Question type - Date
Question type - Equation
Question type - File upload
Question type - Gender
Question type - Huge free text
Question type - Language switch
Question type - List (Dropdown)
Question type - List (Radio)
Question type - List with comment
Question type - Long free text
Question type - Multiple choice
Question type - Multiple choice with comments
Question type - Multiple numerical input
Question type - Multiple short text
Question type - Numerical input
Question type - Ranking
Question type - Short free text
Question type - Text display
Question type - Yes-No
Question types
Questions - introduction
QueXML PDF Export
Quick start guide - LimeSurvey 2.50+
Quick start guide - LimeSurvey 3.0+
Quick-translation
Regenerate question codes
Reorder questions and question groups
Reset conditions
Resources
Responses & statistics
Responses (survey results)
Running a survey safely
Setting conditions
SGQA identifier
Statistics
Survey group permissions
Survey menu
Survey participants
Survey permissions
Survey quotas
Survey settings
Survey settings version 2
Survey structure
Survey toolbar options
Surveys - introduction
Surveys - management
Tab Separated Value survey structure
Template:Deprecated
Template:DeprecatedIn
Template:Example
Template:FeatureChange
Template:FeatureStarting
Template:Hint
Template:NewIn
Template:UpdatedIn
Testing a survey
Text elements
Theme editor
Theme options
Themes
Timing statistics
Tools
Transferring an installation
Translating LimeSurvey
Troubleshooting
TwoFactorAdminLogin
Upgrading from a previous version
URL fields
Using regular expressions
Version change log
Version guide
View saved but not submitted responses
Workarounds
Language
aa - Afar
ab - Abkhazian
abs - Ambonese Malay
ace - Achinese
acm - Iraqi Arabic
ady - Adyghe
ady-cyrl - Adyghe (Cyrillic script)
aeb - Tunisian Arabic
aeb-arab - Tunisian Arabic (Arabic script)
aeb-latn - Tunisian Arabic (Latin script)
af - Afrikaans
aln - Gheg Albanian
alt - Southern Altai
am - Amharic
ami - Amis
an - Aragonese
ang - Old English
ann - Obolo
anp - Angika
ar - Arabic
arc - Aramaic
arn - Mapuche
arq - Algerian Arabic
ary - Moroccan Arabic
arz - Egyptian Arabic
as - Assamese
ase - American Sign Language
ast - Asturian
atj - Atikamekw
av - Avaric
avk - Kotava
awa - Awadhi
ay - Aymara
az - Azerbaijani
azb - South Azerbaijani
ba - Bashkir
ban - Balinese
ban-bali - Balinese (Balinese script)
bar - Bavarian
bbc - Batak Toba
bbc-latn - Batak Toba (Latin script)
bcc - Southern Balochi
bci - Baoulé
bcl - Central Bikol
bdr - West Coast Bajau
be - Belarusian
be-tarask - Belarusian (Taraškievica orthography)
bew - Betawi
bg - Bulgarian
bgn - Western Balochi
bh - Bhojpuri
bho - Bhojpuri
bi - Bislama
bjn - Banjar
blk - Pa'O
bm - Bambara
bn - Bangla
bo - Tibetan
bpy - Bishnupriya
bqi - Bakhtiari
br - Breton
brh - Brahui
bs - Bosnian
btm - Batak Mandailing
bto - Iriga Bicolano
bug - Buginese
bxr - Russia Buriat
ca - Catalan
cbk-zam - Chavacano
cdo - Min Dong Chinese
ce - Chechen
ceb - Cebuano
ch - Chamorro
cho - Choctaw
chr - Cherokee
chy - Cheyenne
ckb - Central Kurdish
co - Corsican
cps - Capiznon
cpx - Pu-Xian Min
cpx-hans - Pu-Xian Min (Simplified Han script)
cpx-hant - Pu-Xian Min (Traditional Han script)
cpx-latn - Pu-Xian Min (Latin script)
cr - Cree
crh - Crimean Tatar
crh-cyrl - Crimean Tatar (Cyrillic script)
crh-latn - Crimean Tatar (Latin script)
crh-ro - Crimean Tatar (Romania)
cs - Czech
csb - Kashubian
cu - Church Slavic
cv - Chuvash
cy - Welsh
da - Danish
dag - Dagbani
de - German
de-at - Austrian German
de-ch - Swiss High German
de-formal - German (formal address)
dga - Dagaare
din - Dinka
diq - Zazaki
dsb - Lower Sorbian
dtp - Central Dusun
dty - Doteli
dv - Divehi
dz - Dzongkha
ee - Ewe
egl - Emilian
el - Greek
eml - Emiliano-Romagnolo
en - English
en-ca - Canadian English
en-gb - British English
eo - Esperanto
es - Spanish
es-419 - Latin American Spanish
es-formal - Spanish (formal address)
et - Estonian
eu - Basque
ext - Extremaduran
fa - Persian
fat - Fanti
ff - Fula
fi - Finnish
fit - Tornedalen Finnish
fj - Fijian
fo - Faroese
fon - Fon
fr - French
frc - Cajun French
frp - Arpitan
frr - Northern Frisian
fur - Friulian
fy - Western Frisian
ga - Irish
gaa - Ga
gag - Gagauz
gan - Gan Chinese
gan-hans - Gan (Simplified)
gan-hant - Gan (Traditional)
gcr - Guianan Creole
gd - Scottish Gaelic
gl - Galician
gld - Nanai
glk - Gilaki
gn - Guarani
gom - Goan Konkani
gom-deva - Goan Konkani (Devanagari script)
gom-latn - Goan Konkani (Latin script)
gor - Gorontalo
got - Gothic
gpe - Ghanaian Pidgin
grc - Ancient Greek
gsw - Alemannic
gu - Gujarati
guc - Wayuu
gur - Frafra
guw - Gun
gv - Manx
ha - Hausa
hak - Hakka Chinese
haw - Hawaiian
he - Hebrew
hi - Hindi
hif - Fiji Hindi
hif-latn - Fiji Hindi (Latin script)
hil - Hiligaynon
hno - Northern Hindko
ho - Hiri Motu
hr - Croatian
hrx - Hunsrik
hsb - Upper Sorbian
hsn - Xiang Chinese
ht - Haitian Creole
hu - Hungarian
hu-formal - Hungarian (formal address)
hy - Armenian
hyw - Western Armenian
hz - Herero
ia - Interlingua
id - Indonesian
ie - Interlingue
ig - Igbo
igl - Igala
ii - Sichuan Yi
ik - Inupiaq
ike-cans - Eastern Canadian (Aboriginal syllabics)
ike-latn - Eastern Canadian (Latin script)
ilo - Iloko
inh - Ingush
io - Ido
is - Icelandic
it - Italian
iu - Inuktitut
ja - Japanese
jam - Jamaican Creole English
jbo - Lojban
jut - Jutish
jv - Javanese
ka - Georgian
kaa - Kara-Kalpak
kab - Kabyle
kai - Karekare
kbd - Kabardian
kbd-cyrl - Kabardian (Cyrillic script)
kbp - Kabiye
kcg - Tyap
kea - Kabuverdianu
kg - Kongo
khw - Khowar
ki - Kikuyu
kiu - Kirmanjki
kj - Kuanyama
kjh - Khakas
kjp - Eastern Pwo
kk - Kazakh
kk-arab - Kazakh (Arabic script)
kk-cn - Kazakh (China)
kk-cyrl - Kazakh (Cyrillic script)
kk-kz - Kazakh (Kazakhstan)
kk-latn - Kazakh (Latin script)
kk-tr - Kazakh (Turkey)
kl - Kalaallisut
km - Khmer
kn - Kannada
ko - Korean
ko-kp - Korean (North Korea)
koi - Komi-Permyak
kr - Kanuri
krc - Karachay-Balkar
kri - Krio
krj - Kinaray-a
krl - Karelian
ks - Kashmiri
ks-arab - Kashmiri (Arabic script)
ks-deva - Kashmiri (Devanagari script)
ksh - Colognian
ksw - S'gaw Karen
ku - Kurdish
ku-arab - Kurdish (Arabic script)
ku-latn - Kurdish (Latin script)
kum - Kumyk
kus - Kʋsaal
kv - Komi
kw - Cornish
ky - Kyrgyz
la - Latin
lad - Ladino
lb - Luxembourgish
lbe - Lak
lez - Lezghian
lfn - Lingua Franca Nova
lg - Ganda
li - Limburgish
lij - Ligurian
liv - Livonian
lki - Laki
lld - Ladin
lmo - Lombard
ln - Lingala
lo - Lao
loz - Lozi
lrc - Northern Luri
lt - Lithuanian
ltg - Latgalian
lus - Mizo
luz - Southern Luri
lv - Latvian
lzh - Literary Chinese
lzz - Laz
mad - Madurese
mag - Magahi
mai - Maithili
map-bms - Basa Banyumasan
mdf - Moksha
mg - Malagasy
mh - Marshallese
mhr - Eastern Mari
mi - Māori
min - Minangkabau
mk - Macedonian
ml - Malayalam
mn - Mongolian
mnc - Manchu
mnc-latn - Manchu (Latin script)
mnc-mong - Manchu (Mongolian script)
mni - Manipuri
mnw - Mon
mo - Moldovan
mos - Mossi
mr - Marathi
mrh - Mara
mrj - Western Mari
ms - Malay
ms-arab - Malay (Jawi script)
mt - Maltese
mus - Muscogee
mwl - Mirandese
my - Burmese
myv - Erzya
mzn - Mazanderani
na - Nauru
nah - Nāhuatl
nan - Min Nan Chinese
nap - Neapolitan
nb - Norwegian Bokmål
nds - Low German
nds-nl - Low Saxon
ne - Nepali
new - Newari
ng - Ndonga
nia - Nias
niu - Niuean
nl - Dutch
nl-informal - Dutch (informal address)
nmz - Nawdm
nn - Norwegian Nynorsk
no - Norwegian
nod - Northern Thai
nog - Nogai
nov - Novial
nqo - N’Ko
nrm - Norman
nso - Northern Sotho
nv - Navajo
ny - Nyanja
nyn - Nyankole
nys - Nyungar
oc - Occitan
ojb - Northwestern Ojibwa
olo - Livvi-Karelian
om - Oromo
or - Odia
os - Ossetic
pa - Punjabi
pag - Pangasinan
pam - Pampanga
pap - Papiamento
pcd - Picard
pcm - Nigerian Pidgin
pdc - Pennsylvania German
pdt - Plautdietsch
pfl - Palatine German
pi - Pali
pih - Norfuk / Pitkern
pl - Polish
pms - Piedmontese
pnb - Western Punjabi
pnt - Pontic
prg - Prussian
ps - Pashto
pt - Portuguese
pt-br - Brazilian Portuguese
pwn - Paiwan
qu - Quechua
qug - Chimborazo Highland Quichua
rgn - Romagnol
rif - Riffian
rki - Arakanese
rm - Romansh
rmc - Carpathian Romani
rmy - Vlax Romani
rn - Rundi
ro - Romanian
roa-tara - Tarantino
rsk - Pannonian Rusyn
ru - Russian
rue - Rusyn
rup - Aromanian
ruq - Megleno-Romanian
ruq-cyrl - Megleno-Romanian (Cyrillic script)
ruq-latn - Megleno-Romanian (Latin script)
rw - Kinyarwanda
ryu - Okinawan
sa - Sanskrit
sah - Yakut
sat - Santali
sc - Sardinian
scn - Sicilian
sco - Scots
sd - Sindhi
sdc - Sassarese Sardinian
sdh - Southern Kurdish
se - Northern Sami
se-fi - Northern Sami (Finland)
se-no - Northern Sami (Norway)
se-se - Northern Sami (Sweden)
sei - Seri
ses - Koyraboro Senni
sg - Sango
sgs - Samogitian
sh - Serbo-Croatian
sh-cyrl - Serbo-Croatian (Cyrillic script)
sh-latn - Serbo-Croatian (Latin script)
shi - Tachelhit
shi-latn - Tachelhit (Latin script)
shi-tfng - Tachelhit (Tifinagh script)
shn - Shan
shy - Shawiya
shy-latn - Shawiya (Latin script)
si - Sinhala
simple - Simple English
sjd - Kildin Sami
sje - Pite Sami
sk - Slovak
skr - Saraiki
skr-arab - Saraiki (Arabic script)
sl - Slovenian
sli - Lower Silesian
sm - Samoan
sma - Southern Sami
smn - Inari Sami
sms - Skolt Sami
sn - Shona
so - Somali
sq - Albanian
sr - Serbian
sr-ec - Serbian (Cyrillic script)
sr-el - Serbian (Latin script)
srn - Sranan Tongo
sro - Campidanese Sardinian
ss - Swati
st - Southern Sotho
stq - Saterland Frisian
sty - Siberian Tatar
su - Sundanese
sv - Swedish
sw - Swahili
syl - Sylheti
szl - Silesian
szy - Sakizaya
ta - Tamil
tay - Tayal
tcy - Tulu
tdd - Tai Nuea
te - Telugu
tet - Tetum
tg - Tajik
tg-cyrl - Tajik (Cyrillic script)
tg-latn - Tajik (Latin script)
th - Thai
ti - Tigrinya
tk - Turkmen
tl - Tagalog
tly - Talysh
tly-cyrl - Talysh (Cyrillic script)
tn - Tswana
to - Tongan
tok - Toki Pona
tpi - Tok Pisin
tr - Turkish
tru - Turoyo
trv - Taroko
ts - Tsonga
tt - Tatar
tt-cyrl - Tatar (Cyrillic script)
tt-latn - Tatar (Latin script)
tum - Tumbuka
tw - Twi
ty - Tahitian
tyv - Tuvinian
tzm - Central Atlas Tamazight
udm - Udmurt
ug - Uyghur
ug-arab - Uyghur (Arabic script)
ug-latn - Uyghur (Latin script)
uk - Ukrainian
ur - Urdu
uz - Uzbek
uz-cyrl - Uzbek (Cyrillic script)
uz-latn - Uzbek (Latin script)
ve - Venda
vec - Venetian
vep - Veps
vi - Vietnamese
vls - West Flemish
vmf - Main-Franconian
vmw - Makhuwa
vo - Volapük
vot - Votic
vro - Võro
wa - Walloon
wal - Wolaytta
war - Waray
wls - Wallisian
wo - Wolof
wuu - Wu Chinese
wuu-hans - Wu Chinese (Simplified)
wuu-hant - Wu Chinese (Traditional)
xal - Kalmyk
xh - Xhosa
xmf - Mingrelian
xsy - Saisiyat
yi - Yiddish
yo - Yoruba
yrl - Nheengatu
yue - Cantonese
yue-hans - Cantonese (Simplified)
yue-hant - Cantonese (Traditional)
za - Zhuang
zea - Zeelandic
zgh - Standard Moroccan Tamazight
zh - Chinese
zh-cn - Chinese (China)
zh-hans - Simplified Chinese
zh-hant - Traditional Chinese
zh-hk - Chinese (Hong Kong)
zh-mo - Chinese (Macau)
zh-my - Chinese (Malaysia)
zh-sg - Chinese (Singapore)
zh-tw - Chinese (Taiwan)
zu - Zulu
Format
Export for off-line translation
Export in native format
Export in CSV format
Fetch
{{DISPLAYTITLE:Neues Designvorlagensystem in LS3.x}}<languages /> __TOC__ =Einführung= Beachten Sie: In früheren Versionen von LimeSurvey wurden die Dateien, die definieren, wie die Umfrage aussieht und wie die Umfrage in Bezug auf Farben, Schriftarten, Layout und (einige) Verhaltensweisen dargestellt wird, als „Vorlage“ bezeichnet. Aufgrund neuer Erkenntnisse wird dies nun als „Theme“ bezeichnet, während die Vorlage beispielsweise Umfragen vorbehalten ist. Auf dieser Seite erfahren Sie, wie Sie: * Verwenden Sie das neue Themensystem von LimeSurvey 3.0 * Verwenden Sie Vererbung, um Ihre eigenen Themen zu verwalten * Fügen Sie Ihrem Thema ein Bild hinzu * Verwalten Sie Themenoptionen für Ihre Umfragen und Umfragegruppen <hr/> LimeSurvey 3 führt ein komplett neues Theme-Engine-System ein, das auf Twig 1.29, Bootstrap, basiert und Theme-Vererbung und Theme-Optionen ermöglicht. Das alte Ersatzschlüsselwortsystem wird vollständig entfernt. Somit kann nun 100 % des Frontend-HTMLs angepasst werden. Beispielsweise gab es im alten Theme-System ein Schlüsselwort {ASSESSMENTS}, das zur Ausführungszeit durch den Bewertungs-HTML ersetzt wurde. Ein Theme-Designer hatte keine Möglichkeit, diesen HTML-Code anzupassen (außer mithilfe von JavaScript). Nun gibt es eine Datei namens „assessments.twig“, die die (in Twig geschriebene) Logik zum Generieren dieses HTML enthält. Auf diesen Seiten erklären wir Ihnen, wie Sie diese neue Theme-Engine verwenden. <div class="simplebox">[[File:help.png]] Wir werden hier nicht näher darauf eingehen, wie Twig funktioniert. Es handelt sich um eine Art sehr vereinfachtes PHP, das dank des „Sandbox“-Systems ein hohes Maß an Sicherheit bietet (wir werden das im Teil über den Theme Engine Core-Code genauer sehen). Wenn Sie PHP bereits kennen, wird es Ihnen sehr leicht fallen, es zu beherrschen. Wenn Sie PHP nicht kennen, sollte es trotzdem ziemlich einfach zu erlernen sein. Bitte schauen Sie sich die Twig 1.X-Dokumentation an: https://twig.symfony.com/</div> =Bearbeiten über die Admin-Oberfläche= ==Themenliste== Auf dem Admin-Dashboard gibt es jetzt ein Feld für den Zugriff auf die Themenliste: [[File:Template list.jpg|thumb|800px |center|baseline|border|''Die Themenliste nach einer Neuinstallation von RC3'']] <br /> Die Liste ist in 5 Spalten unterteilt: * eine Vorschau des Themas: Es handelt sich lediglich um eine Bilddatei namens „preview.png“ im Stammverzeichnis des Themas * der „Titel“ des Themas als angegeben im Manifest (config.xml im Stammverzeichnis des Themas) * die Beschreibung des Themas: eine in seinem Manifest festgelegte Zeichenfolge * der Typ des Themas: Kernthema (bereitgestellt mit LimeSurvey), Benutzerthema (im Upload-Verzeichnis hinzugefügt), XML-Theme (nicht in die Datenbank geladen) * Erweitert: wenn das Theme ein anderes Theme erweitert, wird sein Name hier angezeigt * Einige Aktionsschaltflächen: ** Installieren: lädt das Manifest eines Themas, um es zur Datenbank hinzuzufügen und zur Auswahl auf Umfrageebene verfügbar zu machen ** Deinstallieren: es werden die Konfigurationseinträge eines Themas in der Datenbank gelöscht ** Themeneditor: leitet Sie zum Theme-Editor weiter ** Theme-Option: führt Sie zur globalen Konfiguration der Theme-Optionen ==Theme-Editor== <div class="simplebox"> [[File:help.png]] In dieser Dokumentation wird davon ausgegangen, dass Sie bereits wissen, wie Sie den Theme-Editor in der vorherigen Version von LS verwenden.</div> <br> Der Theme-Editor wurde so nah wie möglich am Original gehalten. Wenn Sie also ein Core Theme öffnen, können Sie es nicht bearbeiten. Aber jetzt haben Sie statt der Schaltfläche „Kopieren“ eine Schaltfläche „Erweitern“. <br> [[File:Extends default.png|center|baseline|border|''Jetzt '''erweitern'''' Theme'']] <span id="A_quick_overview_of_the_concept_of_theme_inheritance"></span> ====Ein kurzer Überblick über das Konzept der Themenvererbung==== In LS3 kann ein Theme nun von einem anderen Theme erben, es kann ein anderes Theme „erweitern“. Das bedeutet, dass das Theme-Verzeichnis praktisch leer ist und nur die Dateien (Ansichten, Stylesheets, Skripte, Ressourcen usw.) enthält, die sich von den Originaldateien unterscheiden. Auf diese Weise können Sie ganz einfach eine Themenflotte für Ihre verschiedenen Benutzer erstellen, ohne viele verschiedene Themen pflegen zu müssen. Zum Beispiel: Sie können Ihr eigenes, selbst erstelltes Thema haben und dann eine Version für ein Unternehmen (mit seinem Logo, seinem Stil, vielleicht einem Link zu seiner Website in der Fußzeile usw.), eine andere Version für ein anderes Unternehmen usw. Wenn ja Wenn Sie das CSS oder das globale Layout Ihres benutzerdefinierten Themes aktualisieren, werden alle Themes, die davon erben, automatisch aktualisiert. Beachten Sie, dass die Vererbung rekursiv ist: Ein Thema kann ein Thema erweitern, das ein anderes erweitert usw. <div class="simplebox">[[File:help.png]] Das bedeutet auch, dass Sie auch dann von den Aktualisierungen profitieren, wenn Sie eines der Kernthemen von LimeSurvey erweitern.</div> <span id="Novelties_in_the_user_interface"></span> ====Neuerungen in der Benutzeroberfläche==== Um das Monochrome-Theme von LimeSurvey zu erweitern, gehen Sie zur Themenliste und klicken Sie auf die Schaltfläche „Theme-Editor“ des Monochrome-Themas. Klicken Sie dann auf „erweitern“ und bestätigen Sie den neuen Namen „extends_monochrome“. Wenn Sie nun zum Upload-Verzeichnis gehen (mit Ihrem Datei-/FTP-Client), werden Sie sehen, dass ein neues Verzeichnis erstellt wurde: '''upload/themes/extends_monochrome''' Es enthält eine XML-Datei und Verzeichnisse , aber die meisten Verzeichnisse sind leer. Es hat weder Ansichten noch CSS noch JS. Sie können dieses Thema jedoch weiterhin als normales Thema aus einer Umfrage auswählen und es sieht dann genauso aus wie das monochrome Thema. [[File:Extends monochrome empty.jpg|center|baseline|border|''Der Themenbaum (Verzeichnis und Dateien) direkt nach seiner Erstellung. Es ist praktisch leer'']] <div class="simplebox">[[File:help.png]] Die Ressourcen (jpg, png usw.) aus dem ursprünglichen Theme werden beim Erweitern eines Themes kopiert. Dies liegt daran, dass, wenn Sie eine CSS-Datei lokal aus dem ursprünglichen Design kopieren und diese auf diese Dateien verweist (wie in der Anweisung „Hintergrundbild“), diese Bilder im aktuellen Designpfad gefunden werden müssen.</div> Der Theme-Editor für das „extends_monochrome“-Theme sieht folgendermaßen aus: [[File:Editing extensions monochrome.jpg|center|baseline|border|'' Editing extensions_monochrome-Theme'']] <br /><br /> Es gibt keinen großen Unterschied zum alten Theme-Editor. Lassen Sie uns die wichtigsten auflisten: <br /> * Das Schlüsselwort „inherited“ in der Dateiliste. Dies bedeutet, dass die Datei nicht im Theme-Verzeichnis vorhanden ist und dass die Datei aus dem Original-Theme verwendet wird. [[File:Inherited.jpg|center]] <br> * Der Haupteditor ( [https://ace.c9.io ACE-Editor ] ) zeigt den Inhalt der ausgewählten Datei an. Die Dateien enthalten nicht nur HTML, CSS oder JS, sondern auch Twig-Anweisungen. Diese Twig-Anweisungen geben uns die Möglichkeit, etwas Logik auf Themenansichten zu übertragen, die sich zuvor tief im Kern befanden und die jetzt angepasst werden können. [[File:Twig-Code in editor.jpg|center|''Some Twig Code für Umfrageliste'']] <br> * Aus diesem Grund stehen Ihnen jetzt in der Dropdown-Auswahl des oberen Menüs mehr Bildschirmtypen zur Verfügung. Sie werden feststellen, dass Seiten wie „Umfrageliste“, „Laden“, „Speichern“, „Fehler“, „Registrierung“, „Bewertungen“, „Antworten drucken“ zuvor nicht verfügbar waren oder dass Sie dies nicht wirklich tun konnten zuvor angepasst werden. [[File:Newscreens editables.jpg|195px|center|''Jetzt können Sie alle Bildschirme anpassen'']] <br /> * Über den „Tip“-Link unten in der Dateiliste können Sie mit Twig ein Bild in Ihr HTML [[File:Tip picture.png|605px|center]] einfügen.<br /> * Die Schaltfläche „Änderungen speichern“ wird zur Schaltfläche „In lokales Design kopieren und Änderungen speichern“ [[File:Copytolocal.png|360px|center]] <span id="Quick_example:_adding_a_picture"></span> ====Kurzes Beispiel: Ein Bild hinzufügen ==== Die Schaltfläche „In lokales Design kopieren und Änderungen speichern“ bewirkt genau das, was sie sagt: Wenn Sie etwas in der Datei bearbeiten und dann auf diese Schaltfläche klicken, wird die Datei in das von Ihnen bearbeitete Design kopiert Speichern Sie Ihre Änderungen. <br> Zum Beispiel: Klicken Sie auf die Datei „layout_global.twig“, fügen Sie dann direkt vor dem Blockinhalt ({% Blockinhalt %}) den Text „TEST“ hinzu und klicken Sie auf die Schaltfläche. Sie können sehen, dass sich die Bezeichnung der Datei von „geerbt“ in „lokal“ geändert hat und die Schaltfläche jetzt eine einfache Schaltfläche „Änderungen speichern“ ist. [[File:After edition.png|center|''direkt nach dem Klicken auf die Schaltfläche'']] <br> Wenn Sie einen Datei-Explorer öffnen und in das Verzeichnis upload/themes/extends_monochrome/views/ gehen, werden Sie sehen, dass es nur eine Datei enthält, die Datei layout_global.twig, und dass dort die Zeichenfolge „TEST“ steht. [[File:Tree with layout global arrow.png|center|''Jetzt ist die Datei in Ihrem Theme vorhanden'']] <br><br> Jetzt fügen wir statt eines zufälligen Textes ein Bild hinzu. Wenn Sie auf den Tipp-Link klicken, wird Ihnen Folgendes angezeigt: <br> So verwenden Sie ein Bild in einer .twig-Datei: '''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}''' <br> Wenn Sie die Twig-Dokumentation gelesen haben (und dies an dieser Stelle hätten tun sollen), wissen Sie, dass '''{{ function( ) }}<nowiki /> ''' gibt das Ergebnis einer Funktion auf dem Bildschirm wieder. Hier ist die Funktion image( ). <div class="simplebox">[[File:help.png]] Wenn Sie wissen möchten, was es tut, können Sie es im Code hier finden (Version von RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 /application/core/LS_Twig_Extension.php#L219-L237 image()-Funktion in RC3] Wenn Sie den Code nicht verstehen: Machen Sie sich keine Sorgen, Sie müssen nicht wissen, wie es funktioniert, sondern warum Verwenden Sie es und wie Sie es verwenden. </div> <br> Sie sollten die Funktion image() aus zwei Gründen verwenden: * Die Funktion image durchläuft das Thema, um das Bild zu finden. Wenn das Thema, an dem Sie arbeiten, auf ein anderes Thema erweitert wird und Sie die Datei an die Stelle kopieren, an der Sie das Bild lokal eingefügt haben, dieses Bild jedoch nicht im lokalen Thema kopiert wird, durchläuft es den Vererbungsbaum des Themas, um herauszufinden, wo Dieses Bild ist. * Es wird den Asset-Manager verwenden, sodass die Leistung Ihres Themas verbessert wird. Weitere Informationen hierzu finden Sie in der Dokumentation zum Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/ <div class="simplebox"> Also, um ein Bild zu Ihrem Thema hinzuzufügen: * laden Sie es einfach wie gewohnt mit dem Datei-Uploader auf der rechten Seite hoch und fügen Sie es dann an der gewünschten Stelle in einer beliebigen Twig-Datei ein: '''{{ image('./files/myfile.png') }}''' * Wenn Sie einen alternativen Text für Ihr Bild hinzufügen möchten (für Screenreader und HTML-Validierung), fügen Sie Folgendes hinzu: {{ image('./files/myfile.png'), ''' 'my alternative text' ' '' }} * Wenn Sie ein Klassenattribut und eine ID hinzufügen möchten: {{ image('./files/myfile.png'), 'my alternative text', ''' {“class“: „a_nice_css_class ”, „id“: „any_id“} ''' }} </div> ====Einige Dinge auf unserer TO-DO-Liste==== * Geben Sie Benutzern die Möglichkeit, eine benutzerdefinierte Vorschaudatei aus dem Editor selbst hochzuladen * Fügen Sie eine Schaltfläche hinzu, um die lokale Datei zu löschen und zur zurückzukehren geerbte Anweisung * Kopieren Sie nur das in den CSS-Dateien verwendete Bild (indem Sie sie im Manifest als zu kopierende Datei auflisten) * Erinnern Sie daran, welches Theme das aktuelle erweitert (falls vorhanden) ==Themenoptionen== Eine weitere Neuheit von LS3 ist die Seite mit den Themenoptionen. Wie wir später sehen werden, können Theme-Ersteller ihre eigenen Optionen und sogar ihre eigene Admin-Optionsseite erstellen. Hier sehen wir schnell, wie die Optionsseite der Core Themes funktioniert. Um auf die Theme-Optionen auf globaler Ebene zuzugreifen: Klicken Sie in der Theme-Liste auf „Theme-Optionen“ ===Erweiterte Optionen=== {{QS:Theme-Editor – erweiterte Optionen}} <span id="Simple_options"></span> ===Einfache Optionen=== Die Optionsseite „Einfach“ stammt aus der Vorlage selbst. Es wird über eine Twig-Datei und etwas Javascript im /options-Verzeichnis des Themes erstellt: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Defekter Link) <div class="simplebox"> [[File:help.png]] Diese Seite kann von Theme zu Theme völlig unterschiedlich sein, und Theme-Anbietern wird dringend empfohlen, ihr eigenes Erscheinungsbild zu erstellen.</div> [[File:Options.png|thumb|750px|center]] <br><br> Auf der Seite mit den einfachen Optionen werden lediglich die erweiterten Formulareingaben ausgefüllt. Sie können es sehen, indem Sie eine Einstellung auf der einfachen Seite aktivieren oder deaktivieren und sehen, wie die entsprechende Eingabe im erweiterten Formular entsprechend geändert wird. Wenn Sie beispielsweise in den einfachen Optionen der Standardvorlage das Bootswatch-Design in „Dunkel“ ändern und dann auf die Registerkarte für erweiterte Optionen klicken (auch ohne Speichern), werden Sie sehen, dass sich das Feld „Cssframework Css“ geändert hat von {"replace": [["css/bootstrap.css","css/flatly.css"]]}<br> zu<br> {"replace": [["css/bootstrap.css","css/darkly.css"]]} <br> Hier sind die verschiedenen einfachen Optionen für die Core-Themen: *'''Ajax-Modus:''' Soll die nächste Seite über Ajax (schneller) oder per Seitenneuladen (besser für Debugging-Zwecke) geladen werden *'''Hintergrundbild:''' wenn auf Ja gesetzt, wird das Bild namens pattern.png geladen (wird durch einen Dateiselektor im Master ersetzt) *'''Box-Container:''' wenn Bei der Einstellung „Nein“ werden die Fragen nicht in einem Feld angezeigt (Sie können also große Arrays verwenden, die größer sind als die Bildschirmbreite). wird in der oberen Leiste angezeigt. Andernfalls können Sie eines der Bilder im Dateiverzeichnis auswählen, das als Logobild verwendet werden soll. *'''Körper animieren:''' Wenn auf Ja gesetzt, können Sie eine der Animationen auswählen anzuwenden, wenn der Hauptteil der Umfrage geladen wird *'''Frage animieren:''' Gleiches gilt für Fragen *'''Animierte Warnungen:''' Gleiches gilt für Warnungen *'''Bootstrap theme:''' Hier können Sie ein Bootstrap-Theme zum Laden auswählen. Sie kommen von Bootswatch https://bootswatch.com/3/ <br> Die für Animationen verwendete Bibliothek ist animate.css: https://daneden.github.io/animate.css/ Natürlich könnte ein Theme-Anbieter seine eigene Animationsbibliothek oder gar keine Animationsbibliothek hinzufügen. <div class="simplebox">[[File:help.png]] Die monochromen Designs verwenden dasselbe Bootstrap-Farbthema wie die Admin-Benutzeroberfläche. Sie verwenden nicht das CSS-Framework-Ersetzungssystem, sondern fügen einfach eine CSS-Datei hinzu. Es veranschaulicht also eine andere Möglichkeit, mit benutzerdefinierten Themes für Theme-Anbieter umzugehen.</div> <span id="Inheritance_system"></span> ===Vererbungssystem=== Im vorherigen Teil haben wir gesehen, dass ein Theme ein anderes Theme erweitern kann. Eine Theme-Konfiguration kann auch von einer anderen Theme-Konfiguration erben. Das bedeutet, dass Sie für ein bestimmtes Thema eine Konfiguration vornehmen können auf * globaler Ebene (die wir gerade über die Themenliste gesehen haben) * auf Umfragegruppenebene * eine letzte auf Umfrageebene. Jeder Parameter auf einer bestimmten Ebene kann von der oberen Ebene erben: Vererbung der Umfragegruppe. Sehen wir uns zunächst die Umfragegruppenebene an. <span id="At_survey_group_level"></span> ====Auf Umfragegruppenebene==== Tatsächlich ist eine der anderen großen Neuheiten von LS3 das Umfragegruppensystem. Sie können jetzt verschiedene Gruppen erstellen, um Ihre Umfragen zu organisieren. Um darauf zuzugreifen, gehen Sie zur Umfrageliste und klicken Sie dann auf die Registerkarte „Umfragegruppe“: [[File:Surveygroup.png|thumb|800px|center|''Die Registerkarte „Umfragegruppen“]] <br> In dieser Liste gibt es zwei Aktionsschaltflächen. Wenn die Gruppe leer ist, können Sie sie löschen. Ansonsten können Sie es jederzeit bearbeiten. Durch Klicken auf die Schaltfläche „Bearbeiten“ gelangen Sie zur Konfigurationsseite der Umfragegruppe: [[File:Surveygroupedit.png|thumb|800px|center|''Editing Default Survey Group'']] <br> Die dritte Registerkarte dieser Seite heißt „Vorlagenoptionen für diese Umfragegruppe“. Wenn Sie darauf klicken, sehen Sie die gleiche Themenliste wie in der Themenliste, mit der Ausnahme, dass hier nur die Optionsschaltfläche sichtbar ist (der Themeneditor ist nur über die Hauptliste erreichbar). <br> Wenn Sie nun auf die Option „Standardvorlage“ klicken, sehen Sie Folgendes: [[File:Option group inherit.png|thumb|800px|center|''Bei der Umfragegruppe werden die Vorlagenoptionen vererbt standardmäßig'']] <br> * '''Alles erben''' bedeutet, dass die gesamte Konfiguration von der globalen Konfigurationsebene geerbt wird. * Wenn Sie zur Seite „Erweiterte Optionen“ gehen, werden Sie sehen, dass alle Felder auf „Erben“ eingestellt sind. * Wenn Sie in der „Alles erben“ auf „Nein“ klicken Wenn Sie einfache Optionen auswählen, wird wieder eine Seite angezeigt, die der Seite mit den globalen Optionen sehr ähnlich ist. Der einzige Unterschied besteht darin, dass Sie für jedes Feld die Option „Ja“, „Nein“ oder „Erben“ festlegen können. und jeder Dropdown-Selektor hat einen „erben“-Wert. [[File:Inherit group.png|thumb|800px|center|''Jede Einstellung kann einen geerbten Wert haben'']] <div class="simplebox">[[File:help.png]] Eine Umfragegruppe kann einer anderen Gruppe untergeordnet sein. In diesem Fall erbt es von seinem übergeordneten Element.</div> ====Auf Umfrageebene==== Wenn Sie eine Umfrage bearbeiten, sehen Sie im Menü der linken Leiste einen neuen Eintrag „Themenoptionen“. Sie gelangen zur Optionsseite des für die aktuelle Umfrage ausgewählten Themas. Sie finden das gleiche Vererbungssystem wie in der Umfragegruppe vor, aber dieses Mal bedeutet „Vererben“, dass die Einstellung von der Umfragegruppe der Umfrage geerbt wird. [[File:Options survey.png|thumb|800px|center|''Themenoptionen auf Umfrageebene'']] ==Anwendungsfallbeispiel== Angenommen, Sie verwenden ein einzelnes Theme für verschiedene Unternehmen (A und B). Sie legen Ihre Favoritenoptionen auf globaler Ebene fest (z. B. Ajax ein, Körper mit einem Slide-In animieren, Warnungen mit einem Puls). Anschließend erstellen Sie für jedes Unternehmen eine Umfragegruppe: eine Umfragegruppe für Unternehmen A, die alle Umfragen für dieses Unternehmen hostet, und eine Umfrage für Unternehmen B, die alle Umfragen für Unternehmen B hostet. Auf dieser Ebene legen Sie fest Nur das Logo und der Hintergrund, die anderen Optionen werden übernommen. Daher verwenden alle Umfragen in Gruppe A das Logo von Unternehmen A und alle Umfragen in Gruppe B das Logo von Unternehmen B. Für eine der Umfragen von Unternehmen A könnten Sie einen anderen Hintergrund in Bezug auf das Thema verwenden der Umfrage: Sie ändern lediglich den Hintergrund in den Optionen auf Umfrageebene. Wenn Ihnen jemand in Unternehmen B mitteilt, dass der pulsierende Alarm zu aggressiv ist und er etwas Sanfteres wie eine Einblendung bevorzugen würde, ändern Sie einfach die Alarmanimation auf der Ebene der Umfragegruppe B und alle Umfragen dieser Gruppe verwenden nun diese Animation. Wenn das Unternehmen A sein Logo ändert, können Sie es auf der Ebene der Umfragegruppe A ändern und alle Umfragen dieser Gruppe verwenden das neue Logo. <br> <div class="simplebox"> Diese Beispiele basieren auf den aktuellen Optionen des Kernthemas. Aber wenn Sie ein Theme-Anbieter sind oder ein wenig mit Twig Skripten erstellen können, können Sie natürlich Ihre eigenen Optionen hinzufügen. Sie könnten beispielsweise eine Option „Info-Fußzeile“ hinzufügen, in der Sie Daten wie die Website des Unternehmens oder eine Telefonnummer für Hilfe hinzufügen können. Wenn Unternehmen A dann verschiedene Abteilungen mit unterschiedlichen Telefonnummern hat, können Sie einfach eine Untergruppe für jede Abteilung in Umfragegruppe A erstellen. Jede Untergruppe hat in diesen Optionen ihre eigene Telefonnummer.</div> <span id="FAQ_about_theme_customization"></span> = FAQ zur Theme-Anpassung = Hier finden Sie einige Antworten auf Fragen, die im Forum gestellt wurden und die Ihnen bei der Anpassung Ihres Themes helfen könnten. ==CSS/JS anpassen: mit dem Vermögensverwalter absprechen („Warum werden meine Änderungen nicht übernommen?“) == <br /> Wenn Sie versuchen, das CSS/JS eines Themes zu aktualisieren, indem Sie den Code direkt mit Ihrem bevorzugten Editor bearbeiten, könnten Sie überrascht sein, dass Ihre Änderungen nicht übernommen werden. <br /> Seit 2.50 verwendet LS den Yii Asset Manager: [http://www.yiiframework.com/wiki/148/understanding-assets/ Yii Documentation about Assets] <br /> Es verschiebt die CSS/JS-Dateien eines Themes in ein tmp/-Unterverzeichnis mit einer zufälligen Zeichenfolge (z. B. „tmp/1ef64ml/“). Wenn Sie also eine Änderung an einer CSS/JS-Datei vornehmen und diese dem Asset-Manager mitteilen, werden die Dateien in ein neues Unterverzeichnis mit einem neuen Namen kopiert, sodass der Cache des Benutzerbrowsers aktualisiert wird und ihm das neue CSS/JS angezeigt wird . Andernfalls müssten sie ihren Browser-Cache leeren. <br /> Hier die CSS-Links im Header, wenn der Vermögensverwalter aktiviert ist: <br /> [[File:Assets on Vanilla.jpg]] <br /> Wie Sie sehen, beziehen sich alle auf die Unterordner tmp/. <br /> Hier die CSS-Links im Header, wenn der Asset Manager ausgeschaltet ist: <br /> [[File:Asset off.png]] <br /> Wie Sie sehen, verweisen sie auf die echten Dateien des Themas. <br /> <div class="simplebox">[[File:help.png]] Wenn der Asset Manager nicht weiß, dass Sie die Datei geändert haben, bleibt die alte Datei aus dem alten tmp/Verzeichnis natürlich unverändert und Ihre Änderungen werden nie übernommen.</div> Wenn Sie also CSS/JS eines Themes bearbeiten, haben Sie verschiedene Möglichkeiten: *'''Sie können den LS Theme Editor verwenden:''' Er kümmert sich um den Asset Manager und Sie müssen es nicht tun Sorgen Sie sich um alles *'''Sie können den Debug-Modus aktivieren:''' Dadurch wird der Asset Manager deaktiviert, sodass die echten CSS/JS-Dateien Ihrer Themes aufgerufen werden (aber dann müssen Sie Ihren Browser-Cache aktualisieren bei jedem Ladevorgang) *'''Sie können den Asset-Cache aktualisieren''': über Globale Einstellungen -> Allgemein -> Asset-Cache löschen [[File:Clearassets-ls3 3.png]] <div class="simplebox">[[File:help.png]] '''Die Verwendung des Theme-Editors zum Bearbeiten des benutzerdefinierten CSS ist bei weitem die beste Lösung.'''</div> Die Verwendung des Theme-Editors wird Ihnen helfen, die Architektur der neuen Theme-Engine zu verstehen. Außerdem sollten Sie bei der Anpassung von Fruity vorsichtig mit der CSS-Spezifität sein: Die meisten Definitionen verwenden den Selektor „.fruity“ (eine der Klasse von das Körperelement). == Benutzerdefinierte Schriftarten zu meinem Theme hinzufügen == === Der einfache Weg: mit Google Font CDN === Bootswatch Survey Theme verwendet Google Font CDN. Schauen wir uns an, wie es funktioniert: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css <syntaxhighlight lang="css"> @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); </syntaxhighlight> Dann wird über CSS-Regeln die Lato-Schriftart verwendet: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 <syntaxhighlight lang="css"> body { ... Schriftfamilie: „Lato“; ... } </syntaxhighlight> Auf diese Weise können Sie in Ihrem benutzerdefinierten Design jede beliebige Google-Schriftart verwenden. Natürlich sollten Sie die Schriftartenauswahl aus den Optionen Ihres Themes entfernen. Löschen Sie diese Zeilen in options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230 === Lokale Schriftart verwenden === Natürlich können Sie die Schriftartdateien auch herunterladen und vom lokalen Server statt vom Google CDN verwenden (besser aus Datenschutzgründen). Um ein Beispiel dafür zu haben, hier unsere lokale Version der Noto-Schriftart: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css <syntaxhighlight lang="css"> @font-face { Schriftfamilie: 'Noto Sans'; Schriftstärke: 300; Schriftstil: normal; src: url('./font-src/Noto/NotoSans-Regular.ttf'); } ... </syntaxhighlight> Sie können eine sehr ähnliche Definition in Ihrer Theme-CSS-Datei verwenden und dann die Datei NotoSans-Regular.ttf in Ihren Theme-Ordner css/font-src/ kopieren. Wenden Sie diese Schriftart dann wie oben beschrieben auf Ihren Körper (oder ein anderes Element) an und entfernen Sie die Standardoption für die Schriftartenauswahl. === Erstellen Sie Ihre eigene Schriftartenauswahl in den Optionen === Im Moment können Sie die Kernschriftauswahl nicht einfach verwenden, um Ihre eigene Schriftart in den Optionen hinzuzufügen. Wir müssen dem Endbenutzer zunächst die Möglichkeit geben, benutzerdefinierte Pakete hochzuladen (siehe nächster Absatz: Ein Blick in den Fruity Font Selector) <br> So gehen Sie vor: <br> *Fügen Sie zwei Schriftarten (my_custom_font und my_custom_other_font) zu Ihrem Theme hinzu, indem Sie CDN oder einen lokalen Server verwenden. *Dann fügen Sie in Ihrer CSS-Datei zwei neue Klassen hinzu: <br> <syntaxhighlight lang="css"> .font-my_custom_font { Schriftfamilie: 'my_custom_font '; } .font-my_custom_other_font { Schriftfamilie: 'my_custom_other_font'; } </syntaxhighlight> *Fügen Sie in der XML-Datei Ihres Themes eine Schriftartoption hinzu (Standard ist my_custom_font) : <syntaxhighlight lang="xml"> <options> .... <font>my_custom_font</font> </options> </syntaxhighlight> * Fügen Sie in option.twig Ihre Schriftartenauswahl hinzu und fügen Sie diese Zeilen hinzu (noch nicht getestet, also beschweren Sie sich im Forum, wenn es nicht funktioniert): <syntaxhighlight lang="html"> <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'> <hr/> </div> <div class='row action_hide_on_inherit'> <div class='col-sm-12'> <div class='panel panel-default'> <div class='panel-heading'> {{ „Meine benutzerdefinierten Schriftarten“ | T }}</div> <div class='panel-body'> <div class='form-group row'> <label for='simple_edit_font' class='control-label'>{{ „Schriftart auswählen:“ | t }}</label> <div class='col-sm-12'> <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Sollte das nicht „theme“ statt „template“ sein? {% set FontOptions = FontOptions ~ '<option value = "inherit" > Erben</option> ' %} {% endif %} <optgroup label="{{ "My Custom fonts" | t }}"> <option class="font-my_custom_font" value="custom_font" data-font-package="" > Brauch</option> <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" > Andere</option> </optgroup> </select> </div> </div> </div> </div> </div> </div> </syntaxhighlight> <br> Jetzt sollten Ihre Benutzer zwischen diesen beiden Schriftarten wählen können. === Ein Blick in den Fruity Font Selector === In Zukunft werden wir Endbenutzern die Möglichkeit geben, ihre eigenen Asset-Pakete, einschließlich Schriftartenpakete, hochzuladen. Dadurch wird die Anpassung von Schriftarten sehr einfach. <br> Um Yii-Pakete zu verstehen: <br> http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail <br> <br> LimeSurvey-Pakete werden in verschiedenen Dateien definiert. Schriftartenpakete werden hier definiert: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php <br> Zum Beispiel ist das Noto-Schriftartenpaket hier definiert: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53 <br> <syntaxhighlight lang="php"> 'font-noto' => array( 'devBaseUrl' => 'assets/fonts/', 'basePath' => 'fonts', 'css' => array( ' noto.css', ), ), </syntaxhighlight> <br> Die darin enthaltene noto.css-Datei befindet sich hier: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css <br> Beachten Sie die Definition der CSS-Klasse „.font-noto“ am Ende: <syntaxhighlight lang="css"> @font-face { Schriftfamilie: 'Noto Sans'; ... } ... .font-noto{ Schriftfamilie: 'Noto Sans'; } </syntaxhighlight> <br> Dann wird im Vanilla Theme die Noto-Schriftart verwendet, indem das Noto-Paket hinzugefügt und die Schriftartoption für noto: definiert wird.<br> https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 <syntaxhighlight lang="xml"> <packages> .... <add> Schriftart-Noto</add> </packages> </syntaxhighlight > https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 <br> <syntaxhighlight lang="xml"> <options> .... <font>noto</font> </options> </syntaxhighlight> <br> Dann wird die Schriftart der Body-Klasse mit diesem Wert definiert: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76 <syntaxhighlight lang="html"> <body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... > </syntaxhighlight> Natürlich enthält die XML-Datei nur die Standardwerte für Ihre Theme-Konfiguration. Aber tatsächlich werden diese Werte in der Datenbank (Tabelle „template_configuration“ (Frage: „template_“ von „theme_“?) als JSON-Strings definiert und gelesen. Die Datei option.js verwendet einfach den Wert des Schriftartenselektors der einfachen Option So ändern Sie den Wert im erweiterten Tabulatorformular: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174 Wenn also die Funktion „Asset-Paket hochladen“ verfügbar sein wird, ist es einfach, ein Skript hinzuzufügen, das alle vorhandenen Schriftartenpakete scannt, um sie zur Auswahl hinzuzufügen. == Hinzufügen von Designoptionen zur Steuerung der Positionierung und Anzeige von Umfrageelementen == Dieses Tutorial zeigt, wie Sie Optionen zu einem erweiterten Design hinzufügen, um Umfrageelemente an verschiedenen Orten anzuzeigen. In diesem Fall erstellen wir Themenoptionen, um den Umfragetitel an zwei verschiedenen Orten anzuzeigen. <div class="simplebox"> [[File:help.png]] Der Einfachheit halber basieren wir das Tutorial auf einer Erweiterung des „Bootswatch“-Themas in LimeSurvey Version 3.4.3.</div> === Erstellen Sie ein benutzerdefiniertes Theme === #Erweitern Sie das „Bootswatch“-Theme wie oben beschrieben. #Kopieren Sie „ <span style="color: #BA2121;">custom.css“</span> wie oben beschrieben in das lokale Theme. ===Erstellen neuer Theme-Optionen=== #Kopieren Sie den Inhalt von <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> nach <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> . #Öffnen Sie <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> in einem Editor und suchen Sie nach „{# Bootstrap Bootswatch theme #}“. Direkt vor seinem übergeordneten Element<nowiki><div class='row'></nowiki> Element, fügen Sie Folgendes hinzu:<syntaxhighlight lang="html"> {# Benutzerdefinierter Umfragename in der Navigationsleiste #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Umfragename in der Navigationsleiste</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Ja n!</label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Nicht!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Name der benutzerdefinierten Umfrage unter Fortschrittsbalken #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Umfragename unter Fortschrittsbalken</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Ja n!</label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Nicht!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div></syntaxhighlight> #Öffnen Sie <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> und fügen Sie zwei Elemente zum Block „Optionen“ hinzu, sodass es so aussieht:<syntaxhighlight lang="xml"><options> <ajaxmode> An</ajaxmode> ... <surveyname1> An</surveyname1> <surveyname2> An</surveyname2> </options></syntaxhighlight> #Dies sollte Ihnen zwei neue Optionen im Bildschirm „Themenoptionen“ wie folgt bieten:<br /> [[File:Tutorial_tp_1_1.png]] ===Geänderte Ansicht für den Umfragetitel in der Navigationsleiste === #Erstellen Sie ein neues Verzeichnis <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/</span> . #Kopieren Sie <span style="color: #BA2121;">/themes/survey/vanilla/ views/subviews/header/nav_bar.twig</span> in das neue Verzeichnis. #Öffnen Sie <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> und suchen Sie nach „{# Logo option #}“. Ändern Sie darunter die IF-Anweisung für das Logo/den Umfragenamen, sodass sie wie folgt aussieht:<syntaxhighlight lang="html"> {# Logo-Option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %}</syntaxhighlight> #Fügen Sie so etwas zu <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> hinzu:<syntaxhighlight lang="css"> .navbar-brand { Zeilenhöhe: 60px; Schriftgröße: 32px; }</syntaxhighlight> #Schalten Sie die Designoption „Umfragename in der Navigationsleiste“ auf „Ja“ #Sie sollten Folgendes sehen:<br /> [[File:Tutorial_tp_1_2.png]] ===Geänderte Ansicht für Umfragetitel unter Fortschrittsbalken=== #Erstellen Sie ein neues Verzeichnis <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> . #Kopieren Sie <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> in das neue Verzeichnis. #Öffnen <span style="color: #BA2121;">Sie /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> und fügen Sie eine hinzu<nowiki><h1></nowiki> Element für den Umfragenamen. Es sieht also so aus: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Benutzerdefinierter Umfragename #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> {% endif %} {# Gruppenname #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Gruppenbeschreibung #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# PRÄSENTIEREN SIE DIE FRAGEN Dies ist der Hauptteil. Es wird jede Frage für diese Gruppe gerendert #} <!-- PRESENT THE QUESTIONS --> {% für eine Frage in aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div></syntaxhighlight> # Fügen Sie so etwas zu <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> hinzu:<syntaxhighlight lang="css"> .navbar-brand { Zeilenhöhe: 60ph1.custom-survey-name { Rand: 0; text-align: center; }</syntaxhighlight> #Schalten Sie die Designoption „Umfragename unter Fortschrittsbalken“ auf „Ja“ #Sie sollten Folgendes sehen:<br /> [[File:Tutorial_tp_1_3.png]] ===Downloads=== * Beispiel für ein erweitertes Theme: [[Media:Test_survey_names.zip]] =Erstellen eines Themes von Grund auf= Dokumentation folgt in Kürze. Im Moment möchte ich nur ein paar Tipps geben. <span id="Theme_structure"></span> ==Themenstruktur== === Dateien und Verzeichnisse === Wenn Sie ein Theme von Grund auf erstellen, müssen Sie die Datei-/Verzeichnisstruktur/css/js von Vanilla nicht berücksichtigen. Das obligatorische CSS/JS wird vom Kern hinzugefügt (Sie können es bei Bedarf trotzdem entfernen) Die einzigen Dateien, die Ihr Theme haben muss, sind die Layoutdateien: * '''layout_global.twig''': Rendern Sie die Seiten für die Umfrage * '''layout_survey_list.twig''': Rendern Sie die Umfrageliste (wenn dieses Thema als Standard festgelegt ist) * '''layout_errors.twig''': wird zum Rendern von Fehlern verwendet, die das Rendern von Umfragen blockieren. (falsche Umfrage-ID, leere Gruppe in der Vorschaugruppe usw.) * '''layout_user_forms.twig''': Rendert die Benutzerformulare wie: Token (Umfrageteilnehmer) und registrieren. * '''layout_print.twig''': wird zum Drucken der Umfrage als PDF verwendet * '''layout_printanswers.twig''': zum Drucken der Antworten Der Inhalt dieser Dateien, ob sie enthalten sind oder nicht, liegt ganz bei Ihnen. Alle anderen Dateien und Verzeichnisse, die Sie auf Vanilla finden, sind rein optional. Sie können Ihren Code gerne nach Ihren Wünschen organisieren. <div class="simplebox">[[File:help.png]] Wenn Sie den Frontend-Rendering-Code lesen, werden Sie feststellen, dass die Namen dieser Dateien direkt darin erscheinen. Deshalb sind sie obligatorisch. ZB: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462 </div> <span id="Content"></span> === Inhalt === In der Datei „layout_global.twig“ von Vanilla sehen Sie, dass wir eine Variable namens „include_content“ verwenden, um zu entscheiden, was angezeigt werden soll! layout_global.twig#L114-L115 <syntaxhighlight lang="php"> {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %} {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %} </syntaxhighlight> aSurveyInfo.include_content sagt Ihnen, welche Aktion gerade stattfindet: Fragen anzeigen? Wird das Absendeergebnis angezeigt? Alles klar angezeigt? etc Wie Sie sehen können, erstellen wir in Vanilla eine Datei, die per Aktion eingebunden wird. Wenn Sie also die Liste der Aktionen wissen möchten, überprüfen Sie einfach das Vanilla-Verzeichnis '''views/subviews/content'' und entfernen Sie die Erweiterung "twig" : https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content * '''clearall.twig''' * '''firstpage.twig''' * '''load.twig''' * '''mainrow.twig''' * '''main.twig''' * '''optin.twig''' * '''optout.twig''' * '''outerframe.twig''' * '''printanswers.twig''' * '''quotas.twig''' * '''register.twig''' * '''save.twig''' * '''submit_preview.twig''' * '''submit.twig''' * '''userforms.twig''' Wenn Sie sie bereits für 2.x-Versionen von LimeSurvey erstellt haben, werden Sie feststellen, dass die meisten davon den alten PSTPL-Dateien für LimeSurvey 2.x entsprechen. Auch hier besteht für Sie in Ihrem Theme keine Verpflichtung, diese Dateien mit diesen Namen in diesem Verzeichnis zu erstellen. Sie könnten beispielsweise einfach einen riesigen Schalter in „layout_global.twig“ mit dem gewünschten HTML für jede Aktion hinzufügen. <span id="The_manifest_config.xml"></span> === Das Manifest config.xml === Das Manifest des Themes enthält die wichtigsten Informationen zu Ihrem Theme. Wenn Sie ein Theme installieren, wird der Inhalt des Manifests in zwei verschiedene Tabellen in die Datenbank geladen: template und template_configuration. Jedes Mal, wenn Sie das Manifest eines Themas ändern, müssen Sie es deinstallieren und neu installieren (oder einfach zurücksetzen). Da dieser Prozess beim Entwickeln eines Themes lästig ist, können Sie die direkte Verwendung der XML-Datei anstelle der DB-Einträge erzwingen. Aktivieren Sie dazu in config.php den Debug-Modus und setzen Sie „force_xmlsettings_for_survey_rendering“ auf „true“. <span id="The_metadata_section"></span> ==== Der Metadatenabschnitt ==== Nichts Komplexes: nur die wichtigsten Informationen zu Ihrem Thema. Es wird in die Tabelle templates_configuration verschoben <syntaxhighlight lang="xml"> <metadata> <name> the_name_of_your_theme</name> <title> Der Titel Ihres Themas</title> <creationDate> 16.10.2017</creationDate> <author> Ihren Namen</author> <authorEmail> your@email.org</authorEmail> <authorUrl> http://www.yourwebsite.org</authorUrl> <copyright> Ihr Urheberrecht</copyright> <license> Lizenz Ihres Themes</license> <version> Version Ihres Themes</version> <apiVersion> 3</apiVersion> <description> Beschreibung Ihres Themas</description> <extends> parent_theme</extends> </metadata> </syntaxhighlight> Einige Anmerkungen: * '''name''': wird als Schlüssel in der Datenbank verwendet. Es muss also eindeutig sein und darf keine Sonderzeichen (keine Leerzeichen) enthalten. Beachten Sie, dass Groß- und Kleinschreibung nicht berücksichtigt wird * '''Titel''': wird verwendet, um Ihren Themennamen in den verschiedenen Listen anzuzeigen. Es kann Sonderzeichen enthalten * '''Beschreibung''': wird in der Hauptliste des Umfragethemas verwendet. Es kann Sonderzeichen und sogar HTML-Code enthalten, indem * '''extends''' verwendet wird: optional, es definiert die übergeordneten Themen. Wenn also eine Datei in diesem Theme nicht vorhanden ist (twig/js/css/jpg usw.), wird im übergeordneten Theme danach gesucht <div class="simplebox">[[File:help.png]] Wenn Sie eines der drei Kernthemen (Vanilla, Bootswatch, Fruity) erweitert haben, können Sie den Wert „extends“ von einem übergeordneten Thema zum anderen ändern. Natürlich müssen Sie das Theme zurücksetzen.</div> <span id="The_files_section"></span> ==== Der Dateibereich ==== Dies ist ein wichtiges. Es wird in die Tabelle template_configuration, in die Felder files_css, files_js, files_print_css als JSON-Arrays gepusht. Beispiel: der Dateibereich des Material Premium Themes: <syntaxhighlight lang="xml"> <files> <css> <add> css/bootstrap-material-design.css</add> <add> css/ripples.min.css</add> <replace> css/ajaxify.css</replace> <replace> css/theme.css</replace> <replace> css/custom.css</replace> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </css> <js> <replace> scripts/theme.js</replace> <replace> scripts/ajaxify.js</replace> <add> scripts/material.js</add> <add> scripts/ripples.min.js</add> <replace> scripts/custom.js</replace> </js> <print_css> <add> css/print_theme.css</add> </print_css> </files> </syntaxhighlight> Alle in diesem Abschnitt vorhandenen CSS/JS-Dateien werden beim Start der Umfrage geladen (im Ajax-Modus. Wenn der Ajax-Modus deaktiviert ist, werden natürlich alle Dateien auf jeder Seite neu geladen). Sie werden basierend auf dem Namen des Themas einem Yii-Asset-Paket hinzugefügt. Wenn Asset Manager also aktiviert ist (Debug-Modus deaktiviert), werden diese Dateien zusammen mit dem Rest des Themes in das tmp-Verzeichnis kopiert (Sie können also relative Pfade in CSS und JS verwenden, um auf die Bilddateien zuzugreifen). Über den Asset Manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets Über Pakete in Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail Sie werden das Vererbungssystem nutzen. Das heißt, wenn Sie einem Theme eine CSS/JS-Datei hinzufügen, diese aber nicht im Theme vorhanden ist, dann prüft die Engine alle Mutterthemes dieses Themes und verwendet das erste, das sie findet. Wenn also ein Benutzer Ihr Theme über den Theme-Editor erweitert, werden alle diese Dateien in sein Theme übernommen. Die Schlüsselwörter beziehen sich auf dieses Vererbungssystem. * '''add''': Die Datei wird dem Theme und allen seinen geerbten Themes hinzugefügt * '''replace''': Die Datei wird durch die Datei des Mutter-Themes ersetzt * '''remove''': Die Datei wird aus „jedem“ Paket entfernt, sogar aus dem Kernpaket (seit 3.14). <div class="simplebox">[[File:help.png]] Denken Sie daran, dass Sie in config.php „force_xmlsettings_for_survey_rendering“ festlegen können, sodass die Konfiguration aus XML statt aus der Datenbank gelesen wird (kein Zurücksetzen erforderlich). Dies erleichtert das Testen der Änderungen an den XML-Dateien und erspart Ihnen die Deinstallation/Neuinstallation des Designs bei jeder Änderung der XML</div> Einige Anmerkungen zu diesen Schlüsselwörtern: ===== Vererbungstipps ===== Wie bereits erläutert, kann sich das Schlüsselwort „add“ auf eine Datei beziehen, die sich in einem der Mutterthemen befindet. Sie können also in diesem Abschnitt eine Datei „hinzufügen“ und haben diese Datei trotzdem nicht in Ihrem Theme, sondern in einem ihrer übergeordneten Themes. Die Engine untersucht alle übergeordneten Themes und verwendet das erste, das sie findet. Wenn die Datei nicht gefunden werden kann und der Debug-Modus in der Konfiguration aktiviert ist und der JS-Frontend-Debug-Modus in der globalen Einstellung aktiviert ist, werden Sie in einer Meldung in der Konsole gewarnt. Beispiel: Wenn wir ein my_theme hinzufügen:<add> css/unexisting.css</add> , in der Konsole sehen wir: <syntaxhighlight lang=""> (¯`·._.·(¯`·._.· Theme-Konfigurationsfehler ·._.·´¯)·._.·´¯) Die im Theme „my_theme“ definierte Datei „css/unexisting.css“ kann nicht gefunden werden </syntaxhighlight> Wenn der Debug-Modus ausgeschaltet ist, wird überhaupt kein Fehler angezeigt. Die Engine ignoriert einfach die falschen Add-Anweisungen. <span id="When_to_use_add,_when_to_use_replace,_when_can_I_just_leave_it_to_the_parent_theme?"></span> ===== Wann verwende ich „add“, wann „replace“ und wann kann ich es einfach dem übergeordneten Theme überlassen? ===== Erstens: Hinzufügen und Ersetzen sind genau das gleiche Schlüsselwort. Sie können das eine oder das andere verwenden, die Engine macht einfach das Gleiche. Sie sind für menschliche Leser deutlich erkennbar, sodass sie verstehen, was Ihre Absicht war. Sie können keine Datei mit demselben Namen wie das Mutterthema hinzufügen: Sie wird immer ersetzt. Beispiel: Wenn Sie eine Datei mit dem Namen „my_mother_theme/foo.css“ haben und dem Tochterthema eine Datei mit dem Namen „foo.cs“ hinzufügen, wird nur „daughter_theme/foo.css“ zum Thema hinzugefügt. Wenn Sie „my_mother_theme/foo.css“ behalten möchten, wählen Sie einfach einen anderen Namen für „daughter_theme/foo.css“, z. B. „daughter_theme/bar.css“. Das Schlüsselwort „add“ kann also als Schlüsselwort „replace“ verwendet werden. Wenn Sie sich fragen, warum: Dadurch wird die automatische Generierung des geerbten Designs erheblich vereinfacht. Das Kopieren des Dateiabschnitts funktioniert sofort (es ist nicht erforderlich, „add“ in „replace“ umzubenennen, wenn Sie die Datei erweitern). Nehmen wir zur Verdeutlichung das Fruity-Beispiel. Hier der CSS-Dateiabschnitt: <syntaxhighlight lang="xml"> <css> <add> css/variations/sea_green.css</add> <replace> css/animate.css</replace> <replace> css/theme.css</replace> <replace> css/custom.css</replace> </css> </syntaxhighlight> Wenn Sie sich die Datei „custom.css“ in Fruity ansehen, ist sie genau die gleiche wie die Vanilla-Datei. Wir könnten die Datei „custom.css“ in Fruity löschen, die von Vanilla würde geladen. Wir könnten die Aussage entfernen<replace> Benutzerdefinierte CSS</replace> Aus dem Fruity-Manifest wird die Anweisung von Vanilla verwendet und die Datei „Vanilla Custom.css“ wird geladen. Warum verwenden wir also die Aussage?<replace> Benutzerdefinierte CSS</replace> im fruchtigen Manifest? Die Antwort ist einfach: Weil wir möchten, dass der Endbenutzer das Fruity-Theme erweitern, die Datei in seinem lokalen Theme ändern und diese geänderte Datei aus seinem geerbten Theme laden kann. Um es zu verstehen, erweitern Sie einfach „fruchtig“ und werfen Sie einen Blick auf das erweiterte Thema. Das erweiterte Theme verfügt nicht einmal über die Datei „custom.css“. Es wird also die fruchtige Variante verwendet. Aber: Wenn der Benutzer diese Datei im erweiterten Theme erstellt (indem er im Theme-Editor auf „erweitern“ klickt), dann wird diese Datei aus seinem Theme geladen. Also im Allgemeinen: Wenn Sie ein Theme von Grund auf erstellen und kein Theme erweitern, verwenden Sie einfach die Add-Anweisung, um Ihre CSS/JS-Dateien hinzuzufügen. Kinderleicht. wenn Sie ein Theme erstellen, das ein anderes Theme erweitert, und Sie nicht möchten, dass die Benutzer die CSS/JS-Datei vom Mutter-Theme erweitern können: Verwenden Sie nicht die Add-Anweisung in Ihrem Manifest. Die Dateien werden weiterhin aus der Konfiguration des Mutterthemas geladen. Wenn Sie ein Thema erstellen, das ein anderes Thema erweitert, und Sie eine Datei aus dem Mutterthema ersetzen möchten: Verwenden Sie das Schlüsselwort „replace“ (das Schlüsselwort „add“ führt zum gleichen Ergebnis). Wenn Sie ein Theme erstellen, das ein anderes Theme erweitert, wenn Sie eine bestimmte Datei aus CSS/JS nicht ersetzen, Sie aber möchten, dass die Benutzer diese Datei erweitern können: Dann verwenden Sie die „replace“-Anweisung in Ihrem Manifest für Diese Datei. Selbst wenn Sie die Datei nicht ersetzen, erlauben Sie dem Benutzer durch die Verwendung des Schlüsselworts „replace“ im Manifest, dies zu tun, wenn er es möchte. Nur dieser allerletzte Fall erfordert ein wenig mentale Gymnastik, um ihn zu verstehen, alle anderen Fälle sind trivial. <div class="simplebox">[[File:help.png]] Sie können CSS- und JS-Dateien auch direkt aus dem Twig-Code registrieren. Diese Dateien werden nur geladen, wenn die Twig-Datei angefordert wird. Wenn Sie möchten, dass die Benutzer diese JS/Css-Dateien vom Theme-Editor erben können, denken Sie daran, die Funktionen {{registerTemplateCssFile('my_style.css')}} und {{registerTemplateScript('my_script.js')}} zu verwenden. . Wenn Sie diese Funktionen nicht verwenden, funktioniert Ihr Theme möglicherweise, aber die Vererbung wird unterbrochen. Es ist die gleiche Logik wie die Funktion {{image('my_picture.jpg')}} </div> <span id="The_remove_keyword"></span> ===== Das Schlüsselwort „remove“ ===== Das Schlüsselwort „remove“ ist erst seit 3.14 verfügbar. Mit diesem können Sie jedes CSS/jede Datei aus jedem Paket entfernen, sogar aus den Kernpaketen. Es wird im Material Premium Theme verwendet, um die Dateien der Awseome Bootstrap Checkbox zu entfernen: <syntaxhighlight lang="xml"> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </syntaxhighlight> Daher sollten Sie die gleiche Syntax wie die Datei des Pakets verwenden (z. B. „awesome-bootstrap-checkbox.css“ allein ohne den Ordnerpfad würde nicht funktionieren). Die vollständige Liste der Kernpakete und ihrer Dateien finden Sie in /application/config/packages.php und config/third_party.php. Zum Beispiel für awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56 <syntaxhighlight lang="php"> 'css'=> array( 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css', ), </syntaxhighlight> Eine andere Möglichkeit, den genauen Namen zu finden, der im Remove-Tag verwendet werden soll, besteht darin, den Asset Manager zu aktivieren (den Debug-Modus auszuschalten oder „use_asset_manager“=>true in der Konfiguration festzulegen). Dann ist der zu verwendende Pfad derjenige direkt nach dem zufälligen Verzeichnis im tmp-Verzeichnis. Zum Beispiel für awesome-bootstrap-checkbox.css: <syntaxhighlight lang="html"> <link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" /> </syntaxhighlight> Dateien, die Sie nicht entfernen sollten: '''jquery-3.1.1.min.js''': erforderlich '''jquery-migrate-3.0.0.min.js''': erforderlich '''survey.js''': erforderlich '''moment-with-locales.min.js''': Wird für den Fragetyp „Datum“ benötigt (und einige andere, denke ich) '''em_javascript.js''': Wird für alle ExpressionScript-Javascripts benötigt <span id="The_options_section"></span> ==== Der Optionenabschnitt ==== Dieser Abschnitt bezieht sich auf die Option Ihres Themas. Es wird verwendet, um die abgelegten „Optionen“ der Tabelle „template_configuration“ als JSON-Array einzuspeisen. <span id="Further_information"></span> === Weitere Informationen === * [[Thema:Verfügbare Funktion]] <span id="Some_notes"></span> == Einige Anmerkungen == '''HINWEIS''': Wenn Sie die XML-Datei eines Themes bearbeiten, müssen Sie das Theme deinstallieren und neu installieren, damit es berücksichtigt wird. '''HINWEIS''': Um dies zu vermeiden, können Sie die Verwendung von XML statt DB erzwingen. Aktivieren Sie in config.php den Debug-Modus und entfernen Sie das Kommentarzeichen: 'force_xmlsettings_for_survey_rendering' => true, // Kommentar entfernen, wenn Sie die Verwendung der XML-Datei anstelle der DB erzwingen möchten (für eine einfache Theme-Entwicklung) Achtung: Alles wird aus dem XML geladen (enthaltene Optionen usw.) '''HINWEIS''': Wenn Sie die CSS/JS-Dateien manuell bearbeiten (ohne den Theme-Editor zu verwenden) und der Debug-Modus deaktiviert ist, können Sie jetzt das Leeren des Assets erzwingen. Klicken Sie in „Globale Einstellungen“ auf der Registerkarte „Allgemein“ auf die Schaltfläche „Assets-Cache löschen“. '''HINWEIS''': wenn Sie den Abschnitt entfernen