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
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:Nowy system szablonów w LS3.x}}<languages /> __TOC__ =Wprowadzenie= Uwaga: w poprzednich wersjach LimeSurvey pliki definiujące wygląd ankiety, sposób jej prezentacji pod względem kolorów, czcionek, układu i (niektórych) zachowań nazywano „szablonem”. Ze względu na nowe spostrzeżenia nazywa się to teraz „motywem”, podczas gdy szablon jest zarezerwowany na przykład dla ankiet. Na tej stronie dowiesz się, jak: * Użyj nowego systemu motywów LimeSurvey 3.0. * Użyj dziedziczenia, aby zarządzać własnymi motywami. * Dodaj zdjęcie do swojego motywu * Zarządzaj opcjami motywu dla swoich ankiet i grup ankiet <hr/> LimeSurvey 3 wprowadza zupełnie nowy system silnika motywów, oparty na Twig 1.29, Bootstrap, umożliwiający dziedziczenie motywów i opcje motywów. Całkowicie usuwa stary system zastępczych słów kluczowych. Teraz można dostosować 100% kodu HTML frontendu. Na przykład w starym systemie motywów istniało słowo kluczowe {ASSESSMENTS}, które w momencie wykonywania zostało zastąpione kodem HTML oceny. Projektant motywów nie miał możliwości dostosowania tego kodu HTML (poza użyciem JavaScript). Teraz istnieje plik o nazwie Assessments.twig, który zawiera logikę (napisaną w Twig) służącą do generowania tego kodu HTML. Na tych stronach wyjaśnimy, jak korzystać z tego nowego silnika motywów. <div class="simplebox">[[File:help.png]] Nie będziemy tutaj szczegółowo omawiać działania Twiga. Jest to swego rodzaju bardzo uproszczony PHP, który oferuje wysoki poziom bezpieczeństwa dzięki systemowi „sandbox” (zobaczymy to bardziej szczegółowo w części dotyczącej kodu rdzenia Theme Engine). Jeśli znasz już PHP, jego opanowanie będzie niezwykle łatwe. Jeśli nie znasz PHP, nauczenie się go powinno być całkiem łatwe. Proszę zapoznać się z dokumentacją Twig 1.X: https://twig.symfony.com/</div> =Edycja przy użyciu interfejsu administracyjnego= ==lista motywów== Na panelu administracyjnym znajduje się teraz pole umożliwiające dostęp do listy motywów: [[Plik:Template list.jpg|thumb|800px |center|baseline|border|''Lista motywów po nowej instalacji RC3'']] <br /> Lista jest podzielona na 5 kolumn: * podgląd motywu: to tylko plik obrazu o nazwie „preview.png” w katalogu głównym motywu * „tytuł” motywu jako określony w manifeście (config.xml w katalogu głównym motywu) * opis motywu: ciąg znaków ustawiony w manifeście * typ motywu: Motyw podstawowy (dostarczany z LimeSurvey), Motyw użytkownika (dodany do katalogu przesyłania), motyw XML (nie załadowany do bazy danych) * Rozszerza: jeśli motyw rozszerza inny motyw, jego nazwa zostanie tutaj wskazana * Niektóre przyciski akcji: ** Zainstaluj: to załaduje manifest motywu, aby dodać go do bazy danych i udostępnić do wyboru na poziomie ankiety ** Odinstaluj: usunie wpisy konfiguracyjne motywu z bazy danych ** Edytor motywów: to przekieruje Cię do edytora motywów ** Opcja motywu: poprowadzi Cię do globalnej konfiguracji opcji motywu ==Edytor motywów== <div class="simplebox"> [[File:help.png]] Ta dokumentacja zakłada, że wiesz już, jak korzystać z Edytora motywów w poprzedniej wersji LS.</div> <br> Edytor motywów został utrzymany możliwie najbliżej oryginału. Zatem po otwarciu motywu podstawowego nie można go edytować. Ale teraz zamiast przycisku „kopiuj” masz „przycisk rozszerzania”. <br> [[Plik:Rozszerza domyślny.png|center|baseline|border|''Teraz '''rozszerzasz'' motyw'']] <span id="A_quick_overview_of_the_concept_of_theme_inheritance"></span> ====Szybki przegląd koncepcji dziedziczenia motywu==== W LS3 motyw może teraz dziedziczyć z innego motywu, może także „rozszerzać” inny motyw. Oznacza to, że katalog motywu będzie praktycznie pusty, będzie zawierał jedynie pliki (widoki, arkusze stylów, skrypty, zasoby itp.), które różnią się od oryginalnych. Dzięki temu łatwo będzie Ci stworzyć flotę motywów dla różnych użytkowników, bez konieczności utrzymywania wielu różnych motywów. Przykładowo: możesz mieć motyw własnej roboty, potem wersję dla firmy (z jej logo, stylem, może linkiem do strony w stopce itp.), inną wersję dla innej firmy itp. Jeśli wtedy zaktualizujesz CSS lub globalny układ swojego niestandardowego motywu, wszystkie motywy, które z niego dziedziczą, zostaną zaktualizowane automatycznie. Należy pamiętać, że dziedziczenie jest rekurencyjne: motyw może rozszerzać motyw, który rozszerza inny itd. <div class="simplebox">[[File:help.png]] Oznacza to również, że jeśli rozszerzysz jeden z głównych motywów LimeSurvey, nadal będziesz korzystać z jego aktualizacji.</div> <span id="Novelties_in_the_user_interface"></span> ====Nowości w interfejsie użytkownika==== Aby rozszerzyć motyw Monochromatyczny w LimeSurvey, przejdź do listy Motywów, kliknij przycisk „Edytor motywów” motywu Monochromatycznego. Następnie kliknij „rozszerz” i zatwierdź nową nazwę „extends_monochrome”. Jeśli teraz przejdziesz do katalogu przesyłania (za pomocą klienta plików/ftp), zobaczysz, że został utworzony nowy katalog: '''upload/themes/extends_monochrome''' Zawiera plik XML i katalogi , ale większość katalogów jest pusta. Nie ma ani widoków, ani CSS, ani JS. Jednak nadal możesz wybrać ten motyw z ankiety jako zwykły i będzie on wyglądał dokładnie tak, jak motyw monochromatyczny. [[File:Extends monochromatyczny pusty.jpg|center|baseline|border|''Drzewo motywów (katalog i pliki) tuż po jego utworzeniu. Jest praktycznie pusty'']] <div class="simplebox">[[File:help.png]] Zasoby (jpg, png itp.) z oryginalnego motywu są kopiowane podczas rozszerzania motywu. Dzieje się tak dlatego, że jeśli lokalnie skopiujesz plik CSS z oryginalnego motywu i jeśli odnosi się on do tych plików (jak w instrukcji obrazu tła), będzie musiał znaleźć te obrazy w bieżącej ścieżce motywu.</div> Edytor motywu Extends_monochrome wygląda następująco: [[Plik:Edycja Extends Monochrome.jpg|center|baseline|border|'' Edycja motywu Extends_monochrome'']] <br /><br /> Nie ma dużej różnicy w stosunku do starego edytora motywów. Wymieńmy najważniejsze: <br /> * Słowo kluczowe '''inherited''' na liście plików. Oznacza to, że pliku nie ma w katalogu motywu i zostanie użyty plik z oryginalnego motywu. [[File:Inherited.jpg|center]] <br> * Główny edytor ( [https://ace.c9.io ACE Editor ]) pokazuje zawartość wybranego pliku. Pliki zawierają nie tylko HTML, CSS czy JS, ale także instrukcje Twig. Te instrukcje Twig dają nam możliwość przeniesienia logiki do widoków tematycznych, które wcześniej znajdowały się głęboko w rdzeniu, a które teraz można dostosować. [[Plik:Kod Twig w edytorze.jpg|center|''Some twig kod dla listy ankiet'']] <br> * Dlatego w rozwijanym menu wyboru w górnym menu dostępnych jest teraz więcej typów ekranów. Zauważysz strony takie jak „Lista ankiet”, „Wczytaj”, „Zapisz”, „Błąd”, „Rejestracja”, „Oceny”, „Drukuj odpowiedzi”, które nie były wcześniej dostępne lub których tak naprawdę nie mogłeś dostosować wcześniej. [[Plik:Newscreens editables.jpg|195px|center|''Teraz możesz dostosować wszystkie ekrany'']] <br /> * Link „wskazówka” na dole listy plików umożliwia Twigowi dodanie obrazu do kodu HTML [[Plik:Tip image.png|605px|center]] <br /> * Przycisk „zapisz zmiany” staje się przyciskiem „Kopiuj do motywu lokalnego i zapisz zmiany” [[File:Copytolocal.png|360px|center]] <span id="Quick_example:_adding_a_picture"></span> ====Krótki przykład: dodanie zdjęcia ==== Przycisk „Kopiuj do motywu lokalnego i zapisz zmiany” zrobi dokładnie to, co mówi: jeśli dokonasz edycji czegokolwiek w pliku, a następnie klikniesz ten przycisk, plik zostanie skopiowany do edytowanego motywu i zapisz zmiany. <br> Przykładowo: kliknij plik układ_global.twig, następnie tuż przed zawartością bloku ({% block content %}) dodaj tekst „TEST” i kliknij przycisk. Możesz zobaczyć, że etykieta pliku została zmieniona z „dziedziczonej” na „lokalna”, a teraz przycisk jest prostym przyciskiem „zapisz zmiany”. [[Plik:After Edition.png|center|''zaraz po kliknięciu przycisku'']] <br> Jeśli otworzysz eksplorator plików i przejdziesz do katalogu upload/themes/extends_monochrome/views/, zobaczysz, że zawiera on tylko jeden plik, plik układ_global.twig i że znajduje się tam ciąg „TEST”.!N ![[Plik:Drzewo z układem globalnym strzałka.png|center|''Teraz plik jest obecny w Twoim motywie'']] <br><br> Teraz zamiast losowego tekstu dodamy obrazek. Jeśli klikniesz na link z wskazówką, wyświetli się informacja: <br> Aby użyć obrazka w pliku .twig: '''{{ image('./files/myfile.png', 'alt-text dla mojego pliku', {"class": "mojaklasa" }) }}''' <br> Jeśli przeczytałeś dokumentację Twiga (a powinieneś był to zrobić w tym momencie), wiesz, że '''{{function( ) }}<nowiki /> „” wyświetli wynik funkcji na ekranie. Tutaj funkcją jest image( ). <div class="simplebox">[[File:help.png]] Jeśli ciekawi Cię, co robi, możesz znaleźć to w kodzie tutaj (wersja RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 /application/core/LS_Twig_Extension.php#L219-L237 funkcja image() w RC3] Jeśli nie rozumiesz kodu: nie martw się, nie musisz wiedzieć, jak to działa, ale po co go używać i jak go używać. </div> <br> Powinieneś używać funkcji image() z dwóch powodów: * Funkcja image przegląda motyw, aby znaleźć obraz. Jeśli motyw, nad którym pracujesz, jest rozszerzony na inny motyw i jeśli skopiujesz plik do miejsca, w którym lokalnie wstawiłeś obraz, ale obraz ten nie zostanie skopiowany do motywu lokalnego, przejdzie on przez drzewo dziedziczenia motywu, aby znaleźć miejsce to zdjęcie to. * Będzie korzystać z menedżera zasobów, co poprawi wydajność Twojego motywu. Więcej informacji na ten temat znajdziesz w dokumentacji Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/ <div class="simplebox"> A więc, aby dodać zdjęcie do motywu: * po prostu prześlij je jak zwykle za pomocą narzędzia do przesyłania plików po prawej stronie, a następnie dodaj je w dowolnym miejscu w dowolnym pliku twig: '''{ { image('./files/myfile.png') }}''' * Jeśli chcesz dodać alternatywny tekst do swojego zdjęcia (dla czytników ekranu i sprawdzania poprawności HTML), dodaj: {{ image('./files/myfile.png'), ''' 'mój tekst alternatywny' ' '' }} * Jeśli chcesz dodać atrybut klasy i dodać do niego identyfikator: {{ image('./files/myfile.png'), 'mój tekst alternatywny', ''' {“class”: “a_nice_css_class ”, „id”: „any_id”} ''' }} </div> ====Niektóre rzeczy na naszej liście DO ZROBIENIA==== * Daj użytkownikom możliwość przesłania niestandardowego pliku podglądu z samego edytora * Dodaj przycisk umożliwiający usunięcie pliku lokalnego i powrót do instrukcja dziedziczona * Skopiuj tylko obraz użyty w plikach CSS (poprzez wyszczególnienie ich w manifeście jako plik do skopiowania) * Przypomnij, który motyw rozszerza bieżący (jeśli istnieje) ==Opcje motywu== Kolejną nowością LS3 jest strona opcji motywu. Jak zobaczymy później, twórcy motywów mogą tworzyć własne opcje, a nawet własną stronę opcji administratora. Tutaj szybko zobaczymy, jak działa strona opcji Motywów podstawowych. Aby uzyskać dostęp do opcji motywu na poziomie globalnym: kliknij „opcje motywu” na liście motywów ===Opcje zaawansowane=== {{QS:Edytor motywów - opcje zaawansowane}} <span id="Simple_options"></span> ===Proste opcje=== Strona opcji Simple pochodzi z samego szablonu. Robi się to poprzez plik twig i trochę javascriptu w katalogu /options motywu: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Uszkodzony link) <div class="simplebox"> [[File:help.png]] Ta strona może mieć zupełnie inny motyw, dlatego gorąco zachęcamy dostawców motywów do stworzenia własnego wyglądu i stylu.</div> [[File:Options.png|kciuk|750px|centrum]] <br><br> Prosta strona opcji po prostu wypełnia zaawansowane formularze. Możesz to zobaczyć, włączając lub wyłączając ustawienie na prostej stronie i obserwując, jak odpowiednie dane wejściowe w formularzu zaawansowanym są odpowiednio modyfikowane. Na przykład w prostych opcjach szablonu domyślnego, jeśli zmienisz motyw Bootswatch na „Ciemny”, a następnie klikniesz kartę opcji zaawansowanych (nawet bez zapisywania), zobaczysz, że pole „Cssframework Css” zmieniło się z {"zamień": [["css/bootstrap.css","css/flatly.css"]]}<br> do<br> {"zamień": [["css/bootstrap.css","css/darkly.css"]]} <br> Oto różne proste opcje motywów Core: *'''Tryb Ajax:''' Czy następna strona powinna zostać załadowana poprzez ajax (szybciej), czy poprzez przeładowanie strony (lepiej do celów debugowania)! *'''Obraz tła:''' jeśli ustawiony na Tak, obraz o nazwie wzór.png zostanie załadowany (zostanie zastąpiony przez selektor plików w Master) *'''Kontener Box:''' jeśli ustaw na Nie, pytania nie będą zawarte w ramce (więc możesz używać dużych tablic większych niż szerokość ekranu) *'''Brandlogo:''' jeśli ustawione na nie, nazwa ankiety będzie brzmieć pokazane na górnym pasku, w przeciwnym razie możesz wybrać jeden z obrazów w katalogu plików, który będzie używany jako obraz logo. *'''Animuj treść:''' jeśli ustawione na tak, możesz wybrać jedną z animacji do zastosowania po załadowaniu treści ankiety *'''Animacja pytania:''' to samo z pytaniami *'''Animacja alertów:''' to samo z alertami *'''Bootstrap motyw:''' tutaj możesz wybrać motyw Bootstrap do załadowania. Pochodzą z Bootswatch https://bootswatch.com/3/ <br> Biblioteka używana do animacji to animate.css: https://daneden.github.io/animate.css/ Oczywiście dostawca motywów może dodać własną bibliotekę animacji lub w ogóle nie dodawać żadnej biblioteki animacji. <div class="simplebox">[[File:help.png]] Motywy monochromatyczne korzystają z tego samego motywu kolorów bootstrap, co interfejs administratora. Nie używają systemu zastępowania frameworka CSS, ale po prostu dodają plik CSS. Ilustruje więc inny sposób radzenia sobie z niestandardowymi motywami dla dostawców motywów.</div> <span id="Inheritance_system"></span> ===System dziedziczenia=== W poprzedniej części widzieliśmy, że motyw może rozszerzać inny motyw. Konfiguracja motywu może również dziedziczyć z innej konfiguracji motywu. Oznacza to, że dla danego motywu możesz mieć konfigurację pod adresem * poziom globalny (ten, który właśnie widzieliśmy dostępny z listy tematów) * na poziomie grupy ankiety * ostatni na poziomie ankiety. Każdy parametr na pewnym poziomie może dziedziczyć z wyższego poziomu: dziedziczenie grupy ankiet. Najpierw przyjrzyjmy się poziomowi grupy ankiety. <span id="At_survey_group_level"></span> ====Na poziomie grupy ankiety==== Rzeczywiście, jedną z innych wielkich nowości LS3 jest system grup ankietowych. Możesz teraz tworzyć różne grupy w celu porządkowania ankiet. Aby uzyskać do niej dostęp należy przejść do listy ankiet, a następnie kliknąć na zakładkę grupy ankiet: [[File:Surveygroup.png|thumb|800px|center|''Zakładka grupy ankiet'']] <br> Na tej liście znajdują się dwa przyciski akcji. Jeśli grupa jest pusta, możesz ją usunąć. W przeciwnym razie zawsze możesz go edytować. Klikając przycisk edycji, przejdziesz do strony konfiguracji grupy ankiet: [[File:Surveygroupedit.png|thumb|800px|center|''Edytowanie domyślnej grupy ankiet'']] <br> Trzecia zakładka na tej stronie nazywa się „Opcje szablonu dla tej grupy ankiet”. Jeśli na nią klikniesz, zobaczysz tę samą listę motywów, co na liście motywów, z tą różnicą, że tutaj widoczny jest tylko przycisk opcji (do edytora motywów można dotrzeć tylko z listy głównej). <br> Teraz, jeśli klikniesz opcję Szablon domyślny, zobaczysz następujący komunikat: [[File:Option group inherit.png|thumb|800px|center|''W grupie ankiet opcje szablonu są dziedziczone domyślnie'']] <br> * '''Dziedzicz wszystko''' oznacza, że cała konfiguracja zostanie odziedziczona z poziomu konfiguracji globalnej. * Jeśli przejdziesz do „strony opcji zaawansowanych”, zobaczysz, że wszystkie pola są ustawione na dziedziczenie. * Jeśli klikniesz „nie” dla opcji „Dziedzicz wszystko” w prostych opcji, ponownie zobaczysz stronę bardzo podobną do strony opcji globalnych. Jedyna różnica polega na tym, że dla każdego pola można ustawić wartość tak, nie lub dziedziczyć; a każdy selektor listy rozwijanej ma wartość „dziedzicz”. [[Plik:Inherit group.png|thumb|800px|center|''Każde ustawienie może mieć wartość dziedziczoną'']] <div class="simplebox">[[File:help.png]] Grupa ankiety może być dzieckiem innej grupy. W tym przypadku będzie dziedziczyć po swoim rodzicu.</div> ====Na poziomie ankiety==== Podczas edycji ankiety, w menu na lewym pasku zobaczysz nową pozycję „Opcje motywu”. Spowoduje to przejście do strony opcji Motywu wybranego dla bieżącej ankiety. Znajdziesz ten sam system dziedziczenia, co w grupie ankiety, ale tym razem opcja dziedziczenia oznacza, że ustawienie zostanie odziedziczone z grupy ankiety ankiety. [[File:Options survey.png|thumb|800px|center|''Theme Options at Survey Level'']] ==Przykład przypadku użycia== Załóżmy, że używasz tego samego motywu dla różnych firm (A i B). Ustawiasz swoje ulubione opcje na poziomie globalnym (np.: ajax włączony, animacja ciała ze wsunięciem, alerty z impulsem). Następnie tworzysz grupę ankiet dla każdej firmy: grupę ankiet dla firmy A, która będzie hostować wszystkie ankiety tej firmy, oraz ankietę dla firmy B, która będzie hostować wszystkie ankiety firmy B. Na tym poziomie możesz ustawić tylko logo i tło, a pozostałe opcje zostaną odziedziczone. Zatem wszystkie ankiety w grupie A będą korzystały z logo firmy A, a wszystkie ankiety z grupy B – logo firmy B. W przypadku jednej z ankiet firmy A możesz użyć innego tła w powiązaniu z tematem ankiety: wystarczy zmienić tło w opcjach na poziomie ankiety. Jeśli ktoś w firmie B powie Ci, że alert pulsujący jest zbyt agresywny i wolałby coś płynniejszego, na przykład zanikanie, po prostu zmieniasz animację alertu na poziomie Grupy ankiet B i wszystkie ankiety w tej grupie będą teraz korzystać z tej animacji. Jeżeli firma A zmieni swoje logo, możesz je zmienić na poziomie Grupy Ankiet A, a wszystkie badania tej grupy będą korzystały z nowego logo. <br> <div class="simplebox"> Przykłady te opierają się na bieżących opcjach motywu podstawowego. Ale oczywiście, jeśli jesteś dostawcą motywów lub potrafisz pisać skrypty za pomocą twig, możesz dodać własne opcje. Możesz na przykład dodać opcję „stopka informacyjna”, w której możesz dodać dane, takie jak strona internetowa firmy lub numer telefonu, aby uzyskać pomoc. Następnie, jeśli firma A ma różne działy i różne numery telefonów, możesz po prostu utworzyć jedną podgrupę dla każdego działu w Grupie ankiety A. Każda podgrupa będzie miała swój własny numer telefonu w tych opcjach.</div> <span id="FAQ_about_theme_customization"></span> = Często zadawane pytania dotyczące dostosowywania motywu = Znajdziesz tutaj odpowiedzi na pytania zadane na forum, które mogą pomóc w dostosowaniu motywu. ==Dostosowywanie CSS/JS: skonsultuj się z menedżerem zasobów („dlaczego moje zmiany nie zostały zastosowane?”) == <br /> Jeśli próbujesz zaktualizować CSS/JS motywu, bezpośrednio edytując kod w swoim ulubionym edytorze, możesz być zaskoczony, że Twoje zmiany nie zostaną zastosowane. <br /> Od wersji 2.50 LS używa menedżera zasobów Yii: [http://www.yiiframework.com/wiki/148/understanding-assets/ Dokumentacja Yii o aktywach] <br /> Przenosi pliki CSS/JS motywu do podkatalogu tmp/ z losowym ciągiem znaków (np.: „tmp/1ef64ml/”). Jeśli więc dokonasz jakichkolwiek zmian w pliku css/js i poinformujesz o tym menedżera zasobów, pliki zostaną skopiowane do nowego podkatalogu z nową nazwą, dzięki czemu pamięć podręczna przeglądarki użytkownika zostanie zaktualizowana i zobaczą nowy css/js . W przeciwnym razie musieliby wyczyścić pamięć podręczną przeglądarki. <br /> Tutaj linki CSS w nagłówku, gdy menedżer zasobów jest włączony: <br /> [[File:Assets on vanilla.jpg]] <br /> Jak widać, wszystkie odnoszą się do podfolderów tmp/. <br /> Tutaj linki CSS w nagłówku, gdy menedżer zasobów jest wyłączony: <br /> [[File:Asset off.png]] <br /> Jak widać, wskazują one na prawdziwe pliki motywu. <br /> <div class="simplebox">[[File:help.png]] Oczywiście, jeśli AssetCenter nie będzie wiedział, że zmieniłeś plik, stary plik ze starego katalogu tmp/pozostanie niezmieniony, a Twoje zmiany nigdy nie zostaną zastosowane.</div> Tak więc, kiedy edytujesz CSS/JS motywu, masz różne możliwości: *'''Możesz użyć Edytora motywów LS:''' Zajmuje się on zarządzaniem zasobami i nie musisz nie martw się o nic *'''Możesz włączyć tryb debugowania:''' wyłączy to menedżera zasobów, więc wywoływane będą prawdziwe pliki css/js twoich motywów (ale wtedy musisz odświeżyć pamięć podręczną przeglądarki przy każdym ładowaniu) * '''Możesz odświeżyć pamięć podręczną zasobów''': z Ustawienia globalne -> Ogólne -> Wyczyść pamięć podręczną zasobów [[File:Clearassets-ls3 3.png]] <div class="simplebox">[[File:help.png]] '''Używanie edytora motywów do edycji niestandardowego CSS jest zdecydowanie najlepszym rozwiązaniem.'''</div> Korzystanie z edytora motywów pomoże Ci zrozumieć architekturę nowego silnika motywów. Ponadto, jeśli dostosowujesz Fruity, uważaj na specyfikację CSS: większość definicji wykorzystuje selektor „.fruity” (jeden z klas element ciała) == Dodawanie własnych czcionek do mojego motywu == === Prosty sposób: użycie Google Font CDN === Bootswatch Survey Theme korzysta z Google Font CDN. Rzućmy okiem, jak to działa: 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> Następnie czcionka Lato jest używana poprzez reguły CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 <syntaxhighlight lang="css"> ciało { ... rodzina czcionek: "Lato"; ... } </syntaxhighlight> Możesz w ten sposób użyć dowolnej czcionki Google w swoim niestandardowym motywie. Oczywiście powinieneś usunąć selektor czcionek z opcji swojego motywu. Usuń te linie w options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230 === Używanie czcionek lokalnych === Oczywiście możesz także pobrać pliki czcionek i używać ich z lokalnego serwera, a nie z Google CDN (lepiej dla prywatności). Aby mieć przykład, jak to zrobić, tutaj nasza lokalna wersja czcionki noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css <syntaxhighlight lang="css"> @czcionka { rodzina czcionek: 'Noto Sans'; waga czcionki: 300; styl czcionki: normalny; src: url('./font-src/Noto/NotoSans-Regular.ttf'); } ... </syntaxhighlight> Możesz użyć bardzo podobnej definicji w pliku css motywu, a następnie skopiować plik NotoSans-Regular.ttf do folderu css/font-src/ motywu. Następnie zastosuj tę czcionkę do swojego ciała (lub dowolnego innego elementu), jak powyżej, i usuń domyślną opcję selektora czcionek. === Tworzenie własnego selektora czcionek w opcjach === Na razie nie można łatwo użyć podstawowego selektora czcionek, aby dodać własną czcionkę w opcjach. Musimy najpierw dać użytkownikowi końcowemu możliwość przesyłania niestandardowych pakietów (patrz następny akapit: Spojrzenie na selektor czcionek Fruity) <br> Oto jak postępować: <br> *Dodaj dwie czcionki (my_custom_font i my_custom_other_font) do swojego motywu, używając CDN lub serwera lokalnego. *Następnie w pliku css dodaj dwie nowe klasy: <br> <syntaxhighlight lang="css"> .font-my_custom_font { rodzina czcionek: 'my_custom_font '; } .font-my_custom_other_font { rodzina czcionek: 'my_custom_other_font'; } </syntaxhighlight> *W pliku XML swojego motywu dodaj opcję czcionki (domyślną będzie my_custom_font) : <syntaxhighlight lang="xml"> <options> .... <font>moja_niestandardowa_czcionka</font> </options> </syntaxhighlight> * w Option.twig dodaj selektor czcionek, dodając te linie (na razie nietestowane, więc przyjdź poskarżyć się na forum, jeśli to nie działa): <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'> {{ "Moje niestandardowe czcionki" | T }}</div> <div class='panel-body'> <div class='form-group row'> <label for='simple_edit_font' class='control-label'>{{ "Wybierz czcionkę:" | t }}</label> <div class='col-sm-12'> <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% if templateConfiguration.sid nie jest pusty lub templateConfiguration.gsid nie jest pusty %} //Czy nie powinien to być „motyw” zamiast „szablon”? {% ustawione opcje czcionki = opcje czcionki ~ '<option value = "inherit" > Dziedziczyć</option> ' %} {% endif %} <optgroup label="{{ "My Custom fonts" | t }}"> <option class="font-my_custom_font" value="custom_font" data-font-package="" > Zwyczaj</option> <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" > Inny</option> </optgroup> </select> </div> </div> </div> </div> </div> </div> </syntaxhighlight> <br> Teraz Twoi użytkownicy powinni mieć możliwość wyboru pomiędzy tymi dwiema czcionkami. === Rzut oka na selektor czcionek Fruity === W przyszłości umożliwimy użytkownikowi końcowemu przesyłanie własnych pakietów zasobów, w tym pakietów czcionek. Ułatwi to wszelkie dostosowywanie czcionek. <br> Aby zrozumieć pakiety Yii: <br> http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail <br> <br> Pakiety LimeSurvey są zdefiniowane w różnych plikach. Pakiety czcionek są zdefiniowane tutaj: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php <br> Na przykład pakiet czcionek Noto jest zdefiniowany tutaj: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53 <br> <syntaxhighlight lang="php"> 'font-noto' => array( 'devBaseUrl' => 'zasoby/czcionki/', 'basePath' => 'czcionki', 'css' => array( ' noto.css', ), ), </syntaxhighlight> <br> Zawierający plik noto.css znajduje się tutaj: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css <br> Zwróć uwagę na definicję klasy css ".font-noto" na jej końcu: <syntaxhighlight lang="css"> @czcionka { rodzina czcionek: 'Noto Sans'; ... } ... .font-noto{ rodzina czcionek: 'Noto Sans'; } </syntaxhighlight> <br> Następnie w motywie Vanilla czcionka noto jest używana poprzez dodanie pakietu noto i zdefiniowanie opcji czcionki noto: <br> https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 <syntaxhighlight lang="xml"> <packages> .... <add> czcionka-noto</add> </packages> </syntaxhighlight > https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 <br> <syntaxhighlight lang="xml"> <options> .... <font>uwaga</font> </options> </syntaxhighlight> <br> Następnie czcionka klasy treści jest definiowana przy użyciu tej wartości: 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> Oczywiście plik XML zawiera tylko domyślne wartości konfiguracji motywu. Ale w rzeczywistości te wartości są zdefiniowane i odczytywane w bazie danych (tabela „konfiguracja_szablonu” (Pytanie: „szablon_” z „motyw_”?) jako ciągi json. Plik Option.js po prostu używa wartości selektora czcionki prostej opcji aby zmienić wartość w formularzu karty zaawansowanej: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174 Kiedy zatem dostępna będzie funkcja „prześlij pakiet zasobów”, łatwo będzie dodać skrypt skanujący wszystkie istniejące pakiety czcionek w celu dodania ich do selektora. == Dodawanie opcji motywu do kontrolowania rozmieszczenia i wyświetlania elementów ankiety == W tym samouczku pokażemy, jak dodać opcje do rozszerzonego motywu, aby wyświetlać elementy ankiety w różnych lokalizacjach. W tym przypadku utworzymy opcje motywu, aby tytuł ankiety był wyświetlany w dwóch różnych lokalizacjach. <div class="simplebox"> [[File:help.png]] Dla uproszczenia tutorial oparliśmy na rozszerzeniu motywu „bootswatch” w LimeSurvey w wersji 3.4.3.</div> === Utwórz niestandardowy motyw === #Rozszerz motyw „bootswatch” zgodnie z powyższym opisem. #Skopiuj plik <span style="color: #BA2121;">niestandardowe.css</span> do motywu lokalnego zgodnie z powyższym opisem. ===Utwórz nowe opcje motywu=== #Skopiuj zawartość <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> . #Otwórz <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> w edytorze i znajdź „{# Motyw Bootstrap Bootswatch #}”. Bezpośrednio przed swoim rodzicem<nowiki><div class='row'></nowiki> element, dodaj to:<syntaxhighlight lang="html"> {# Niestandardowa nazwa ankiety w pasku nawigacyjnym #} <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'>Nazwa ankiety w pasku nawigacyjnym</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'/> Tak 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'/> Nie!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Niestandardowa nazwa ankiety poniżej paska postępu #} <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'>Nazwa ankiety poniżej paska postępu</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'/> Tak 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'/> Nie!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div></syntaxhighlight> #Otwórz <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> i dodaj dwa elementy do bloku „opcje”, aby wyglądało to tak:<syntaxhighlight lang="xml"><options> <ajaxmode> NA</ajaxmode> ... <surveyname1> NA</surveyname1> <surveyname2> NA</surveyname2> </options></syntaxhighlight> #To powinno dać ci dwie nowe opcje na ekranie Opcje motywu, takie jak ta:<br /> [[File:Tutorial_tp_1_1.png]] ===Zmodyfikowany widok tytułu ankiety na pasku nawigacyjnym=== #Utwórz nowy katalog <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/ .</span> #Kopiuj <span style="color: #BA2121;">/themes/survey/vanilla/ widoki/subviews/header/nav_bar.twig</span> do tego nowego katalogu. #Otwórz <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> i znajdź „{# Opcja logo #}”. W tym miejscu zmodyfikuj instrukcję IF dla logo/nazwy ankiety, aby wyglądała następująco:<syntaxhighlight lang="html"> {# Opcja logo #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-Response"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %}</syntaxhighlight> #Dodaj coś takiego do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-brand { wysokość linii: 60px; rozmiar czcionki: 32px; }</syntaxhighlight> #Przełącz opcję motywu „Nazwa ankiety w pasku nawigacyjnym” na „Tak” #Powinieneś zobaczyć to:<br /> [[Plik:Tutorial_tp_1_2.png]] ===Zmodyfikowany widok tytułu ankiety pod paskiem postępu=== #Utwórz nowy katalog <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> . #Skopiuj <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> do tego nowego katalogu. #Otwórz <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> i dodaj<nowiki><h1></nowiki> element nazwy ankiety. Wygląda to więc tak: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Niestandardowa nazwa ankiety #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> {% endif %} {# Nazwa grupy #} {{ include('./subviews/survey/group_subviews/nazwa_grupy.twig') }} {# Opis grupy #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# ZADAWAJ PYTANIA To jest główna część. Wyświetli każde pytanie dla tej grupy #} <!-- PRESENT THE QUESTIONS --> {% dla pytania w 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> # Dodaj coś takiego do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-brand { wysokość linii: 60ph1.nazwa-ankiety niestandardowej { margines: 0; wyrównanie tekstu: do środka; }</syntaxhighlight> #Przełącz opcję motywu „Nazwa ankiety poniżej paska postępu” na „Tak” #Powinieneś zobaczyć to:<br /> [[Plik:Tutorial_tp_1_3.png]] ===Pobrania=== * Przykładowy rozszerzony motyw: [[Media:Test_survey_names.zip]] =Tworzenie motywu od podstaw= Dokumentacja już wkrótce. Na razie dam tylko kilka wskazówek. <span id="Theme_structure"></span> ==Struktura motywu== === Pliki i katalogi === Tworząc motyw od zera, nie musisz szanować struktury plików/katalogów/css/js z Vanilli. Obowiązkowy css/js jest dodawany przez rdzeń (nadal możesz go usunąć, jeśli zajdzie taka potrzeba) Jedyne pliki, jakie musi zawierać Twój motyw, to pliki układu: * '''layout_global.twig''' : renderuj strony do ankiet * ''layout_survey_list.twig''' : renderuj listę ankiet (jeśli ten motyw jest ustawiony jako domyślny) * '' „layout_errors.twig”: używany do renderowania błędów blokujących renderowanie ankiety. (zły identyfikator ankiety, pusta grupa w grupie podglądu itp.) * ''layout_user_forms.twig''': renderuje formularze użytkownika takie jak: token (uczestnik ankiety) i zarejestruj się. * '' 'layout_print.twig''': używany do drukowania ankiety w formacie pdf * ''layout_printanswers.twig''': drukuje odpowiedzi Zawartość tych plików, pliki, które zawierają lub nie, zależy wyłącznie od Ciebie. Wszystkie inne pliki i katalogi, które znajdziesz w Vanilli, są całkowicie opcjonalne, możesz zorganizować swój kod tak, jak chcesz. <div class="simplebox">[[File:help.png]] Jeśli przeczytasz kod renderujący frontend, zobaczysz, że nazwy tych plików pojawiają się bezpośrednio w nim. Dlatego są obowiązkowe. Np.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462 </div> <span id="Content"></span> === Treść === W pliku Layout_global.twig Vanilli zobaczysz, że używamy zmiennej o nazwie „include_content”, aby zdecydować, co pokazać https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ układ_global.twig#L114-L115 <syntaxhighlight lang="php"> {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %} {% include './subviews/content/outerframe.twig' z {'include_content': sViewContent } %} </syntaxhighlight> aSurveyInfo.include_content informuje Cię, jaka akcja jest aktualnie wykonywana: wyświetlanie pytań? pokazuje wynik przesłania? wyświetlanie jasnego wszystkiego? itp Jak widać, w wersji waniliowej tworzymy jeden plik, który będzie dołączany do akcji. Jeśli więc chcesz poznać listę akcji, po prostu sprawdź katalog wanilii „views/subviews/content” i usuń rozszerzenie „twig” : https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content * '''clearall.twig''' * '''pierwsza strona.twig'' * '''load.twig'' * '''mainrow.twig''' * '''main.twig''' * '''optin.twig'' * '''optout.twig'' * '''outerframe.twig'' ' * '''printanswers.twig''' * '''quotas.twig''' * ''register.twig''' * '''zapisz.twig ''' * '''submit_preview.twig''' * '''submit.twig''' * '''userforms.twig''' Jeśli utworzyłeś już je dla wersji 2.x LimeSurvey, zauważysz, że większość z nich odpowiada starym plikom pstpl dla limesurvey 2.x. Ponownie, w twoim motywie nie masz obowiązku tworzenia tych plików o tych nazwach w tym katalogu. Możesz na przykład po prostu dodać gigantyczny przełącznik w pliku układ_global.twig z żądanym kodem HTML dla każdej akcji. <span id="The_manifest_config.xml"></span> === Manifest config.xml === Manifest motywu zawiera główne informacje na jego temat. Po zainstalowaniu motywu zawartość manifestu zostanie załadowana do bazy danych, w dwóch różnych tabelach: szablon i szablon_konfiguracja. Dlatego za każdym razem, gdy modyfikujesz manifest motywu, musisz go odinstalować i zainstalować ponownie (lub po prostu zresetować). Ponieważ ten proces jest denerwujący podczas tworzenia motywu, możesz wymusić bezpośrednie użycie pliku XML zamiast wpisów DB. Aby to zrobić, w config.php włącz tryb debugowania i ustaw „force_xmlsettings_for_survey_rendering” na true. <span id="The_metadata_section"></span> ==== Sekcja metadanych ==== Nic skomplikowanego: tylko główne informacje na temat Twojego motywu. Zostanie on umieszczony w tabeli templates_configuration <syntaxhighlight lang="xml"> <metadata> <name> nazwa_twojego_motywu</name> <title> Tytuł Twojego motywu</title> <creationDate> 16.10.2017</creationDate> <author> Twoje imię</author> <authorEmail> twój@email.org</authorEmail> <authorUrl> http://www.twojastrona.org</authorUrl> <copyright> Twoje prawa autorskie</copyright> <license> Licencja na Twój motyw</license> <version> wersję swojego motywu</version> <apiVersion> 3</apiVersion> <description> Opis Twojego motywu</description> <extends> motyw_rodzica</extends> </metadata> </syntaxhighlight> Kilka uwag: * '''name''': będzie używany jako klucz w bazie danych. Musi więc być unikalny i nie powinien zawierać żadnych znaków specjalnych (żadnych spacji). Pamiętaj, że przypadki nie będą brane pod uwagę * '''Tytuł''': będzie używany do wyświetlania nazwy motywu na różnych listach. Może zawierać znaki specjalne * '''opis''': będzie używany na głównej liście tematów ankiety. Może zawierać znaki specjalne, a nawet kod HTML za pomocą * '''extends''': opcjonalne, definiuje motywy nadrzędne. Jeśli więc w tym motywie nie ma żadnego pliku (twig/js/css/jpg itp.), będzie on szukał go w motywie nadrzędnym <div class="simplebox">[[File:help.png]] Jeśli rozszerzyłeś jeden z 3 głównych motywów (Vanilla, Bootswatch, Fruity), możesz zmienić wartość „rozszerza” z jednego motywu nadrzędnego na drugi. Oczywiście będziesz musiał zresetować motyw.</div> <span id="The_files_section"></span> ==== Sekcja plików ==== Ten jest ważny. Zostanie on umieszczony w tabeli template_configuration, w polu files_css, files_js, files_print_css jako tablice json. Np.: sekcja plików motywu 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/motyw.css</replace> <replace> css/niestandardowy.css</replace> <remove> niesamowite-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> skrypty/custom.js</replace> </js> <print_css> <add> css/print_theme.css</add> </print_css> </files> </syntaxhighlight> Wszystkie pliki CSS/JS znajdujące się w tej sekcji zostaną załadowane po uruchomieniu ankiety (w trybie ajax. Jeśli tryb ajax jest wyłączony, to oczywiście wszystkie pliki będą ładowane ponownie na każdej stronie). Zostaną dodane do pakietu zasobów Yii na podstawie nazwy motywu. Zatem gdy AssetCenter jest włączony (tryb debugowania wyłączony), pliki te zostaną skopiowane do katalogu tmp wraz z resztą motywu (aby można było użyć ścieżki względnej w CSS i JS, aby dotrzeć do plików obrazów). O menedżerze zasobów w Yii: https://www.yiiframework.com/wiki/148/understanding-assets O pakietach w Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#szczegóły-pakietów Będą korzystać z systemu dziedziczenia. Oznacza to, że jeśli dodasz plik CSS/JS do motywu, ale nie ma go w motywie, silnik sprawdzi wszystkie motywy macierzyste tego motywu i użyje pierwszego, który znajdzie. Jeśli więc użytkownik rozszerzy Twój motyw za pomocą edytora motywów, wszystkie te pliki zostaną odziedziczone w jego motywie. Słowa kluczowe odnoszą się do tego systemu dziedziczenia. * '''add''' : doda plik do motywu i do całego odziedziczonego motywu * '''replace''': zastąpi plik motywu macierzystego * „usuń”: usunie plik z „dowolnego” pakietu, nawet pakietu podstawowego (od wersji 3.14) <div class="simplebox">[[File:help.png]] Pamiętaj, że możesz ustawić w config.php 'force_xmlsettings_for_survey_rendering', aby konfiguracja była odczytywana z XML zamiast z DB (bez potrzeby resetowania). Ułatwi to testowanie modyfikacji plików XML i zapobiegnie konieczności odinstalowywania/ponownej instalacji motywu przy każdej modyfikacji pliku XML</div> Kilka uwag na temat tych słów kluczowych: ===== Wskazówki dotyczące dziedziczenia ===== Jak wyjaśniono wcześniej, słowo kluczowe "add" może odnosić się do pliku znajdującego się w jednym z motywów macierzystych. Możesz więc „dodać” plik w tej sekcji i nadal nie mieć tego pliku w swoim motywie, ale w jednym z jego motywów nadrzędnych. Silnik sprawdzi wszystkie motywy nadrzędne i użyje pierwszego, który znajdzie. Jeśli nie może znaleźć pliku, a tryb debugowania jest włączony w konfiguracji, a tryb debugowania frontendu js jest włączony w ustawieniach globalnych, w konsoli zostanie wyświetlony komunikat z ostrzeżeniem. Np.: jeśli dodamy my_theme:<add> css/nieistniejący.css</add> , w konsoli zobaczymy: <syntaxhighlight lang=""> (¯`·._.·(¯`·._.· Błąd konfiguracji motywu ·._.·´¯)·._.·´¯) Nie można znaleźć pliku „css/unexisting.css” zdefiniowanego w motywie „my_theme” </syntaxhighlight> Jeśli tryb debugowania jest wyłączony, żaden błąd nie będzie widoczny. Silnik po prostu zignoruje nieprawidłowe instrukcje add. <span id="When_to_use_add,_when_to_use_replace,_when_can_I_just_leave_it_to_the_parent_theme?"></span> ===== Kiedy używać dodawania, kiedy zastępować, kiedy mogę po prostu pozostawić to motywowi nadrzędnemu? ===== Po pierwsze: dodaj i zamień to to samo słowo kluczowe. Możesz użyć jednego lub drugiego, silnik zrobi to samo. Są one odrębne dla ludzkich czytelników, więc rozumieją, jaki był Twój zamiar. Nie możesz dodać pliku o tej samej nazwie co motyw macierzysty: zawsze go zastąpi. np.: Jeśli masz plik o nazwie „moj_motyw_matki/foo.css” i dodasz plik o nazwie „foo.cs” w motywie potomnym, do motywu zostanie dodany tylko „motyw_mój_marki/foo.css”. Jeśli chcesz zachować „motyw_mój_matki/foo.css”, po prostu wybierz inną nazwę dla „motywu_córki/foo.css”, np. „motyw_córki/bar.css”. Zatem słowo kluczowe „dodaj” może zostać użyte jako słowo kluczowe „zamień”. Jeśli zastanawiasz się dlaczego: znacznie ułatwia to automatyczne generowanie odziedziczonego motywu, kopiowanie sekcji pliku działa od razu po wyjęciu z pudełka (nie ma potrzeby zmiany nazwy „dodaj” na „zamień” podczas rozszerzania pliku). Aby to wyjaśnić, weźmy przykład Fruity. Oto sekcja pliku css: <syntaxhighlight lang="xml"> <css> <add> css/variations/sea_green.css</add> <replace> css/animate.css</replace> <replace> css/motyw.css</replace> <replace> css/niestandardowy.css</replace> </css> </syntaxhighlight> Jeśli spojrzysz na plik custom.css w języku owocowym, jest on dokładnie taki sam jak plik waniliowy. Moglibyśmy usunąć plik niestandardowy.css znajdujący się w Fruity, załadowałby się plik waniliowy. Moglibyśmy usunąć to oświadczenie<replace> niestandardowe CSS</replace> z manifestu Fruity, zostanie użyta instrukcja z wanilii i załadowany zostanie waniliowy plik custom.css. Dlaczego więc używamy tego stwierdzenia<replace> niestandardowe CSS</replace> w owocowym manifeście? Odpowiedź jest prosta: ponieważ chcemy, aby użytkownik końcowy mógł rozszerzyć motyw Fruity, zmodyfikować plik w swoim motywie lokalnym i załadować ten zmodyfikowany plik z odziedziczonego motywu. Aby zrozumieć, po prostu rozszerz Fruity i spójrz na rozszerzony motyw. Rozszerzony motyw nie ma nawet pliku custom.css. Zatem zostanie użyty owocowy. Ale: jeśli użytkownik utworzy ten plik w rozszerzonym motywie (klikając „rozszerz” w edytorze motywów), wówczas plik ten zostanie załadowany z jego motywu. Ogólnie rzecz biorąc: Jeśli tworzysz motyw od zera, nie rozszerzając żadnego motywu, po prostu użyj instrukcji add, aby dodać pliki css/js. To proste. Jeśli tworzysz motyw rozszerzający inny motyw i nie chcesz, aby użytkownicy mogli rozszerzać plik css/js z motywu macierzystego: nie używaj instrukcji add w swoim manifeście. Pliki będą nadal ładowane z konfiguracji motywu macierzystego. Jeśli tworzysz motyw rozszerzający inny motyw i chcesz zastąpić plik z motywu macierzystego: użyj słowa kluczowego zamień (słowo kluczowe add będzie miało taki sam skutek) Jeśli tworzysz motyw rozszerzający inny motyw, jeśli nie zastępujesz danego pliku z css/js, ale chcesz, aby użytkownicy mogli rozszerzać ten plik: użyj w swoim manifeście instrukcji „replace” dla ten plik. Nawet jeśli nie zastąpisz pliku, używając słowa kluczowego zamień w manifeście: pozwalasz użytkownikowi to zrobić, jeśli chce to zrobić. Tylko ten ostatni przypadek wymaga trochę gimnastyki umysłowej, aby go zrozumieć, wszystkie pozostałe przypadki są trywialne. <div class="simplebox">[[File:help.png]] Możesz także rejestrować pliki CSS i JS bezpośrednio z kodu twig. Pliki te zostaną załadowane tylko wtedy, gdy zostanie wyświetlony monit o plik twig. Jeśli chcesz, aby użytkownicy mogli dziedziczyć pliki JS/Css z edytora motywów, pamiętaj o użyciu funkcji {{registerTemplateCssFile('my_style.css')}} i {{registerTemplateScript('my_script.js')}} . Jeśli nie użyjesz tych funkcji, Twój motyw może działać, ale dziedziczenie po nim zostanie przerwane. To ta sama logika, co funkcja {{image('my_picture.jpg')}} </div> <span id="The_remove_keyword"></span> ===== Słowo kluczowe usuwania ===== Słowo kluczowe „remove” jest dostępne dopiero od wersji 3.14. Za pomocą tego możesz usunąć dowolny plik css/plik z dowolnego pakietu, nawet podstawowego. Jest używany w motywie Material Premium do usuwania plików pola wyboru Awseome Bootstrap: <syntaxhighlight lang="xml"> <remove> niesamowite-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </syntaxhighlight> więc powinieneś użyć tej samej składni, co plik pakietu (np. samo „awesome-bootstrap-checkbox.css” bez ścieżki folderu nie działałoby). Pełną listę pakietów podstawowych i ich plików znajdziesz w plikach /application/config/packages.php i config/ Third_party.php. Na przykład dla Awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56 <syntaxhighlight lang="php"> 'css'=> array( 'niesamowite-bootstrap-checkbox/niesamowite-bootstrap-checkbox.css', ), </syntaxhighlight> Innym sposobem znalezienia dokładnej nazwy do użycia w tagu usuwania jest włączenie menedżera zasobów (wyłączenie trybu debugowania lub ustawienie „use_asset_manager”=>true w konfiguracji). Następnie ścieżką do użycia będzie ta znajdująca się tuż za katalogiem losowym w katalogu tmp. Na przykład dla 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> Pliki, których nie należy usuwać: '''jquery-3.1.1.min.js''': potrzebne '''jquery-migrate-3.0.0.min.js''': potrzebne '''survey.js''': potrzebne '''moment-with-locales.min.js''': potrzebne dla typu pytania dotyczącego daty (i innych, jak sądzę) '''em_javascript.js''' : wymagany dla wszystkich JavaScript ExpressionScript <span id="The_options_section"></span> ==== Sekcja opcji ==== Ta sekcja jest zależna od opcji Twojego motywu. Będzie on używany do zasilania pól „opcji” tabeli template_configuration jako tablicy json. <span id="Further_information"></span> === Dalsze informacje === * [[Motyw:Dostępna funkcja]] <span id="Some_notes"></span> == Kilka notatek == '''UWAGA''': jeśli edytujesz plik XML motywu, musisz odinstalować i ponownie zainstalować motyw, aby został wzięty pod uwagę. „UWAGA”: aby tego uniknąć, możesz wymusić użycie XML zamiast DB. W config.php włącz tryb debugowania i usuń komentarz: 'force_xmlsettings_for_survey_rendering' => true, // Odkomentuj, jeśli chcesz wymusić użycie pliku XML zamiast bazy danych (w celu łatwego tworzenia motywu) Uważaj: wszystko zostanie załadowane z XML (w tym opcje itp.) „UWAGA”: jeśli ręcznie edytujesz pliki CSS/JS (bez korzystania z Edytora motywów) i jeśli tryb debugowania jest wyłączony, możesz teraz wymusić opróżnienie zasobu. W „Ustawieniach globalnych”, „Zakładce Ogólne” kliknij przycisk „Wyczyść pamięć podręczną zasobów”. '''UWAGA''': jeśli usuniesz sekcję