थीम एडिटर

This page is a translated version of the page Theme editor and the translation is 100% complete.

परिचय

सर्वेक्षण थीम तय करती है कि आपका सर्वेक्षण प्रतिभागियों को कैसा दिखता है: पेज का लेआउट, रंग, फ़ॉन्ट, लोगो और हर प्रश्न की स्टाइलिंग। थीम Twig टेम्पलेट, CSS और JavaScript से बनाई जाती हैं और CSS फ़्रेमवर्क के रूप में Bootstrap 5 का उपयोग करती हैं।

कई सामान्य बदलावों के लिए कोड की ज़रूरत ही नहीं होती। लोगो, रंग, फ़ॉन्ट और कई डिस्प्ले सेटिंग थीम विकल्प से बदली जा सकती हैं। जब आप इससे आगे जाना चाहें, तब इस पेज पर बताए गए थीम एडिटर का उपयोग करें: अपना CSS या JavaScript जोड़ें, किसी पेज का HTML बदलें, या अपनी थीम के लिए इमेज और अन्य फ़ाइलें अपलोड करें।

LimeSurvey इन कोर सर्वेक्षण थीम के साथ आता है:

Fruity TwentyThree (fruity_twentythree): डिफ़ॉल्ट थीम।
Bootstrap Vanilla (vanilla): उन डेवलपर्स के लिए एक सादी बेस थीम, जो अपनी खुद की Bootstrap-आधारित थीम बनाना चाहते हैं।
Fruity (fruity) और Bootswatch (bootswatch): दोनों Bootstrap Vanilla का विस्तार करती हैं।

अलग-अलग प्रश्न प्रकारों का रूप प्रश्न थीम से नियंत्रित होता है, सर्वेक्षण थीम से नहीं। किसी प्रश्न के प्रकार का HTML बदलने के लिए प्रश्न थीम बनाएँ।

शुरू करने से पहले

थीम एडिटर का उपयोग करने के लिए आपके पास वैश्विक थीम अनुमति होनी चाहिए (वैश्विक अनुमतियाँ देखें) या आपको सुपरएडमिनिस्ट्रेटर होना चाहिए। थीम का विस्तार करने के लिए बनाएँ अधिकार, परिवर्तन सहेजने के लिए अद्यतन, और थीम हटाने या फ़ाइल रीसेट करने के लिए हटाएँ अधिकार चाहिए।

ध्यान दें : त्रुटियों वाली थीम उसका उपयोग करने वाले हर सर्वेक्षण को अनुपयोगी बना सकती है। थीम को लाइव सर्वेक्षण में उपयोग करने से पहले सर्वेक्षण के पूर्वावलोकन से अपने बदलावों का परीक्षण करें।

कोर थीम एडिट नहीं की जा सकतीं: उनका विस्तार करें

कोर थीम LimeSurvey के साथ ही अपडेट होती हैं, इसलिए आप उन्हें सीधे नहीं बदल सकते। किसी थीम को अनुकूलित करने के लिए उसका विस्तार करें। विस्तार करने पर एक नई उपयोगकर्ता थीम बनती है, जो अपनी पैरेंट थीम से सब कुछ विरासत में लेती है। आपकी थीम में केवल वही फ़ाइलें होती हैं जिन्हें आप बदलते हैं; बाकी सब कुछ पैरेंट थीम से लिया जाता है। इस तरह, जब LimeSurvey पैरेंट थीम को अपडेट करता है, तो आपकी थीम को भी बग फ़िक्स और सुधार मिलते रहते हैं।

किसी थीम का विस्तार करने के लिए, इनमें से कोई एक करें:

विन्यास > थीम पर जाएँ, थीम की पंक्ति के अंत में एक्शन मेन्यू (⋯) खोलें और विस्तार करें पर क्लिक करें, या
थीम को थीम एडिटर में खोलें और टूलबार में विस्तार करें पर क्लिक करें।

नई थीम के लिए एक नाम दर्ज करें। इसके बाद थीम एडिटर आपकी नई थीम खोल देता है।

थीम कहाँ संग्रहीत होती हैं

कोर थीम: आपके LimeSurvey इंस्टॉलेशन में themes/survey/।
उपयोगकर्ता थीम (विस्तारित, अपलोड की गई या इम्पोर्ट की गई थीम): upload/themes/survey/।

आप उपयोगकर्ता थीम की फ़ाइलों को सर्वर पर सीधे अपने एडिटर से भी एडिट कर सकते हैं। बाद में यह सुनिश्चित करें कि वेब सर्वर अब भी फ़ाइलें पढ़ और लिख सकता है, ताकि आप थीम एडिटर का उपयोग भी जारी रख सकें।

थीम एडिटर

थीम एडिटर खोलने के लिए विन्यास > थीम पर जाएँ, थीम की पंक्ति के अंत में एक्शन मेन्यू (⋯) खोलें और थीम एडिटर पर क्लिक करें।

यदि आप कोई कोर थीम खोलते हैं, तो एक सूचना बताती है कि यह मानक थीम है और उसका विस्तार करने के लिए एक लिंक देती है। आप उसकी फ़ाइलें और पूर्वावलोकन देख सकते हैं, लेकिन परिवर्तन सहेज नहीं सकते।

टूलबार

निर्यात: थीम को ZIP फ़ाइल के रूप में डाउनलोड करता है।
विस्तार करें: एक नई थीम बनाता है जो इस थीम से विरासत लेती है (ऊपर देखें)।
नाम बदलें: थीम का नाम बदलता है। केवल उपयोगकर्ता थीम के लिए उपलब्ध है।
हटाएँ: थीम को हटाता है। आप वह थीम नहीं हटा सकते जो डिफ़ॉल्ट थीम के रूप में सेट है।
थीम: थीम एडिटर को किसी दूसरी थीम पर स्विच करता है।
स्क्रीन: चुनता है कि पूर्वावलोकन में कौन-सा सर्वेक्षण पेज दिखे और एडिट करने के लिए कौन-सी फ़ाइलें सूचीबद्ध हों। स्क्रीन ये हैं: प्रश्न, सर्वेक्षण सूची, स्वागत, पूरा, आकलन, त्रुटि, सभी साफ़ करें, लोड करें, सेव करें, पंजीकरण, उत्तर प्रिंट करें, सार्वजनिक आँकड़े, PDF, कोटा पार हो गया है, नेविगेशन और प्रतिभागी।

फ़ाइलें एडिट करना

दाईं ओर के पैनल चुनी गई स्क्रीन द्वारा उपयोग की जाने वाली फ़ाइलों की सूची दिखाते हैं:

स्क्रीन पार्ट फ़ाइलें: वे Twig टेम्पलेट जो पेज बनाते हैं।
JavaScript फ़ाइलें
CSS फ़ाइलें
अन्य फ़ाइलें: इमेज, फ़ॉन्ट और थीम की अन्य सभी फ़ाइलें।

किसी फ़ाइल को एडिटर में खोलने के लिए उसके नाम पर क्लिक करें। Inherited चिह्नित फ़ाइलें पैरेंट थीम से आती हैं। आप विरासत में मिली फ़ाइल को भी एडिट कर सकते हैं: तब एडिटर के नीचे बटन पर स्थानीय थीम में कॉपी करें और परिवर्तन सहेजें लिखा होता है, और सेव करने पर फ़ाइल आपके बदलावों के साथ आपकी थीम में कॉपी हो जाती है। उसके बाद पैरेंट की फ़ाइल की जगह आपकी कॉपी का उपयोग होता है।

आपकी थीम की अपनी फ़ाइलों में रीसेट बटन होता है। रीसेट करने से आपकी कॉपी डिलीट हो जाती है, इसलिए पैरेंट थीम की फ़ाइल फिर से उपयोग में आती है।

फ़ाइलें अपलोड करना

अपनी थीम में इमेज, फ़ॉन्ट या अन्य फ़ाइलें जोड़ने के लिए अन्य फ़ाइलें पैनल के नीचे दिए गए अपलोड फ़ील्ड का उपयोग करें। अपलोड की गई फ़ाइलें थीम के files/ फ़ोल्डर में संग्रहीत होती हैं। डिफ़ॉल्ट रूप से आप इमेज (gif, ico, jpg, jpeg, png) और ये फ़ाइल प्रकार अपलोड कर सकते हैं: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq और lsg। आपका व्यवस्थापक config.php में allowedthemeimageformats और allowedthemeuploads सेटिंग से इन सूचियों को बदल सकता है।

Twig फ़ाइल में अपलोड की गई इमेज दिखाने के लिए image() फ़ंक्शन का उपयोग करें:

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

CSS फ़ाइलों में अपलोड की गई फ़ाइलों को css फ़ोल्डर के सापेक्ष पथ से संदर्भित करें, उदाहरण के लिए url('../files/background.jpg')।

पूर्वावलोकन

एडिटर के नीचे एक पूर्वावलोकन चुनी गई स्क्रीन को नमूना सामग्री के साथ दिखाता है। पेज को अलग-अलग स्क्रीन आकारों में जाँचने के लिए मोबाइल, 640x480, 800x600, 1024x768 और पूर्ण बटनों का उपयोग करें।

पूर्वावलोकन नमूना डेटा का उपयोग करता है और हो सकता है कि हर स्टाइल को ठीक वैसा न दिखाए जैसा वास्तविक सर्वेक्षण में दिखता है। अपने बदलावों को हमेशा वास्तविक सर्वेक्षण के पूर्वावलोकन में भी जाँचें।

थीम इम्पोर्ट और एक्सपोर्ट करना

किसी थीम को दूसरे LimeSurvey इंस्टॉलेशन में ले जाने के लिए, थीम एडिटर के टूलबार में निर्यात पर क्लिक करें। इससे थीम ZIP फ़ाइल के रूप में डाउनलोड हो जाती है।
ZIP फ़ाइल से थीम इंस्टॉल करने के लिए, विन्यास > थीम पर जाएँ और अपलोड और इंस्टॉल करें पर क्लिक करें।

थीम कैसे बनी होती है

थीम फ़ोल्डर

थीम फ़ोल्डर में ये शामिल होते हैं:

config.xml: थीम मैनिफ़ेस्ट: नाम, पैरेंट थीम, CSS और JavaScript फ़ाइलें, थीम विकल्प और थीम एडिटर में दिखाई जाने वाली स्क्रीन।
views/: Twig टेम्पलेट। layout_global.twig अधिकांश सर्वेक्षण पेजों का मुख्य लेआउट है। अन्य लेआउट विशेष पेजों के लिए उपयोग होते हैं, जैसे सार्वजनिक सर्वेक्षण सूची के लिए layout_survey_list.twig और त्रुटि पेजों के लिए layout_errors.twig। views/subviews/ फ़ोल्डर में वे छोटे टेम्पलेट होते हैं जिन्हें लेआउट शामिल करते हैं।
css/ और scripts/: थीम की CSS और JavaScript फ़ाइलें।
files/: थीम द्वारा उपयोग की जाने वाली छवियाँ और अन्य फ़ाइलें।
options/: थीम विकल्पों का पेज।

Twig टेम्पलेट

टेम्पलेट को सर्वेक्षण का डेटा aSurveyInfo वेरिएबल में मिलता है। इसमें मौजूद सब कुछ देखने के लिए, application/config/config.php में डीबग मोड चालू करें और layout_global.twig में body एलिमेंट के अंत में यह पंक्ति जोड़ें:

{{ dump(aSurveyInfo) }}

टेम्पलेट में उपयोग किए जा सकने वाले फ़ंक्शन के लिए उपलब्ध Twig फ़ंक्शन देखें। सुरक्षा कारणों से टेम्पलेट सैंडबॉक्स में चलते हैं, इसलिए केवल यही फ़ंक्शन उपलब्ध हैं।

config.xml

<files> सेक्शन उन CSS और JavaScript फ़ाइलों की सूची देता है जो सर्वेक्षण पेजों पर लोड होती हैं:

<add> एक फ़ाइल जोड़ता है। यदि पैरेंट थीम में उसी नाम की फ़ाइल पहले से है, तो आपकी फ़ाइल उसकी जगह ले लेती है।
<remove> पैरेंट थीम की किसी फ़ाइल को लोड होने से रोकता है।

पैरेंट थीम की फ़ाइलों को दोबारा सूचीबद्ध करने की ज़रूरत नहीं है: वे वैसे भी लोड हो जाती हैं।

थीम इंस्टॉल होने पर LimeSurvey config.xml को पढ़ता है और सेटिंग डेटाबेस में सहेज लेता है। इंस्टॉल की गई थीम की config.xml बदलने के बाद, फ़ाइल को दोबारा लोड करने के लिए विन्यास > थीम पर जाएँ, थीम का एक्शन मेन्यू (⋯) खोलें और रीसेट पर क्लिक करें।

अपना CSS और JavaScript जोड़ना

हर कोर थीम में आपके अपने कोड के लिए दो फ़ाइलें आरक्षित होती हैं:

css/custom.css: अन्य सभी CSS फ़ाइलों के बाद लोड होती है, इसलिए इसके नियम थीम की स्टाइल को ओवरराइड करते हैं।
scripts/custom.js: थीम की अपनी JavaScript के बाद लोड होती है।

थीम को एक्सटेंड करने पर बदलाव इन्हीं फ़ाइलों में करें। थीम की मुख्य CSS फ़ाइलों को संपादित करने के बजाय अपना CSS custom.css में जोड़ें, ताकि आपकी थीम को पैरेंट थीम के अपडेट मिलते रहें।

और फ़ाइलें जोड़ने के लिए, उन्हें अपलोड करें और अपनी थीम की config.xml के <files> सेक्शन में सूचीबद्ध करें। ऐसा फ़ाइल नाम उपयोग करें जो पैरेंट थीम में मौजूद न हो, अन्यथा आपकी फ़ाइल पैरेंट की फ़ाइल की जगह ले लेगी:

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

सर्वेक्षण पेज डिफ़ॉल्ट रूप से Ajax से लोड होते हैं, इसलिए जब कोई प्रतिभागी अगले पेज पर जाता है तो ब्राउज़र पूरा पेज दोबारा लोड नहीं करता। अपनी JavaScript को पहली बार पेज लोड होने पर और हर Ajax पेज लोड पर चलाएँ:

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

CSS से प्रश्नों की स्टाइलिंग

इस सेक्शन के सभी उदाहरण आपकी थीम की custom.css फ़ाइल में जाते हैं।

पेज क्लास

<html> और <body> एलिमेंट में ऐसी क्लास होती हैं जिनका उपयोग आप पूरे पेज की स्टाइल के लिए कर सकते हैं:

html: भाषा कोड (उदाहरण के लिए en) और टेक्स्ट की दिशा (dir-ltr या dir-rtl)।
body: थीम और हर पैरेंट थीम का नाम (उदाहरण के लिए fruity_twentythree), फ़ॉन्ट (उदाहरण के लिए font-ibm-sans), भाषा (उदाहरण के लिए lang-en), और लोगो दिखाए जाने पर brand-logo।

प्रश्न कंटेनर क्लास

हर प्रश्न question-container क्लास वाले एलिमेंट में लिपटा होता है। इसमें ये भी होती हैं:

प्रश्न के प्रकार की क्लास (नीचे दी गई तालिका देखें)।
mandatory: प्रश्न अनिवार्य या सॉफ़्ट अनिवार्य है।
input-error: उत्तर सत्यापन में सफल नहीं हुआ, या अनिवार्य प्रश्न का उत्तर नहीं दिया गया।
missing: प्रश्न के कुछ हिस्सों का उत्तर अभी बाकी है और प्रतिभागी उससे आगे बढ़ चुका है।
ls-hidden और ls-irrelevant: प्रश्न अपनी शर्त के कारण छिपा हुआ है।
ls-hidden-attribute: प्रश्न अपनी "हमेशा इस प्रश्न को छिपाने" सेटिंग के कारण छिपा हुआ है।
प्रश्न की सीएसएस (CSS) वर्ग सेटिंग (प्रदर्शन के अंतर्गत) में दर्ज कोई भी क्लास। अलग-अलग प्रश्नों की स्टाइल के लिए इसका उपयोग करें।

उदाहरण के लिए, एक अनिवार्य सूची (रेडियो) प्रश्न जिसका उत्तर नहीं दिया गया:

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

प्रश्न प्रकार की क्लास

प्रश्न का प्रकार	क्लास	प्रकार कोड
5 बिंदु वाले विकल्प	.choice-5-pt-radio	5
सरणी	.array-flexible-row	F
सरणी (5 बिंदु वाले विकल्प)	.array-5-pt	A
सरणी (10 बिंदु वाले विकल्प)	.array-10-pt	B
सरणी (बढ़ाएँ/समान/घटाएँ)	.array-increase-same-decrease	E
सरणी (संख्या)	.array-multi-flexi	:
सरणी (टेक्स्ट)	.array-multi-flexi-text	;
सरणी (हाँ/अनिश्चित/नहीं)	.array-yes-uncertain-no	C
स्तंभ के आधार पर सरणी	.array-flexible-column	H
सरणी दोहरी स्केल	.array-flexible-dual-scale	1
तारीख/समय	.date	D
समीकरण	.equation	*
फ़ाइल अपलोड	.upload-files	\|
लिंग	.gender	G
बहुत बड़ा मुक्त टेक्स्ट	.text-huge	U
भाषा स्विच	.language	I
सूची (ड्रॉपडाउन)	.list-dropdown	!
सूची (रेडियो)	.list-radio	L
टिप्पणी के साथ सूची	.list-with-comment	O
लंबा मुक्त टेक्स्ट	.text-long	T
एकाधिक विकल्प	.multiple-opt	M
टिप्पणी के साथ एकाधिक विकल्प	.multiple-opt-comments	P
एकाधिक संख्यात्मक इनपुट	.numeric-multi	K
एक से ज़्यादा छोटे टेक्स्ट	.multiple-short-txt	Q
संख्यात्मक इनपुट	.numeric	N
रैंकिंग	.ranking	R
छोटा मुक्त टेक्स्ट	.text-short	S
पाठ प्रदर्शन	.boilerplate	X
हाँ/नहीं	.yes-no	Y

प्रश्न के हिस्सों की क्लास

प्रश्न कंटेनर के अंदर, उत्तर क्षेत्र इन क्लास का उपयोग करता है। इनमें से कुछ प्रश्न की प्रदर्शन सेटिंग पर निर्भर करती हैं: उदाहरण के लिए, सरणी (संख्या) ड्रॉपडाउन के बजाय चेकबॉक्स दिखाने पर अलग क्लास का उपयोग करती है।

क्लास	उपयोग	इनके द्वारा उपयोग (उदाहरण)
.ls-answers	वह एलिमेंट जिसमें सभी उत्तर विकल्प होते हैं	सभी प्रश्न प्रकार
.answers-list	उत्तर विकल्पों की सूची या पंक्ति	सूची (रेडियो), एकाधिक विकल्प, रैंकिंग, अधिकांश सरणियों की पंक्तियाँ
.subquestion-list, .questions-list	उप-प्रश्नों की सूची या तालिका	सरणियाँ, एक से ज़्यादा छोटे टेक्स्ट, एकाधिक संख्यात्मक इनपुट
.answer-item	एक उत्तर विकल्प या इनपुट	लगभग सभी प्रश्न प्रकार
.noanswer-item	"कोई जवाब नहीं" विकल्प	सरणियाँ, 5 बिंदु वाले विकल्प, टिप्पणी के साथ सूची
.question-item	एक उप-प्रश्न जो उत्तर भी है	एकाधिक विकल्प, एक से ज़्यादा छोटे टेक्स्ट, एकाधिक संख्यात्मक इनपुट
.radio-list	रेडियो बटनों की सूची या पंक्ति	सूची (रेडियो), 5 बिंदु वाले विकल्प, टिप्पणी के साथ सूची, रेडियो सरणियों की पंक्तियाँ
.radio-array	रेडियो बटनों की तालिका	सरणी, सरणी (5 बिंदु वाले विकल्प), सरणी (10 बिंदु वाले विकल्प), सरणी (बढ़ाएँ / वही घटाएँ /), सरणी (हाँ/अनिश्चित/नहीं)
.radio-item	लेबल के साथ एक रेडियो बटन	सूची (रेडियो), 5 बिंदु वाले विकल्प, टिप्पणी के साथ सूची, रेडियो सरणियाँ
.checkbox-list	चेकबॉक्स की सूची	एकाधिक विकल्प, टिप्पणी के साथ एकाधिक विकल्प
.checkbox-array	चेकबॉक्स की तालिका	चेकबॉक्स लेआउट वाली सरणी (संख्या)
.checkbox-item	लेबल के साथ एक चेकबॉक्स	एकाधिक विकल्प, टिप्पणी के साथ एकाधिक विकल्प, चेकबॉक्स लेआउट वाली सरणी (संख्या)
.checkbox-text-item	टेक्स्ट फ़ील्ड के साथ एक चेकबॉक्स	टिप्पणी के साथ एकाधिक विकल्प
.comment-item	चेकबॉक्स के बगल में टिप्पणी फ़ील्ड	टिप्पणी के साथ एकाधिक विकल्प
.text-list	टेक्स्ट इनपुट की सूची	एक से ज़्यादा छोटे टेक्स्ट, एकाधिक संख्यात्मक इनपुट
.text-item	एक टेक्स्ट इनपुट	छोटा, लंबा और विशाल मुक्त टेक्स्ट, एक से ज़्यादा छोटे टेक्स्ट, सरणी (ग्रंथों)
.number-list, .numeric-item	संख्यात्मक इनपुट	एकाधिक संख्यात्मक इनपुट, संख्यात्मक इनपुट
.number-array	संख्यात्मक इनपुट की तालिका	सरणी (संख्या), सरणी (ग्रंथों)
.text-array	टेक्स्ट इनपुट की तालिका	सरणी (ग्रंथों), सरणी (संख्या)
.dropdown-array, .dropdown-list, .dropdown-item	ड्रॉपडाउन वाली तालिकाएँ, पंक्तियाँ और सेल	सरणी (संख्या), ड्रॉपडाउन वाली सरणी दोहरी स्केल
.date-item	तारीख इनपुट	तारीख/समय
.upload-item	फ़ाइल अपलोड क्षेत्र	अपलोड फ़ाइल
.answertext	सरणी की पंक्ति में उप-प्रश्न का टेक्स्ट	सरणियाँ
.col-answers	उप-प्रश्न टेक्स्ट का कॉलम	सरणियाँ
.ls-heading	उत्तर विकल्पों वाली हेडर पंक्ति	सरणियाँ
.ls-odd, .ls-even	बारी-बारी से आने वाली पंक्तियाँ	सरणियाँ
.ls-label-xs-visibility	ऐसा लेबल जो केवल छोटी स्क्रीन पर और स्क्रीन रीडर के लिए दिखता है	सरणियों के सेल
.ls-input-group-extra	इनपुट का उपसर्ग या प्रत्यय	छोटा मुक्त टेक्स्ट, संख्यात्मक इनपुट, एक से ज़्यादा छोटे टेक्स्ट, एकाधिक संख्यात्मक इनपुट
.ls-js-hidden	JavaScript सक्रिय होने पर छिपा रहता है	सरणी दोहरी स्केल, सूची (रेडियो)
.ls-no-js-hidden	JavaScript सक्रिय न होने पर छिपा रहता है	रैंकिंग
.ls-js-hidden-sr	JavaScript सक्रिय होने पर छिपा रहता है, लेकिन स्क्रीन रीडर फिर भी इसे पढ़ते हैं	रैंकिंग

सूची (रेडियो) में "कोई जवाब नहीं" विकल्प की क्लास noanswer-item के बजाय no-anwser-item है (इसी वर्तनी के साथ).

उदाहरण के लिए, सूची (रेडियो) प्रश्न के उत्तरों का HTML इस तरह दिखता है:

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

सत्यापन और टिप क्लास

सत्यापन टिप (जैसे "निम्न उत्तरों में से एक को चुनें" या "कृपया 1 से 10 के बीच की संख्या दर्ज करें") में हमेशा क्लास ls-em-tip होती है। जब प्रतिभागी उत्तर देता है, तो टिप का नियम पूरा होने पर LimeSurvey ls-em-success जोड़ता है और पूरा न होने पर ls-em-error जोड़ता है, ताकि आप दोनों स्थितियों को अलग-अलग स्टाइल कर सकें। प्रश्न की छिपाएँ टिप सेटिंग से छिपाई गई टिप को क्लास hide-tip मिलती है।

हर टिप में उसके प्रकार के लिए भी एक क्लास होती है:

क्लास	टिप
.em_default	प्रश्न के प्रकार की डिफ़ॉल्ट टिप (उदाहरण के लिए "निम्न उत्तरों में से एक को चुनें")
.em_num_answers	उत्तरों की न्यूनतम या अधिकतम संख्या
.em_value_range	न्यूनतम या अधिकतम मान
.em_sum_range	मानों का न्यूनतम या अधिकतम योग
.em_sum_equals	मानों का योग एक निर्धारित कुल के बराबर होना चाहिए
.em_value_integer	केवल पूर्ण संख्याएँ मान्य हैं
.em_numbers_only	केवल संख्याएँ मान्य हैं
.em_other_numbers_only	"अन्य" फ़ील्ड में केवल संख्याएँ मान्य हैं
.em_other_comment_mandatory	"अन्य" विकल्प चुना गया है, लेकिन उसका टेक्स्ट फ़ील्ड खाली है
.em_regex_validation	उत्तर सत्यापन पैटर्न से मेल खाना चाहिए
.em_q_fn_validation	प्रश्न सत्यापन समीकरण
.em_sq_fn_validation	उप-प्रश्न सत्यापन समीकरण

दाएँ से बाएँ (RTL) लिखी जाने वाली भाषाएँ

दाएँ से बाएँ लिखी जाने वाली भाषाओं के लिए <html> एलिमेंट में क्लास dir-rtl होती है और कोर थीम अपनी मुख्य CSS फ़ाइल का RTL संस्करण लोड करती हैं। केवल दाएँ से बाएँ भाषाओं पर लागू होने वाले नियमों के लिए अपनी CSS में .dir-rtl का उपयोग करें।

सुझाव और ट्रिक्स

ये उपाय उस थीम की custom.css (या जहाँ बताया गया हो, Twig फ़ाइल) में जाते हैं जिसे आपने किसी कोर थीम से एक्सटेंड किया है। उदाहरणों में #c0392b की जगह अपना रंग लिखें।

रेडियो बटन और चेकबॉक्स का रंग बदलें

Fruity TwentyThree के साथ आने वाले रंगों में से कोई एक इस्तेमाल करने के लिए थीम विकल्प में थीम रंग चुनें। थीम विकल्पों में आप कोई दूसरा आइकॉन की जाँच करें भी चुन सकते हैं।

किसी अन्य रंग के लिए custom.css में CSS जोड़ें। कोर थीम ब्राउज़र के डिफ़ॉल्ट रेडियो बटन और चेकबॉक्स के बजाय अपने खुद के बनाए हुए रेडियो बटन और चेकबॉक्स दिखाती हैं, इसलिए रंग बदलने का मतलब इन्हीं बनाए गए एलिमेंट को बदलना है।

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity और Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

रंग और बैकग्राउंड के बीच पर्याप्त कंट्रास्ट रखें, ताकि कम दृष्टि वाले प्रतिभागी भी देख सकें कि कौन-से उत्तर चुने गए हैं।

रेडियो बटन और चेकबॉक्स बड़े करें

बड़े रेडियो बटन और चेकबॉक्स फ़ोन और टैबलेट पर टैप करने में आसान होते हैं। यह सभी कोर थीम में काम करता है:

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

Fruity TwentyThree में रेडियो बटन और उत्तर के टेक्स्ट के बीच थोड़ी जगह भी जोड़ें:

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

लगभग 1.4 तक के मान बिना किसी और बदलाव के काम करते हैं। इससे बड़े मानों पर छोटी स्क्रीन पर कंट्रोल उत्तर के टेक्स्ट और सरणी की पंक्तियों के किनारों पर आने लगते हैं, इसलिए आपको उनके चारों ओर और जगह भी जोड़नी होगी।

प्रगति पट्टी का रंग बदलें

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

सामग्री केवल एक भाषा में दिखाएँ

<body> एलिमेंट में वर्तमान भाषा की एक क्लास होती है, जैसे lang-en या lang-fr। आप इसका उपयोग हर भाषा के लिए अलग सामग्री दिखाने में कर सकते हैं, उदाहरण के लिए फ़ुटर में सहायता की एक पंक्ति। हर भाषा का टेक्स्ट अपनी थीम की किसी Twig फ़ाइल में जोड़ें, जैसे subviews/footer/footer.twig:

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

फिर custom.css में अन्य भाषाओं का टेक्स्ट छिपा दें:

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

हर सर्वेक्षण के लिए अलग लोगो इस्तेमाल करें

हर लोगो के लिए अलग थीम की ज़रूरत नहीं है। थीम विकल्प किसी एक सर्वेक्षण के लिए सेट किए जा सकते हैं: सर्वेक्षण खोलें, सर्वेक्षण सेटिंग्स मेन्यू में थीम विकल्प पर क्लिक करें और कोई दूसरी लोगो फ़ाइल चुनें। देखें थीम विकल्प।

कस्टम फ़ेविकॉन दिखाएँ

फ़ेविकॉन वह छोटा आइकॉन है जो ब्राउज़र टैब और बुकमार्क में दिखता है। कोर थीम अपनी फ़ाइल files/favicon.ico दिखाती हैं। अपना आइकॉन इस्तेमाल करने के लिए उसका नाम favicon.ico रखें और उसे अपनी एक्सटेंड की हुई थीम के अन्य फ़ाइलें पैनल में अपलोड करें। यह पैरेंट थीम के आइकॉन की जगह ले लेता है।

Fruity TwentyThree में लोगो को केंद्र में रखें

थीम विकल्पों में लोगो चालू करें, फिर इसे custom.css में जोड़ें:

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

सार्वजनिक सर्वेक्षण सूची में अपना लोगो जोड़ें

सार्वजनिक सर्वेक्षण सूची डिफ़ॉल्ट रूप से LimeSurvey लोगो दिखाती है। अपना लोगो दिखाने के लिए:

Fruity TwentyThree को एक्सटेंड करें और अपनी थीम को थीम एडिटर में खोलें।
अन्य फ़ाइलें पैनल में अपना लोगो अपलोड करें।
सर्वेक्षण सूची स्क्रीन चुनें और layout_survey_list.twig खोलें।
वह <div> खोजें जिसमें {{ include('./ls_logo_svg.twig') }} है। include वाली पंक्ति सहित इस पूरे <div> को इन चरणों के नीचे दिए गए कोड से बदलें।
Copy to local theme and save changes पर क्लिक करें।
विन्यास > वैश्विक सेटिंग्स > सामान्य पर जाएँ और Theme for public survey list and error pages के रूप में अपनी थीम चुनें।

अपनी अपलोड की गई फ़ाइल का नाम और वैकल्पिक टेक्स्ट के रूप में अपने संगठन का नाम उपयोग करें:

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

दोहरी स्केल सरणियों में विभाजक रेखा जोड़ें

सरणी दोहरी स्केल प्रश्न के दोनों स्केल के बीच एक ऊर्ध्वाधर रेखा खींचने के लिए:

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

प्रश्नों में JavaScript

अपने सर्वेक्षणों के सभी पेजों पर JavaScript चलाने के लिए, उसे अपनी थीम की custom.js में रखें (देखें ऊपर)।

आप किसी एक प्रश्न या समूह के टेक्स्ट में भी स्क्रिप्ट जोड़ सकते हैं। LimeSurvey इन टेक्स्ट से स्क्रिप्ट हटा देता है, जब तक आपके उपयोगकर्ता के लिए XSS फ़िल्टर बंद न हो। यह फ़िल्टर सुपरएडमिनिस्ट्रेटर पर कभी लागू नहीं होता। अन्य उपयोगकर्ताओं के लिए विन्यास > वैश्विक सेटिंग्स > सुरक्षा में XSS के लिए फ़िल्टर HTML बंद होना चाहिए। ऐसा केवल तभी करें जब आप सर्वेक्षण एडिट कर सकने वाले सभी लोगों पर भरोसा करते हों। विवरण और उदाहरणों के लिए Workarounds: Manipulating a survey at runtime using Javascript देखें।

मुख्य अध्याय

थीम एडिटर

From LimeSurvey Manual

सामग्री

परिचय

शुरू करने से पहले

कोर थीम एडिट नहीं की जा सकतीं: उनका विस्तार करें

थीम कहाँ संग्रहीत होती हैं

थीम एडिटर

टूलबार

फ़ाइलें एडिट करना

फ़ाइलें अपलोड करना

पूर्वावलोकन

थीम इम्पोर्ट और एक्सपोर्ट करना

थीम कैसे बनी होती है

थीम फ़ोल्डर

Twig टेम्पलेट

config.xml

अपना CSS और JavaScript जोड़ना

CSS से प्रश्नों की स्टाइलिंग

पेज क्लास

प्रश्न कंटेनर क्लास

प्रश्न प्रकार की क्लास

प्रश्न के हिस्सों की क्लास

सत्यापन और टिप क्लास

दाएँ से बाएँ (RTL) लिखी जाने वाली भाषाएँ

सुझाव और ट्रिक्स

रेडियो बटन और चेकबॉक्स का रंग बदलें

रेडियो बटन और चेकबॉक्स बड़े करें

प्रगति पट्टी का रंग बदलें

सामग्री केवल एक भाषा में दिखाएँ

हर सर्वेक्षण के लिए अलग लोगो इस्तेमाल करें

कस्टम फ़ेविकॉन दिखाएँ

Fruity TwentyThree में लोगो को केंद्र में रखें

सार्वजनिक सर्वेक्षण सूची में अपना लोगो जोड़ें

दोहरी स्केल सरणियों में विभाजक रेखा जोड़ें

प्रश्नों में JavaScript