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:Нова шаблонна система в LS3.x}}<languages /> __TOC__ =Въведение= Имайте предвид: в предишните версии на LimeSurvey файловете, които определят как изглежда анкетата, как анкетата е представена по отношение на цветове, шрифтове, оформление и (някои) поведение, се наричаха „шаблон“. Поради нови прозрения това вече се нарича „тема“, докато шаблонът е запазен за например анкети. На тази страница ще научите как да: * Използвайте новата тематична система на LimeSurvey 3.0. * Използвайте наследяване, за да управлявате вашите собствени теми. * Добавете снимка към вашата тема * Управлявайте опциите за теми за вашите проучвания и групи от проучвания <hr/> LimeSurvey 3 въвежда напълно нова система за тематичен двигател, базирана на Twig 1.29, Bootstrap, и позволяваща наследяване на теми и опции за теми. Той напълно премахва старата система за заместващи ключови думи. Така че сега 100% от HTML интерфейса може да бъде персонализиран. Например в старата тематична система имаше ключова дума {ASSESSMENTS}, която беше заменена от HTML за оценка по време на изпълнение. Дизайнерът на тема нямаше начин да персонализира този HTML (освен да използва JavaScript). Сега има файл, наречен assessments.twig, който съдържа логиката (написана на Twig) за генериране на този HTML. На тези страници ще ви дадем някои обяснения как да използвате този нов механизъм за теми. <div class="simplebox">[[Файл:help.png]] Тук няма да описваме подробно как работи Twig. Това е вид много опростен PHP, който предлага високо ниво на сигурност благодарение на системата „sandbox“ (ще видим това по-подробно в частта за кода на Theme Engine Core). Ако вече знаете PHP, ще бъде изключително лесно за вас да го овладеете. Ако не знаете PHP, той все още трябва да бъде доста лесен за научаване. Моля, погледнете документацията на Twig 1.X: https://twig.symfony.com/</div> =Редактиране с помощта на администраторския интерфейс= ==списък с теми== В таблото за управление на администратора вече има поле за достъп до списъка с теми: [[Файл:Template list.jpg|thumb|800px |center|baseline|border|''Списъкът с теми след нова инсталация на RC3'']] <br /> Списъкът е разделен на 5 колони: * визуализация на темата: това е просто файл с картина, наречен „preview.png“ в основата на темата * „заглавието“ на темата като посочен в манифеста (config.xml в корена на темата) * описанието на темата: набор от низове в нейния манифест * типа на темата: Основна тема (предоставена с LimeSurvey), Потребителска тема (добавена в директорията за качване), XML тема (не е заредена в базата данни) * Разширява: ако темата разширява друга тема, нейното име ще бъде посочено тук * Някои бутони за действие: ** Инсталиране: то ще зареди манифеста на тема, за да я добави към базата данни и да я направи достъпна за избор на ниво анкета ** Деинсталиране: ще изтрие конфигурационните записи на тема в базата данни ** Редактор на теми: it ще ви пренасочи към редактора на теми ** Опция за тема: ще ви доведе до глобалната конфигурация на опциите за тема ==Редактор на теми== <div class="simplebox"> [[Файл:help.png]] Тази документация предполага, че вече знаете как да използвате Редактора на теми в предишната версия на LS.</div> !Н!<br> Редакторът на теми е запазен възможно най-близо до оригиналния. Така че, когато отворите основна тема, не можете да я редактирате. Но сега, вместо бутон „копиране“, имате бутон „разширяване“. <br> [[Файл:Extends default.png|center|baseline|border|''Сега вие '''разширявате''' темата'']] <span id="A_quick_overview_of_the_concept_of_theme_inheritance"></span> ====Бърз преглед на концепцията за наследяване на теми==== В LS3 една тема вече може да наследи от друга тема, може да „разшири“ друга тема. Това означава, че директорията на темата ще бъде практически празна, ще съдържа само файловете (изгледи, таблици със стилове, скриптове, ресурси и т.н.), които се различават от оригиналните. По този начин ще бъде лесно за вас да създадете набор от теми за вашите различни потребители, без да се налага да поддържате много различни теми. Например: можете да имате своя собствена домашно направена тема и след това версия за компания (с нейното лого, нейния стил, може би връзка към нейния уебсайт в долния колонтитул и т.н.), друга версия за друга компания и т.н. Ако тогава актуализирате CSS или глобалното оформление на вашата персонализирана тема, всички теми, които наследяват от нея, ще бъдат актуализирани автоматично. Имайте предвид, че наследяването е рекурсивно: една тема може да разшири тема, която разширява друга и т.н. <div class="simplebox">[[Файл:help.png]] Това също означава, че ако разширите една от основните теми на LimeSurvey, пак ще се възползвате от нейните актуализации.</div> <span id="Novelties_in_the_user_interface"></span> ====Новости в потребителския интерфейс==== За да разширите монохромната тема на LimeSurvey, отидете в списъка с теми, щракнете върху бутона „Редактор на теми“ на монохромната тема. След това щракнете върху „разширяване“ и потвърдете новото име „extends_monochrome“. Ако сега отидете в директорията за качване (с вашия файл/ftp клиент), ще видите, че е създадена нова директория: '''upload/themes/extends_monochrome''' Съдържа XML файл и директории , но повечето директории са празни. Няма нито изгледи, нито CSS, нито JS. Но все пак можете да изберете тази тема като нормална от анкета и тя ще изглежда точно като монохромната тема. [[Файл:Extends monochrome empty.jpg|center|baseline|border|''Дървото на темата (директория и файлове) веднага след създаването му. Практически е празен'']] <div class="simplebox">[[Файл:help.png]] Ресурсите (jpg, png и др.) от оригиналната тема се копират при разширяване на тема. Това е така, защото ако копирате CSS файл от оригиналната тема локално и ако той препраща към тези файлове (като в израза за фоново изображение), той ще трябва да намери тези картини в текущия път на темата.</div> Редакторът на темата за темата extends_monochrome изглежда така: [[Файл:Editing extends monochrome.jpg|center|baseline|border|'' Editing extends_monochrome theme'']] <br /><br /> Няма голяма разлика със стария редактор на теми. Нека изброим основните: <br /> * Ключовата дума '''inherited''' в списъка с файлове. Това означава, че файлът не присъства в директорията на темата и че ще се използва файлът от оригиналната тема. [[File:Inherited.jpg|center]] <br> * Основният редактор ( [https://ace.c9.io ACE editor ] ) показва съдържанието на избрания файл. Файловете съдържат не само HTML, CSS или JS, но и Twig изрази. Тези инструкции на Twig ни дават възможността да прокараме някаква логика към изгледите на темата, които преди са били разположени дълбоко в ядрото и които сега могат да бъдат персонализирани. [[Файл:Код на Twig в editor.jpg|center|''Някои twig код, за списък с анкети'']] <br> * Ето защо сега имате налични повече видове екрани в падащия селектор на горното меню. Ще забележите страници като „Списък с анкети“, „Зареждане“, „Запазване“, „Грешка“, „Регистрация“, „Оценки“, „Отпечатване на отговори“, които не са били достъпни преди или които наистина не сте могли бъде персонализиран преди. [[Файл:Newscreens editables.jpg|195px|center|''Сега можете да персонализирате всички екрани'']] <br /> * Връзката „съвет“ в долната част на списъка с файлове ви дава начин с Twig да добавите картина във вашия HTML [[File:Tip picture.png|605px|center]] <br /> * Бутонът „запазване на промените“ става бутон „Копиране в локална тема и запазване на промените“ [[Файл:Copytolocal.png|360px|center]] <span id="Quick_example:_adding_a_picture"></span> ====Бърз пример: добавяне на снимка ==== Бутонът '''Копиране в локална тема и запазване на промените''' ще направи точно това, което казва: ако редактирате нещо във файла и след това щракнете върху този бутон, той ще копира файла в темата, която редактирате, и запазете промените си. <br> Например: щракнете върху файла layout_global.twig, след това точно преди съдържанието на блока ( {% block content %}) добавете текста „ТЕСТ“ и щракнете върху бутона. Можете да видите, че етикетът на файла се промени от „наследен“ на „локален“ и сега бутонът е обикновен бутон '''запази промените'''. [[Файл:After edition.png|center|''точно след щракване върху бутона'']] <br> Ако отворите File Explorer и отидете в директорията upload/themes/extends_monochrome/views/, ще видите, че тя съдържа само един файл, файла layout_global.twig и че низът „TEST“ е там.!N ![[Файл:Дърво с глобална стрелка на оформлението.png|център|„Сега файлът присъства във вашата тема“]] <br><br> Сега вместо да добавим произволен текст, ще добавим картина. Ако щракнете върху връзката към съвета, ще ви каже: <br> За да използвате картина в .twig файл: '''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}''' <br> Ако сте прочели документацията на Twig (и трябваше да го направите на този етап), знаете, че '''{{ function( ) }}<nowiki /> ''' ще изведе резултата от функция на екрана. Тук функцията е image(). <div class="simplebox">[[Файл:help.png]] Ако сте любопитни да разберете какво прави, можете да го намерите в кода тук (версия на RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 /application/core/LS_Twig_Extension.php#L219-L237 функция image() в RC3] Ако не разбирате кода: не се притеснявайте, не е нужно да знаете как работи, но защо да използвайте го и как да го използвате. </div> !Н!<br> Трябва да използвате функцията image() по две причини: * Функцията image преминава през темата, за да намери изображението. Ако темата, върху която работите, е разширена до друга тема и ако копирате файла там, където сте вмъкнали картината локално, но тази картина не е копирана в локалната тема, тя ще премине през дървото на наследяване на темата, за да намери къде тази снимка е. * Ще използва диспечера на активи, така че ще подобри ефективността на вашата тема. Вижте документацията на Yii Asset Manager за повече информация относно него: http://www.yiiframework.com/wiki/148/understanding-assets/ <div class="simplebox"> Така че, за да добавите снимка към вашата тема: * просто я качете както обикновено с инструмента за качване на файлове вдясно и след това я добавете където искате във всеки twig файл: ''{ { image('./files/myfile.png') }}''' * Ако искате да добавите алтернативен текст за вашата снимка (за екранни четци и HTML проверка), добавете: {{ image('./files/myfile.png'), ''' 'моят алтернативен текст' ' '' }} * Ако искате да добавите атрибут на клас и да добавите идентификатор към него: {{ image('./files/myfile.png'), 'моят алтернативен текст', ''' {“клас”: “a_nice_css_class ”, “id”: “any_id”} ''' }} </div> ====Някои неща в нашия списък със задачи==== * Дайте на потребителите възможността да качат персонализиран файл за визуализация от самия редактор * Добавете бутон за изтриване на локалния файл и връщане към inherited statement * Копирайте само картината, използвана в CSS файловете (като ги посочите в манифеста като файл за копиране) * Напомнете коя тема разширява текущата (ако има такава) ==Опции за теми== Друга новост на LS3 е страницата с опции за теми. Както ще видим по-късно, създателите на теми могат да създават свои собствени опции и дори своя собствена страница с опции за администратор. Тук бързо ще видим как работи страницата с опции на основните теми. За достъп до опциите на темата на глобално ниво: щракнете върху „опции за тема“ в списъка с теми ===Разширени опции=== {{QS:Редактор на теми - разширени опции}} <span id="Simple_options"></span> ===Прости опции=== Страницата с проста опция идва от самия шаблон. Направено е чрез twig файл и малко javascript в директорията /options на темата: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Неработеща връзка) <div class="simplebox"> [[Файл:help.png]] Тази страница може да бъде напълно различна от тема до друга и доставчиците на теми силно се насърчават да създават свой собствен облик и усещане.</div> [[Файл:Опции.png|thumb|750px|център]] <br><br> Страницата с прости опции просто попълва въведените разширени формуляри. Можете да го видите, като включите или изключите настройка в простата страница и да видите как съответното въвеждане в разширената форма се променя съответно. Например, в простите опции на шаблона по подразбиране, ако промените темата Bootswatch на „Darkly“ и след това щракнете върху раздела за разширени опции (дори без да запазвате), ще видите, че полето „Cssframework Css“ се е променило от {"замени": [["css/bootstrap.css","css/flatly.css"]]}<br> към<br> {"replace": [["css/bootstrap.css","css/darkly.css"]]} <br> Ето различните прости опции за основните теми: *'''Ajax режим:''' Трябва ли следващата страница да се зареди чрез ajax (по-бързо) или чрез презареждане на страницата (по-добре за целите на отстраняване на грешки)!N !*'''Фоново изображение:''', ако е зададено на Да, изображението, наречено pattern.png, ще бъде заредено (ще бъде заменено от селектор на файлове в Master) *''''Box container:'''' ако зададено на Не, въпросите няма да се съдържат в кутия (така че можете да използвате големи масиви, по-големи от ширината на екрана) *'''Brandlogo:''' ако е зададено на не, името на анкетата ще бъде показано в горната лента, в противен случай можете да изберете една от картините във файловата директория, която да се използва като картина на лого. *''''Анимирано тяло:'''' ако е зададено на да, можете да изберете една от анимациите да се приложи, когато основната част на анкетата е заредена *''''Анимиран въпрос:''' същото с въпросите *''''Анимирани предупреждения:'''' същото с предупреждения *''''Bootstrap theme:''' тук можете да изберете тема на Bootstrap за зареждане. Те идват от Bootswatch https://bootswatch.com/3/ <br> Библиотеката, използвана за анимации, е animate.css: https://daneden.github.io/animate.css/ Разбира се, доставчик на тема може да добави своя собствена библиотека с анимации или никаква библиотека с анимации. <div class="simplebox">[[Файл:help.png]] Монохромните теми използват същата цветна тема за първоначално зареждане като потребителския интерфейс на администратора. Те не използват системата за заместване на css framework, а просто добавят CSS файл. И така, това илюстрира друг начин за справяне с персонализирани теми за доставчиците на теми.</div> <span id="Inheritance_system"></span> ===Система за наследяване=== В предишната част видяхме, че една тема може да разшири друга тема. Конфигурация на тема може също да наследи от друга конфигурация на тема. Това означава, че за дадена тема можете да имате конфигурация на * глобално ниво (това, което току-що видяхме достъпно от списъка с теми) * на ниво група за проучване * последно на ниво проучване. Всеки параметър на определено ниво може да наследи от по-горното ниво: наследяване на група за проучване. Първо, нека видим нивото на групата за проучване. <span id="At_survey_group_level"></span> ====На ниво група за проучване==== Наистина, една от другите големи новости на LS3 е системата за групови проучвания. Вече можете да създавате различни групи, за да организирате анкетите си. За да получите достъп до него, отидете на списъка с анкети и след това щракнете върху раздела с група анкети: [[Файл:Surveygroup.png|thumb|800px|center|''Раздел групи анкети'']] <br> В този списък имате два бутона за действие. Ако групата е празна, можете да я изтриете. В противен случай винаги можете да го редактирате. Щраквайки върху бутона за редактиране, ще стигнете до страницата за конфигуриране на групата за проучване: [[Файл:Surveygroupedit.png|thumb|800px|center|''Редактиране на групата за проучване по подразбиране'']] <br> Третият раздел на тази страница се нарича „Опции на шаблона за тази група от анкети“. Ако щракнете върху него, ще видите същия списък с теми, както в списъка с теми, с изключение на това, че тук се вижда само бутонът с опции (до редактора на теми може да се стигне само от основния списък). <br> Сега, ако щракнете върху опцията за шаблон по подразбиране, ще видите това: [[Файл:Option group inherit.png|thumb|800px|center|''В Survey Group опциите на шаблона се наследяват по подразбиране'']] <br> * '''Наследи всичко''' означава, че цялата конфигурация ще бъде наследена от нивото на глобалната конфигурация. * Ако отидете на '''страницата с разширени опции''', ще видите, че всички полета са настроени за наследяване. * Ако щракнете върху "не" за "Наследяване на всичко" в прости опции, отново ще видите страница, много подобна на страницата с глобалните опции. Единствената разлика е, че за всяко поле можете да го зададете на да, не или наследяване; и всеки падащ селектор има стойност ''наследяване''. [[Файл:Inherit group.png|thumb|800px|center|„Всяка настройка може да има наследена стойност“]] <div class="simplebox">[[Файл:help.png]] Група за проучване може да бъде дъщерна на друга група. В този случай то ще наследи от своя родител.</div> ====На ниво анкета==== Когато редактирате анкета, в менюто на лявата лента ще видите нов запис „Опции за тема“. Ще ви отведе до страницата с опции на темата, избрана за текущото проучване. Ще намерите същата система за наследяване като в групата за проучване, но този път наследяване означава, че настройката ще бъде наследена от групата за проучване на проучването. [[Файл:Options survey.png|thumb|800px|center|„Опции за тема на ниво проучване“]] ==Пример за използване== Да приемем, че използвате една тема за различни компании (A и B). Задавате любимите си опции на глобално ниво (напр.: включен ajax, анимирано тяло с плъзгане, сигнали с пулс). След това създавате група за проучване за всяка компания: група за проучване за компания A, която ще хоства всички проучвания за тази компания, и проучване за компания B, която ще хоства всички проучвания за компания B. На това ниво ще зададете само логото и фона и ще позволите на другите опции да се наследят. И така, всички анкети в група A ще използват логото на фирма A, а всички анкети от група B логото на компания B. За една от анкетите на компания A можете да използвате различен фон във връзка с темата на проучването: просто променяте фона в опциите на ниво проучване. Ако някой в компания B ви каже, че пулсиращият сигнал е твърде агресивен и той би предпочел нещо по-плавно като затихване, вие просто променяте анимацията за предупреждение на ниво Група Б за проучване и всички проучвания на тази група вече ще използват тази анимация. Ако фирма А промени своето лого, можете да го промените на ниво Анкета Група А и всички анкети от тази група ще използват новото лого. <br> <div class="simplebox"> Тези примери се основават на текущите опции на основната тема. Но разбира се, ако сте доставчик на теми или ако можете да пишете скриптове с twig, можете да добавите свои собствени опции. Например, можете да добавите опция „долен колонтитул с информация“, където можете да добавите данни като уебсайта на компанията или телефонен номер за помощ. След това, ако компания А има различни отдели с различни телефонни номера, можете просто да създадете една подгрупа за всеки отдел в Група за проучване А. Всяка подгрупа ще има свой собствен телефонен номер в тези опции.</div> <span id="FAQ_about_theme_customization"></span> = Често задавани въпроси относно персонализирането на темата = Тук ще намерите някои отговори на въпроси, зададени във форума и които могат да ви помогнат да персонализирате вашата тема. ==Персонализиране на CSS/JS: справете се с мениджъра на активи ("защо моите промени не са приложени?") == <br /> Ако се опитвате да актуализирате CSS/JS на тема чрез директно редактиране на кода с любимия си редактор, може да се изненадате, че вашите промени не се прилагат. <br /> От 2.50 LS използват мениджъра на активи на Yii: [http://www.yiiframework.com/wiki/148/understanding-assets/ Документация на Yii за активи] <br /> Той премества CSS/JS файловете на дадена тема в поддиректория tmp/ с произволен низ (напр.: "tmp/1ef64ml/"). Така че, ако направите някаква промяна в css/js файл и го кажете на мениджъра на активи, файловете се копират в нова поддиректория с ново име, така че кешът на браузъра на потребителя се актуализира и те виждат новия css/js . В противен случай ще трябва да почистят кеша на браузъра си. <br /> Тук CSS връзките в заглавката, когато мениджърът на активи е включен: <br /> [[Файл:Активи на vanilla.jpg]] <br /> Както можете да видите, всички те се отнасят до подпапките tmp/. <br /> Тук CSS връзките в заглавката, когато мениджърът на активи е изключен: <br /> [[Файл:Asset off.png]] <br /> Както можете да видите, те сочат към истинските файлове на темата. <br /> <div class="simplebox">[[Файл:help.png]] Разбира се, ако мениджърът на активи не знае, че сте променили файла, старият файл от старата tmp/директория остава непроменен и вашите промени никога няма да бъдат приложени.</div> Така че, когато редактирате CSS/JS на тема, имате различни възможности: *'''Можете да използвате LS Theme Editor:'''' той се занимава с диспечера на активи и не е нужно да притеснявайте се за всичко *''''Можете да включите режима за отстраняване на грешки:''' той ще изключи диспечера на активи, така че се извикват истинските css/js файлове на вашите теми (но след това трябва да опресните кеша на браузъра си при всяко зареждане) * '''Можете да опресните кеша на активите''': от Глобални настройки -> Общи -> Изчистване на кеша на активи [[Файл:Clearassets-ls3 3.png]] <div class="simplebox">[[Файл:help.png]] '''Използването на редактора на теми за редактиране на персонализирания CSS е определено най-доброто решение.'''</div> Използването на редактора на теми ще ви помогне да разберете архитектурата на новия механизъм за теми. Също така, ако персонализирате fruity, внимавайте със спецификата на CSS: повечето от дефинициите използват селектора „.fruity“ (един от класа на елементът на тялото) == Добавяне на персонализирани шрифтове към моята тема == === Лесният начин: използване на Google Font CDN === Bootswatch Survey Theme използва Google Font CDN. Нека да разгледаме как работи: 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> След това шрифтът Lato се използва чрез CSS правила: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 <syntaxhighlight lang="css"> тяло { ...!Н! семейство шрифтове: "Lato"; ... } </syntaxhighlight> Можете да използвате всеки шрифт на Google по този начин във вашата персонализирана тема. Разбира се, трябва да премахнете селектора на шрифта от опциите на вашата тема. Изтрийте тези редове в options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230 === Използване на локален шрифт === Разбира се, можете също да изтеглите файловете с шрифтове и да ги използвате от локален сървър, а не от Google CDN (по-добре за поверителност). За да имате пример как да го направите, ето нашата локална версия на noto font: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css <syntaxhighlight lang="css"> @font-face { семейство шрифтове: 'Noto Sans'; тегло на шрифта: 300; стил на шрифта: нормален; src: url('./font-src/Noto/NotoSans-Regular.ttf'); } ... </syntaxhighlight> Можете да използвате много подобна дефиниция в css файла на вашата тема и след това като копирате файла NotoSans-Regular.ttf в папката css/font-src/ на вашата тема. След това приложете този шрифт към тялото си (или всеки друг елемент), както по-горе, и премахнете селектора на шрифта по подразбиране. === Създаване на ваш собствен селектор на шрифт в опциите === Засега не можете лесно да използвате основния селектор на шрифт, за да добавите свой собствен шрифт в опциите. Първо трябва да дадем възможност на крайния потребител да качва персонализирани пакети (вижте следващия абзац: Поглед към Fruity Font Selector) <br> Ето как да продължите: <br> *Добавете два шрифта (my_custom_font и my_custom_other_font) във вашата тема, като използвате CDN или локален сървър *След това във вашия css файл добавете два нови класа: <br> !Н!<syntaxhighlight lang="css"> .font-my_custom_font { font-family: 'my_custom_font '; } .font-my_custom_other_font { font-family: 'my_custom_other_font'; } </syntaxhighlight> *В XML файла на вашата тема добавете опция за шрифт (по подразбиране ще бъде my_custom_font) : <syntaxhighlight lang="xml"> <options> .... <font>my_custom_font</font> </options> </syntaxhighlight> * в option.twig добавете инструмента за избор на шрифт, като добавите тези редове (нетествани засега, така че елате да се оплачете във форума, ако не работи): <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'> {{ „Моите персонализирани шрифтове“ | T }}</div> <div class='panel-body'> <div class='form-group row'> <label for='simple_edit_font' class='control-label'>{{ "Избор на шрифт:" | t }}</label> <div class='col-sm-12'> <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% ако templateConfiguration.sid не е празен или templateConfiguration.gsid не е празен %} //Това не трябва ли да бъде "тема" вместо "шаблон"? {% set fontOptions = fontOptions ~ '<option value = "inherit" > Наследяване</option> ' %} {% endif %} <optgroup label="{{ "My Custom fonts" | t }}"> <option class="font-my_custom_font" value="custom_font" data-font-package="" > Персонализиран</option> <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" > други</option> </optgroup> </select> </div> </div> </div> </div> </div> </div> </syntaxhighlight> <br> Сега вашите потребители трябва да могат да избират между тези два шрифта. === Поглед към Fruity Font Selector === В бъдеще ще дадем възможност на крайния потребител да качва свои собствени пакети с активи, включително пакети с шрифтове. Това ще направи много лесно всяко персонализиране на шрифтове. <br> За да разберете пакетите Yii: <br> http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail <br> <br> Пакетите LimeSurvey са дефинирани в различни файлове. Пакетите с шрифтове са дефинирани тук: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php <br> Например пакетът с шрифтове Noto е дефиниран тук: 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> Файлът noto.css, който съдържа, е тук: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css <br> Забележете дефиницията на css класа ".font-noto" в края му: <syntaxhighlight lang="css"> @font-face { семейство шрифтове: 'Noto Sans'; ... } ... .font-noto{ font-family: 'Noto Sans'; } </syntaxhighlight> <br> След това във Vanilla Theme шрифтът noto се използва чрез добавяне на пакета noto и дефиниране на опцията за шрифт към noto: <br> https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 <syntaxhighlight lang="xml"> <packages> .... <add> font-noto</add> </packages> </syntaxhighlight > https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 <br> <syntaxhighlight lang="xml"> <options> .... <font>не</font> на!</options> </syntaxhighlight> <br> След това шрифтът на класа на тялото се дефинира с помощта на тази стойност: 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> Разбира се, XML файлът съдържа само стойностите по подразбиране за вашата конфигурация на тема. Но наистина тези стойности се дефинират и четат в базата данни (таблица "template_configuration" (Въпрос: "template_" от "theme_"?) като json низове. Файлът option.js просто използва стойността на селектора на шрифта на простата опция за да промените стойността във формуляра за разширени раздели: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174 Така че, когато функционалността „качване на пакет с активи“ бъде налична, ще бъде лесно да добавите скрипт, който сканира всички съществуващи пакети с шрифтове, за да ги добави в селектора. == Добавяне на опции за тема за контрол на позиционирането и показването на елементите на анкетата == Този урок ще покаже как да добавите опции към разширена тема за показване на елементи на анкета на различни места. В този случай ще създадем опции за тема, за да покажем заглавието на анкетата на две различни места. <div class="simplebox"> [[Файл:help.png]] За по-голяма простота ще базираме урока върху разширение на темата "bootswatch" във версия 3.4.3 на LimeSurvey.</div> === Създайте персонализирана тема === #Разширете темата "bootswatch", както е описано по-горе. #Копирайте <span style="color: #BA2121;">custom.css</span> в локалната тема, както е описано по-горе. ===Създайте нови опции за тема=== #Копирайте съдържанието на <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> в <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> . #Отворете <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> в редактор и намерете „{# Bootstrap Bootswatch theme #}“. Директно преди своя родител<nowiki><div class='row'></nowiki> елемент, добавете това:<syntaxhighlight lang="html"> {# Персонализирано име на анкетата в навигационната лента #} <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'>Име на анкетата в навигационната лента</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'/> Да </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Не </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Персонализирано име на анкетата под лентата за напредък #} <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'>Име на анкетата под лентата за напредъка</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'/> Да </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Не </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div></syntaxhighlight> #Отворете <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> и добавете два елемента към блока „опции“, така че да изглежда така:<syntaxhighlight lang="xml"><options> <ajaxmode> На</ajaxmode> ... <surveyname1> На</surveyname1> <surveyname2> На</surveyname2> </options></syntaxhighlight> #Това трябва да ви даде две нови опции в екрана с опции за тема, като този:<br /> [[Файл:Tutorial_tp_1_1.png]] ===Променен изглед за заглавието на анкетата в навигационната лента=== #Създайте нова директория <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/</span> . #Копирайте <span style="color: #BA2121;">/themes/survey/vanilla/ views/subviews/header/nav_bar.twig</span> към тази нова директория. #Отворете <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> и намерете „{# опция за лого #}“. Под това променете израза IF за логото/името на анкетата, така че да изглежда така:<syntaxhighlight lang="html"> {# Опция за лого #} {% 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> #Добавете нещо подобно към <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-марка { line-height: 60px; размер на шрифта: 32px; }</syntaxhighlight> #Превключете опцията за тема "Име на анкетата в навигационната лента" на "Да" #Трябва да видите това:<br /> [[Файл:Tutorial_tp_1_2.png]] ===Модифициран изглед за заглавието на анкетата под лентата на напредъка=== #Създаване на нова директория <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> . #Копирайте <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> в тази нова директория. #Отворете <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .клонка</span> и добавете<nowiki><h1></nowiki> елемент за името на анкетата. Така че изглежда така: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Персонализирано име на анкетата #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> {% endif %} {# Име на група #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Описание на групата #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# ПРЕДСТАВЕТЕ ВЪПРОСИТЕ Това е основната част. Той ще изобрази всеки въпрос за тази група #}<!-- PRESENT THE QUESTIONS --> {% за въпрос в 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> # Добавете нещо подобно към <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-марка { line-height: 60ph1.custom-survey-name { поле: 0; подравняване на текст: център; }</syntaxhighlight> #Превключете опцията за тема "Име на анкетата под лентата за напредък" на "Да" #Трябва да видите това:<br /> [[Файл:Tutorial_tp_1_3.png]] ===Изтегляния=== * Примерна разширена тема: [[Media:Test_survey_names.zip]] =Създаване на тема от нулата= Очаквайте скоро документация. Засега давам само няколко съвета. <span id="Theme_structure"></span> ==Структура на темата== === Файлове и директории === Когато създавате тема от нулата, не е необходимо да спазвате структурата на файл/директория/css/js от Vanilla. Задължителният css/js се добавя от ядрото (все пак можете да го премахнете, ако е необходимо) Единствените файлове, които вашата тема трябва да има, са файловете за оформление: * '''layout_global.twig''' : визуализиране на страниците за вземане на анкета * '''layout_survey_list.twig''' : визуализиране на списъка с анкети (ако тази тема е зададена по подразбиране) * '' 'layout_errors.twig''' : използва се за изобразяване на грешки, които блокират изобразяването на проучване. (грешен идентификатор на анкета, празна група в групата за визуализация и т.н.) * '''layout_user_forms.twig''': изобразява потребителските формуляри като: токен (участник в анкетата) и регистрация. * '' 'layout_print.twig''' : използва се за отпечатване на анкетата в pdf * '''layout_printanswers.twig''': отпечатване на отговорите Съдържанието на тези файлове, файловете, които включват или не, зависи изцяло от вас. Всички други файлове и директории, които намирате във Vanilla, са чисто незадължителни, не се колебайте да организирате кода си както искате. <div class="simplebox">[[Файл:help.png]] Ако прочетете кода за изобразяване на интерфейса, ще видите, че имената на тези файлове се показват директно в него. Затова са задължителни. Напр.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462 </div> <span id="Content"></span> === Съдържание === В layout_global.twig на Vanilla ще видите, че използваме променлива, наречена „include_content“, за да решим какво да показваме! layout_global.twig#L114-L115 <syntaxhighlight lang="php"> {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %} {% включват './subviews/content/outerframe.twig' с {'include_content': sViewContent } %} </syntaxhighlight> aSurveyInfo.include_content ви казва какво действие се извършва в момента: показване на въпроси? показване на резултат за изпращане? показва ясно всичко? и т.н. Както можете да видите, във vanilla създаваме един файл, който да включим чрез действие. Така че, ако искате да знаете списъка с действия, просто проверете директорията на vanilla '''views/subviews/content''' и премахнете разширението "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''' Ако вече сте създали тях за 2.x версии на LimeSurvey, ще забележите, че повечето от тях съответстват на старите pstpl файлове за limesurvey 2.x. Отново, няма задължение за вас във вашата тема да създавате тези файлове с тези имена в тази директория. Можете например просто да добавите гигантски превключвател в layout_global.twig с желания HTML за всяко действие. <span id="The_manifest_config.xml"></span> === Манифестът config.xml === Манифестът на темата съдържа основната информация за вашата тема. Когато инсталирате тема, съдържанието на манифеста ще бъде заредено в базата данни в две различни таблици: шаблон и шаблон_конфигурация. Така че всеки път, когато промените манифеста на тема, трябва да я деинсталирате и преинсталирате (или просто да я нулирате). Тъй като този процес е досаден, докато разработвате тема, можете да принудите директното използване на XML файла, а не на записите в DB. За да направите това, в config.php включете режима за отстраняване на грешки и 'force_xmlsettings_for_survey_rendering' на true. <span id="The_metadata_section"></span> ==== Разделът с метаданни ==== Нищо сложно: само основната информация за вашата тема. Той ще бъде избутан в таблицата templates_configuration <syntaxhighlight lang="xml"> <metadata> <name> името_на_вашата_тема</name> <title> Заглавието на вашата тема</title> <creationDate> 16.10.2017 г</creationDate> <author> Твоето име</author> <authorEmail> your@email.org</authorEmail> <authorUrl> http://www.yourwebsite.org</authorUrl> <copyright> Вашето авторско право</copyright> <license> Лиценз на вашата тема</license> <version> версия на вашата тема</version> <apiVersion> 3</apiVersion> <description> Описание на вашата тема</description> <extends> родителска_тема</extends> </metadata> </syntaxhighlight> Малко забележки: * '''name''': ще се използва като ключ в db. Така че трябва да е уникален и не трябва да има никакви специални знаци (без интервали). Обърнете внимание, че случаите няма да бъдат взети предвид * '''Заглавие'': ще се използва за показване на името на вашата тема в различните списъци. Може да има специални знаци * '''описание''': ще се използва в основния списък на темата на анкетата. Може да съдържа специални знаци и дори HTML код чрез използване на * '''extends''': по избор, той дефинира родителските теми. Така че, ако някой файл не присъства в тази тема (twig/js/css/jpg и т.н.), той ще го търси в родителската тема <div class="simplebox">[[Файл:help.png]] Ако сте разширили една от 3-те основни теми (Vanilla, Bootswatch, Fruity), можете да промените стойността "extends" от една родителска тема към друга. Разбира се, ще трябва да нулирате темата.</div> <span id="The_files_section"></span> ==== Разделът с файлове ==== Този е важен. Той ще бъде избутан в таблицата template_configuration, в полето files_css, files_js, files_print_css като json масиви. Напр.: секцията с файлове на темата Material Premium: <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/тема.css</replace> <replace> css/custom.css</replace> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </css> <js> <replace> скриптове/theme.js</replace> <replace> скриптове/ajaxify.js</replace> <add> скриптове/material.js</add> <add> скриптове/ripples.min.js</add> <replace> скриптове/custom.js</replace> </js> <print_css> <add> css/print_theme.css</add> </print_css> </files> </syntaxhighlight> Всички CSS/JS файлове, налични в този раздел, ще бъдат заредени при стартиране на анкетата (в режим ajax. Ако режимът ajax е изключен, тогава, разбира се, всички файлове се презареждат на всяка страница). Те ще бъдат добавени към Yii Asset Packet въз основа на името на темата. Така че, когато Asset Manager е включен (режимът за отстраняване на грешки е изключен), тези файлове ще бъдат копирани в директорията tmp с останалата част от темата (така че можете да използвате относителен път в CSS и JS, за да достигнете до файловете с изображения). За мениджъра на активи в Yii: https://www.yiiframework.com/wiki/148/understanding-assets За пакетите в Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail Те ще използват системата за наследяване. Това означава, че ако добавите CSS/JS файл към тема, но той не присъства в темата, тогава двигателят ще разгледа всички основни теми на тази тема и ще използва първата, която намери. Така че, ако потребител разшири вашата тема чрез редактора на тема, всички тези файлове ще бъдат наследени в неговата тема. Ключовите думи се отнасят до тази система за наследяване. * '''add''' : ще добави файла към темата и към всички нейни наследени теми * '''replace''': ще замени файла на основната си тема * '''remove''': ще премахне файла от '''всеки''' пакет, дори основния пакет (от 3.14) <div class="simplebox">[[File:help.png]] Не забравяйте, че можете да зададете в config.php 'force_xmlsettings_for_survey_rendering', така че конфигурацията да се чете от XML вместо от DB (не е необходимо нулиране). Това ще улесни тестването на модификациите на XML файловете и ще избегне деинсталирането/преинсталирането на тема при всяка модификация на XML</div> Малко забележки към тези ключови думи: ===== Съвети за наследяване ===== Както беше обяснено преди, ключовата дума "add" може да се отнася до файл, който е в една от основните теми. Така че можете да "добавите" файл в този раздел и пак да нямате този файл във вашата тема, а в една от неговите родителски теми. Енджинът ще разгледа всички родителски теми и ще използва първата, която намери. Ако не може да намери файла и режимът за отстраняване на грешки е включен в конфигурацията, а режимът за отстраняване на грешки на js frontend е включен в глобалната настройка, съобщение в конзолата ще ви предупреди. Например: ако добавим my_theme:<add> css/несъществуващ.css</add> , в конзолата ще видим: <syntaxhighlight lang="">!Н! (¯`·._.·(¯`·._.· Грешка в конфигурацията на темата ·._.·´¯)·._.·´¯) Не мога да намеря файл 'css/unexisting.css', дефиниран в темата 'my_theme' </syntaxhighlight> Ако режимът за отстраняване на грешки е изключен, няма да се вижда никаква грешка. Машината просто ще игнорира грешните оператори за добавяне. <span id="When_to_use_add,_when_to_use_replace,_when_can_I_just_leave_it_to_the_parent_theme?"></span> ===== Кога да използвам add, кога да използвам replace, кога мога просто да го оставя на родителската тема? ===== Първо: добавяне и замяна са една и съща ключова дума. Можете да използвате едното или другото, двигателят ще направи същото. Те са различни за човешките читатели, така че те разбират какво е било вашето намерение. Не можете да добавите файл със същото име като основната тема: той винаги ще го замени. напр.: Ако имате файл, наречен "my_mother_theme/foo.css" и добавите файл, наречен "foo.cs" в дъщерната тема, само "daughter_theme/foo.css" ще бъде добавен към темата. Ако искате да запазите "my_mother_theme/foo.css", просто изберете друго име за "daughter_theme/foo.css", като "daughter_theme/bar.css". Така че ключовата дума "добавяне" може да се използва като ключова дума "замяна". Ако се чудите защо: това прави много по-лесно автоматичното генериране на наследена тема, копирането на раздела на файла работи веднага (няма нужда да преименувате „добавяне“ на „замяна“, когато разширявате файла). За да стане ясно, нека вземем примера с Fruity. Ето неговата css файлова секция: <syntaxhighlight lang="xml"> <css> <add> css/variations/sea_green.css</add> <replace> css/animate.css</replace> <replace> css/тема.css</replace> <replace> css/custom.css</replace> </css> </syntaxhighlight> Ако погледнете файла custom.css във fruity, той е точно същият като ванилията. Можем да изтрием файла custom.css във fruity, този на vanilla ще се зареди. Можем да премахнем изявлението<replace> custom.css</replace> от манифеста на Fruity ще се използва изразът от vanilla и ще се зареди vanilla custom.css. Така че защо използваме твърдението<replace> custom.css</replace> вътре в плодовия манифест? Отговорът е лесен: защото искаме крайният потребител да може да разшири плодовата тема, да модифицира файла в своята локална тема и да зареди този модифициран файл от своята наследена тема. За да разберете, просто разширете fruity и погледнете разширената тема. Разширената тема дори няма файла custom.css. Така че ще се използва плодовият. Но: ако потребителят създаде този файл в разширената тема (като щракне върху „разшири“ в редактора на тема), тогава този файл ще бъде зареден от неговата тема. Така че като цяло: ако създадете тема от нулата, без да разширявате нито една тема, просто използвайте оператора add, за да добавите вашите css/js файлове. Лесно ако създадете тема, разширяваща друга тема, и не искате потребителите да могат да разширяват css/js файла от основната тема: не използвайте израза add във вашия манифест. Файловете все още ще се зареждат от конфигурацията на основната тема. ако създадете тема, разширяваща друга тема, и искате да замените файл от основната тема: използвайте ключовата дума replace (ключовата дума add ще има същия резултат) ако създадете тема, разширяваща друга тема, ако не замените даден файл от css/js, но искате потребителите да могат да разширят този файл: тогава използвайте командата "замени" във вашия манифест за този файл. Дори и да не замените файла, като използвате ключовата дума replace в манифеста: позволявате на потребителя да го направи, ако иска да го направи. Само този последен случай се нуждае от малко умствена гимнастика, за да се разбере, всички останали случаи са тривиални. <div class="simplebox">[[Файл:help.png]] Можете също да регистрирате CSS и JS файлове директно от кода на twig. Тези файлове ще бъдат заредени само когато бъде поискан twig файлът. Ако искате потребителите да могат да наследяват тези JS/Css файлове от редактора на теми, не забравяйте да използвате функциите {{registerTemplateCssFile('my_style.css')}} и {{registerTemplateScript('my_script.js')}} . Ако не използвате тези функции, вашата тема може да работи, но наследяването върху нея ще бъде нарушено. Това е същата логика като функцията {{image('my_picture.jpg')}} </div> <span id="The_remove_keyword"></span> ===== Ключовата дума за премахване ===== Ключовата дума за премахване е достъпна само от 3.14. С този можете да премахнете всеки css/файл от всеки пакет, дори от основните. Използва се в темата Material Premium за премахване на файловете на квадратчето за отметка Awseome Bootstrap: <syntaxhighlight lang="xml"> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </syntaxhighlight> така че трябва да използвате същия синтаксис като файла на пакета (напр.: "awesome-bootstrap-checkbox.css" сам без пътя на папката не би работил). Ще намерите пълния списък на основните пакети и техните файлове в /application/config/packages.php и config/third_party.php. Например за 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> Друг начин да намерите точното име, което да използвате в етикета за премахване, е да включите диспечера на активи (изключване на режима за отстраняване на грешки или настройка на 'use_asset_manager'=>true в конфигурацията). Тогава пътят за използване ще бъде този точно след произволната директория в директорията tmp. Например за 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> Файлове, които не трябва да премахвате: '''jquery-3.1.1.min.js''' : необходимо '''jquery-migrate-3.0.0.min.js''' : необходимо '''survey.js''' : необходимо '''moment-with-locales.min.js''' : необходимо за тип въпрос за дата (и някои други според мен) '''em_javascript.js''' : необходимо за всички javascript ExpressionScript <span id="The_options_section"></span> ==== Разделът с опции ==== Този раздел е свързан с опцията на вашата тема. Ще се използва за подаване на подадените „опции“ на таблицата template_configuration като json масив. <span id="Further_information"></span> === Допълнителна информация === * [[Тема: Налична функция]] <span id="Some_notes"></span> == Някои бележки == '''ЗАБЕЛЕЖКА''': ако редактирате XML файла на тема, трябва да деинсталирате и преинсталирате темата, за да бъде взета предвид. '''ЗАБЕЛЕЖКА''': за да избегнете това, можете да принудите да използвате XML вместо DB. В config.php включете режима за отстраняване на грешки и разкоментирайте: 'force_xmlsettings_for_survey_rendering' => true, // Разкоментирайте, ако искате да принудите използването на XML файла, а не на DB (за лесно разработване на тема) Внимание: всичко ще бъде заредено от XML (включени опции и т.н.) '''ЗАБЕЛЕЖКА''': ако редактирате ръчно CSS/JS файловете (без да използвате редактора на теми) и ако режимът за отстраняване на грешки е изключен, сега можете да принудите актива да бъде изчистен. В „Глобални настройки“, „Общи раздел“, щракнете върху бутона „Изчистване на кеша на активите“. '''ЗАБЕЛЕЖКА''': ако премахнете секцията