This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

परिचय

ध्यान दें: LimeSurvey के पिछले संस्करणों में उन फ़ाइलों को "टेम्पलेट" कहा जाता था, जो तय करती हैं कि सर्वेक्षण कैसा दिखेगा और रंग, फ़ॉन्ट, लेआउट तथा (कुछ) व्यवहार के लिहाज़ से कैसे प्रस्तुत किया जाएगा। नई समझ के कारण अब इसे "थीम" कहा जाता है, जबकि टेम्पलेट शब्द उदाहरण सर्वेक्षणों के लिए आरक्षित है.

इस पेज पर आप सीखेंगे कि:

LimeSurvey 3.0 के नए थीम सिस्टम का उपयोग कैसे करें।
अपनी थीम प्रबंधित करने के लिए इनहेरिटेंस का उपयोग कैसे करें।
अपनी थीम में चित्र कैसे जोड़ें
अपने सर्वेक्षणों और सर्वेक्षण समूहों के लिए थीम विकल्प कैसे प्रबंधित करें

LimeSurvey 3 एक पूरी तरह नया थीम इंजन सिस्टम प्रस्तुत करता है, जो Twig 1.29 और Bootstrap पर आधारित है और थीम इनहेरिटेंस तथा थीम विकल्पों की सुविधा देता है। यह पुराने रिप्लेसमेंट कीवर्ड सिस्टम को पूरी तरह हटा देता है। इसलिए अब फ्रंटएंड HTML का 100% अनुकूलित किया जा सकता है। उदाहरण के लिए, पुराने थीम सिस्टम में {ASSESSMENTS} नाम का एक कीवर्ड था, जिसे निष्पादन के समय मूल्यांकन के HTML से बदल दिया जाता था। थीम डिज़ाइनर के पास इस HTML को अनुकूलित करने का कोई तरीका नहीं था (JavaScript के उपयोग के अलावा)। अब assessments.twig नाम की एक फ़ाइल है, जिसमें इस HTML को बनाने का लॉजिक (Twig में लिखा हुआ) मौजूद है। इन पेजों में हम आपको इस नए थीम इंजन के उपयोग के बारे में कुछ जानकारी देंगे.

हम यहाँ Twig के काम करने के तरीके का विस्तार से वर्णन नहीं करेंगे। यह एक तरह का बहुत सरलीकृत PHP है, जो “सैंडबॉक्स” सिस्टम की बदौलत उच्च स्तर की सुरक्षा प्रदान करता है (इसे हम थीम इंजन कोर कोड वाले भाग में अधिक विस्तार से देखेंगे)। यदि आप PHP पहले से जानते हैं, तो इसमें महारत हासिल करना बेहद आसान होगा। यदि आप PHP नहीं जानते, तब भी इसे सीखना काफ़ी आसान होना चाहिए। कृपया Twig 1.X का दस्तावेज़ देखें: https://twig.symfony.com/

एडमिन इंटरफ़ेस से संपादन

थीम सूची

एडमिन डैशबोर्ड पर अब थीम सूची तक पहुँचने के लिए एक बॉक्स है:

सूची 5 कॉलम में बँटी है:

थीम का पूर्वावलोकन: यह थीम के रूट में “preview.png” नाम की एक चित्र फ़ाइल मात्र है
थीम का “शीर्षक”, जैसा मैनिफ़ेस्ट (थीम के रूट में config.xml) में दिया गया है
थीम का विवरण: इसके मैनिफ़ेस्ट में सेट की गई एक स्ट्रिंग
थीम का प्रकार: कोर थीम (LimeSurvey के साथ आने वाली), उपयोगकर्ता थीम (upload डायरेक्टरी में जोड़ी गई), XML थीम (डेटाबेस में लोड नहीं की गई)
विस्तार करें: यदि थीम किसी अन्य थीम का विस्तार करती है, तो उसका नाम यहाँ दिखाया जाएगा
कुछ एक्शन बटन:
- इंस्टॉल करें: यह थीम का मैनिफ़ेस्ट लोड करके उसे डेटाबेस में जोड़ता है और सर्वेक्षण स्तर पर चयन के लिए उपलब्ध कराता है
- अनइंस्टॉल करें: यह डेटाबेस में थीम की कॉन्फ़िगरेशन प्रविष्टियाँ डिलीट कर देता है
- थीम एडिटर: यह आपको थीम एडिटर पर ले जाता है
- थीम विकल्प: यह आपको थीम विकल्पों के वैश्विक कॉन्फ़िगरेशन पर ले जाता है

थीम एडिटर

यह दस्तावेज़ मानता है कि आप LS के पिछले संस्करण में थीम एडिटर का उपयोग करना पहले से जानते हैं।

थीम एडिटर को यथासंभव मूल एडिटर के समान रखा गया है। इसलिए, जब आप कोर थीम खोलते हैं, तो आप उसे एडिट नहीं कर सकते। लेकिन अब “कॉपी” बटन की जगह आपके पास “विस्तार करें” बटन है।

अब आप थीम का विस्तार करते हैं — *अब आप थीम का **विस्तार** करते हैं*

थीम इनहेरिटेंस की अवधारणा का संक्षिप्त अवलोकन

LS3 में, एक थीम अब किसी अन्य थीम से इनहेरिट कर सकती है, यानी वह किसी अन्य थीम का “विस्तार” कर सकती है। इसका मतलब है कि थीम डायरेक्टरी लगभग खाली होगी और उसमें केवल वही फ़ाइलें (व्यू, स्टाइल शीट, स्क्रिप्ट, संसाधन आदि) होंगी जो मूल फ़ाइलों से भिन्न हैं। ऐसा करने से, आपके लिए अपने अलग-अलग उपयोगकर्ताओं हेतु थीम का एक पूरा समूह बनाना आसान हो जाएगा, बिना बहुत सारी अलग-अलग थीम का रखरखाव किए। उदाहरण के लिए: आपके पास अपनी खुद की बनाई थीम हो सकती है, फिर किसी कंपनी के लिए एक संस्करण (उसके लोगो, उसकी शैली, शायद फ़ुटर में उसकी वेबसाइट के लिंक आदि के साथ), किसी अन्य कंपनी के लिए एक और संस्करण, आदि। यदि आप बाद में अपनी कस्टम थीम का CSS या ग्लोबल लेआउट अपडेट करते हैं, तो उससे इनहेरिट करने वाली सभी थीम अपने-आप अपडेट हो जाएँगी। ध्यान दें कि इनहेरिटेंस रिकर्सिव है: एक थीम ऐसी थीम का विस्तार कर सकती है जो खुद किसी अन्य का विस्तार करती है, आदि।

इसका यह भी अर्थ है कि यदि आप LimeSurvey की किसी कोर थीम का विस्तार करते हैं, तो आपको उसके अपडेट का लाभ फिर भी मिलता रहेगा।

यूज़र इंटरफ़ेस में नई बातें

LimeSurvey की Monochrome थीम का विस्तार करने के लिए, थीम सूची में जाएँ और Monochrome थीम के “थीम एडिटर” बटन पर क्लिक करें। फिर “विस्तार करें” पर क्लिक करें और नया नाम “extends_monochrome” सत्यापित करें।

यदि आप अब upload डायरेक्टरी में (अपने फ़ाइल/FTP क्लाइंट से) जाएँ, तो आप देखेंगे कि एक नई डायरेक्टरी बन गई है: upload/themes/extends_monochrome इसमें एक XML फ़ाइल और डायरेक्टरी हैं, लेकिन अधिकांश डायरेक्टरी खाली हैं। इसमें न व्यू हैं, न CSS और न JS। फिर भी, आप इस थीम को किसी सर्वेक्षण से सामान्य थीम की तरह चुन सकते हैं और यह बिल्कुल Monochrome थीम जैसी दिखेगी।

*बनाए जाने के ठीक बाद थीम ट्री (डायरेक्टरी और फ़ाइलें)। यह लगभग खाली है*

थीम का विस्तार करते समय मूल थीम के संसाधन (jpg, png आदि) कॉपी किए जाते हैं। इसका कारण यह है कि यदि आप मूल थीम की कोई CSS फ़ाइल स्थानीय रूप से कॉपी करते हैं और वह इन फ़ाइलों का संदर्भ देती है (जैसे background-image स्टेटमेंट में), तो उसे ये चित्र वर्तमान थीम के पाथ में मिलने चाहिए।

extends_monochrome थीम का थीम एडिटर इस तरह दिखता है:

पुराने थीम एडिटर से कोई बड़ा अंतर नहीं है। आइए मुख्य अंतर देखें:

फ़ाइल सूची में कीवर्ड inherited। इसका अर्थ है कि फ़ाइल थीम डायरेक्टरी में मौजूद नहीं है और मूल थीम की फ़ाइल का उपयोग किया जाएगा।

मुख्य एडिटर ( ACE editor ) चुनी गई फ़ाइल की सामग्री दिखाता है। फ़ाइलों में केवल HTML, CSS या JS ही नहीं, बल्कि Twig स्टेटमेंट भी होते हैं। ये Twig स्टेटमेंट हमें थीम व्यू में कुछ लॉजिक डालने की सुविधा देते हैं, जो पहले कोर में गहराई में स्थित था और अब अनुकूलित किया जा सकता है।

इसीलिए अब ऊपरी मेन्यू के ड्रॉपडाउन सेलेक्टर में अधिक स्क्रीन प्रकार उपलब्ध हैं। आप ‘Survey List’, ‘Load’, ‘Save’, ‘Error’, ‘Registration’, ‘Assessments’, ‘Print Answers’ जैसे पेज देखेंगे, जो पहले उपलब्ध नहीं थे, या जिन्हें पहले वास्तव में अनुकूलित नहीं किया जा सकता था।

*अब आप सभी स्क्रीन अनुकूलित कर सकते हैं*

फ़ाइल सूची के नीचे स्थित ‘tip’ लिंक आपको अपने HTML में चित्र जोड़ने का Twig तरीका बताता है

‘save changes’ बटन अब स्थानीय थीम में कॉपी करें और परिवर्तन सहेजें बटन बन जाता है

त्वरित उदाहरण: चित्र जोड़ना

स्थानीय थीम में कॉपी करें और परिवर्तन सहेजें बटन ठीक वही करेगा जो उसके नाम में लिखा है: यदि आप फ़ाइल के भीतर कुछ भी एडिट करके इस बटन पर क्लिक करते हैं, तो वह फ़ाइल को उस थीम में कॉपी कर देगा जिसे आप एडिट कर रहे हैं, और आपके परिवर्तन सहेज लेगा।
उदाहरण के लिए: layout_global.twig फ़ाइल पर क्लिक करें, फिर ब्लॉक content ( {% block content %}) से ठीक पहले “TEST” टेक्स्ट जोड़ें और बटन पर क्लिक करें। आप देख सकते हैं कि फ़ाइल का लेबल “inherited” से बदलकर “local” हो गया है और अब बटन एक साधारण परिवर्तन सहेजें बटन है।

यदि आप फ़ाइल एक्सप्लोरर खोलकर upload/themes/extends_monochrome/views/ डायरेक्टरी में जाएँ, तो आप देखेंगे कि उसमें केवल एक फ़ाइल है, layout_global.twig, और उसमें स्ट्रिंग “TEST” मौजूद है।

अब कोई यादृच्छिक टेक्स्ट जोड़ने के बजाय, हम एक चित्र जोड़ेंगे। यदि आप tip लिंक पर क्लिक करेंगे, तो वह आपको बताएगा:
.twig फ़ाइल में चित्र का उपयोग करने के लिए: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
यदि आपने Twig का दस्तावेज़ पढ़ा है (और इस बिंदु तक आपको पढ़ लेना चाहिए था), तो आप जानते हैं कि {{ function( ) }} स्क्रीन पर किसी फ़ंक्शन का परिणाम दिखाएगा। यहाँ फ़ंक्शन image( ) है।

यदि आप जानना चाहते हैं कि यह क्या करता है, तो आप इसे कोड में यहाँ देख सकते हैं (RC3 का संस्करण): RC3 में image() फ़ंक्शन

यदि आपको कोड समझ में नहीं आता: चिंता न करें, आपको यह जानने की ज़रूरत नहीं कि यह कैसे काम करता है, बल्कि यह कि इसका उपयोग क्यों और कैसे करना है।

आपको image() फ़ंक्शन का उपयोग दो कारणों से करना चाहिए:

image फ़ंक्शन चित्र खोजने के लिए थीम में लूप चलाता है। यदि आप जिस थीम पर काम कर रहे हैं वह किसी अन्य थीम का विस्तार है, और आप उस फ़ाइल को, जहाँ आपने चित्र डाला है, स्थानीय रूप से कॉपी करते हैं, लेकिन वह चित्र स्थानीय थीम में कॉपी नहीं होता, तो यह थीम इनहेरिटेंस ट्री में लूप चलाकर पता लगाएगा कि वह चित्र कहाँ है।
यह एसेट मैनेजर का उपयोग करेगा, इसलिए यह आपकी थीम का प्रदर्शन बेहतर करेगा। इसके बारे में अधिक जानकारी के लिए Yii Asset Manager का दस्तावेज़ देखें: http://www.yiiframework.com/wiki/148/understanding-assets/

तो, अपनी थीम में चित्र जोड़ने के लिए:

बस उसे दाईं ओर के फ़ाइल अपलोडर से सामान्य रूप से अपलोड करें और फिर उसे किसी भी twig फ़ाइल में जहाँ चाहें जोड़ दें:

{{ image('./files/myfile.png') }}

यदि आप अपने चित्र के लिए वैकल्पिक टेक्स्ट जोड़ना चाहते हैं (स्क्रीन रीडर और HTML सत्यापन के लिए), तो जोड़ें:

यदि आप class विशेषता और उसमें id जोड़ना चाहते हैं:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

हमारी TO-DO सूची की कुछ बातें

उपयोगकर्ताओं को एडिटर से ही कस्टम पूर्वावलोकन फ़ाइल अपलोड करने की सुविधा देना
स्थानीय फ़ाइल डिलीट करके inherited स्थिति में लौटने के लिए एक बटन जोड़ना
केवल CSS फ़ाइलों में उपयोग किए गए चित्र कॉपी करना (उन्हें मैनिफ़ेस्ट में कॉपी की जाने वाली फ़ाइल के रूप में सूचीबद्ध करके)
यह याद दिलाना कि वर्तमान थीम किसका विस्तार करती है (यदि करती है)

थीम विकल्प

LS3 की एक और नई बात थीम विकल्प पेज है। जैसा कि हम आगे देखेंगे, थीम निर्माता अपने खुद के विकल्प और यहाँ तक कि अपना खुद का एडमिन विकल्प पेज भी बना सकते हैं। यहाँ हम संक्षेप में देखेंगे कि कोर थीम का विकल्प पेज कैसे काम करता है। वैश्विक स्तर पर थीम विकल्पों तक पहुँचने के लिए: थीम सूची में “थीम विकल्प” पर क्लिक करें

विस्तृत विकल्प

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

हालाँकि, यदि आप एडवांस सेटिंग एडिट करना चाहते हैं, तो विस्तृत विकल्प टैब पर क्लिक करें

फ़ाइलें सीएसएस (CSS): वे CSS फ़ाइलें जिन्हें टेम्पलेट में जोड़ा जाना चाहिए;
फ़ाइलें जेएस (JS): वे JS फ़ाइलें जिन्हें टेम्पलेट में जोड़ा जाना चाहिए;
Files Print Css: टेम्पलेट प्रिंट करते समय लोड की जाने वाली CSS फ़ाइलें;
विकल्प: इस फ़ील्ड में वे विकल्प (और उनके मान) शामिल हैं जिन्हें टेम्पलेट व्यू में पार्स किया जाना चाहिए;
CssFramework Name: लोड किए जाने वाले CSS फ़्रेमवर्क का नाम। फ़िलहाल केवल Bootstrap या कुछ नहीं;
Cssframework Css: आप इस फ़ील्ड में कोर bootstrap.css को उसके किसी अलग कस्टम संस्करण से बदल सकते हैं;
Cssframework Js: कोर boostrap.js फ़ील्ड को यहाँ से उसके किसी अलग कस्टम संस्करण से बदला जा सकता है;
Packages To Load: इस सेटिंग से आप LimeSurvey के कुछ कोर एसेट पैकेज लोड कर सकते हैं।

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

चेतावनी! : जब तक आपको पता न हो कि आप क्या कर रहे हैं, तब तक मानों को न छेड़ें!

सरल विकल्प

सरल विकल्प पेज टेम्पलेट से ही आता है। यह थीम की /options डायरेक्टरी के अंदर एक twig फ़ाइल और कुछ जावास्क्रिप्ट के माध्यम से बनाया गया है: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (टूटा हुआ लिंक)

यह पेज एक थीम से दूसरी थीम में पूरी तरह अलग हो सकता है, और थीम प्रदाताओं को अपना खुद का look & feel बनाने के लिए प्रोत्साहित किया जाता है।

सरल विकल्प पेज केवल विस्तृत फ़ॉर्म के इनपुट भरता है। आप इसे सरल पेज में किसी सेटिंग को चालू या बंद करके देख सकते हैं, और देख सकते हैं कि विस्तृत फ़ॉर्म में संबंधित इनपुट उसी के अनुसार कैसे बदलता है। उदाहरण के लिए, Default Template के सरल विकल्पों में, यदि आप Bootswatch थीम को “Darkly” में बदलते हैं और फिर (बिना सहेजे भी) विस्तृत विकल्पों के टैब पर क्लिक करते हैं, तो आप देखेंगे कि फ़ील्ड “Cssframework Css” इससे बदल गया है:

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
से
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
कोर थीम के लिए विभिन्न सरल विकल्प ये हैं:

Ajax mode: अगला पृष्ठ ajax के माध्यम से लोड किया जाए (तेज़) या पृष्ठ रीलोड के माध्यम से (डिबगिंग के लिए बेहतर)
बैकग्राउंड इमेज: यदि Yes पर सेट हो, तो pattern.png नाम की इमेज लोड की जाएगी (Master में इसे फ़ाइल सिलेक्टर से बदल दिया जाएगा)
Box container: यदि No पर सेट हो, तो प्रश्न किसी बॉक्स में नहीं रखे जाएँगे (ताकि आप स्क्रीन की चौड़ाई से बड़े ऐरे का उपयोग कर सकें)
Brandlogo: यदि No पर सेट हो, तो सर्वेक्षण का नाम टॉप बार में दिखाया जाएगा; अन्यथा आप फ़ाइल डायरेक्टरी में मौजूद किसी एक चित्र को लोगो के रूप में चुन सकते हैं।
बॉडी एनिमेट करें: यदि Yes पर सेट हो, तो सर्वेक्षण की बॉडी लोड होने पर लागू करने के लिए आप किसी एक एनिमेशन को चुन सकते हैं
प्रश्न एनिमेट करें: प्रश्नों के लिए भी यही
Animate alerts: अलर्ट के लिए भी यही
Bootstrap theme: यहाँ आप लोड करने के लिए कोई Bootstrap थीम चुन सकते हैं। ये Bootswatch से आती हैं https://bootswatch.com/3/

एनिमेशन के लिए animate.css लाइब्रेरी का उपयोग किया जाता है: https://daneden.github.io/animate.css/ बेशक, थीम प्रदाता अपनी एनिमेशन लाइब्रेरी जोड़ सकता है या कोई एनिमेशन लाइब्रेरी बिल्कुल न रखे।

मोनोक्रोम थीम एडमिन यूज़र इंटरफ़ेस वाली ही bootstrap कलर थीम का उपयोग करती हैं। ये css framework रिप्लेसमेंट सिस्टम का उपयोग नहीं करतीं, बल्कि केवल एक CSS फ़ाइल जोड़ती हैं। इस प्रकार, यह थीम प्रदाताओं के लिए कस्टम थीम संभालने का एक और तरीका दर्शाता है।

इनहेरिटेंस सिस्टम

पिछले भाग में हमने देखा कि एक थीम दूसरी थीम को एक्सटेंड कर सकती है। थीम कॉन्फ़िगरेशन भी किसी अन्य थीम कॉन्फ़िगरेशन से इनहेरिट कर सकता है। इसका अर्थ है कि किसी दी गई थीम के लिए आपके पास निम्न स्तरों पर कॉन्फ़िगरेशन हो सकता है:

वैश्विक स्तर (वही जो अभी हमने थीम सूची से एक्सेस होते देखा)
सर्वेक्षण समूह स्तर
और अंतिम सर्वेक्षण स्तर।

किसी स्तर का प्रत्येक पैरामीटर ऊपरी स्तर से इनहेरिट कर सकता है: सर्वेक्षण समूह इनहेरिटेंस। पहले सर्वेक्षण समूह स्तर को देखते हैं।

सर्वेक्षण समूह स्तर पर

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

इस सूची में आपको दो एक्शन बटन मिलते हैं। यदि समूह खाली है, तो आप उसे डिलीट कर सकते हैं। अन्यथा, आप उसे हमेशा एडिट कर सकते हैं। एडिट बटन पर क्लिक करने से आप सर्वेक्षण समूह कॉन्फ़िगरेशन पृष्ठ पर पहुँचते हैं:

इस पृष्ठ का तीसरा टैब “Template options for this survey group” कहलाता है। उस पर क्लिक करने पर आपको थीम सूची जैसी ही थीम की सूची दिखेगी, अंतर केवल इतना है कि यहाँ केवल विकल्प बटन दिखाई देता है (थीम एडिटर केवल मुख्य सूची से खोला जा सकता है)।
अब, यदि आप Default Template के विकल्प पर क्लिक करते हैं, तो आपको यह दिखाई देगा:

सब कुछ इनहेरिट करें का अर्थ है कि पूरा कॉन्फ़िगरेशन वैश्विक कॉन्फ़िगरेशन स्तर से इनहेरिट किया जाएगा।
यदि आप विस्तृत विकल्प पृष्ठ पर जाएँ, तो आप देखेंगे कि सभी फ़ील्ड इनहेरिट पर सेट हैं।
यदि आप सरल विकल्पों में "सब कुछ इनहेरिट करें" के लिए "नहीं" पर क्लिक करते हैं, तो आपको फिर से वैश्विक विकल्प पृष्ठ जैसा ही पृष्ठ दिखेगा। अंतर केवल इतना है कि प्रत्येक फ़ील्ड के लिए आप yes, no या inherit चुन सकते हैं; और प्रत्येक ड्रॉपडाउन सेलेक्टर में एक inherit' मान होता है।

एक सर्वेक्षण समूह किसी दूसरे समूह का चाइल्ड हो सकता है। इस स्थिति में, वह अपने पैरेंट से इनहेरिट करेगा।

सर्वेक्षण स्तर पर

किसी सर्वेक्षण को एडिट करते समय, बायीं बार के मेन्यू में आपको एक नई प्रविष्टि “थीम विकल्प” दिखाई देगी। यह आपको वर्तमान सर्वेक्षण के लिए चुनी गई थीम के विकल्प पृष्ठ पर ले जाएगी। आपको वही इनहेरिटेंस सिस्टम मिलेगा जो सर्वेक्षण समूह में है, लेकिन इस बार inherit का अर्थ है कि सेटिंग सर्वेक्षण के सर्वेक्षण समूह से इनहेरिट की जाएगी।

उपयोग का उदाहरण

मान लीजिए आप अलग-अलग कंपनियों (A और B) के लिए एक ही थीम का उपयोग कर रहे हैं। आप अपने पसंदीदा विकल्प वैश्विक स्तर पर सेट करते हैं (जैसे: ajax चालू, बॉडी एनिमेशन slide in, अलर्ट pulse के साथ)। फिर आप प्रत्येक कंपनी के लिए एक सर्वेक्षण समूह बनाते हैं: कंपनी A के लिए एक सर्वेक्षण समूह जिसमें इस कंपनी के सभी सर्वेक्षण होंगे, और कंपनी B के लिए एक सर्वेक्षण समूह जिसमें कंपनी B के सभी सर्वेक्षण होंगे। इस स्तर पर आप केवल लोगो और बैकग्राउंड सेट करेंगे, और बाकी विकल्प इनहेरिट होने देंगे। इस तरह, समूह A के सभी सर्वेक्षण कंपनी A का लोगो उपयोग करेंगे, और समूह B के सभी सर्वेक्षण कंपनी B का लोगो। कंपनी A के किसी एक सर्वेक्षण के लिए आप सर्वेक्षण के विषय के अनुरूप अलग बैकग्राउंड उपयोग कर सकते हैं: आपको बस सर्वेक्षण स्तर पर विकल्पों में बैकग्राउंड बदलना होगा। यदि कंपनी B में कोई कहता है कि pulse अलर्ट बहुत तेज़ है और वह fade in जैसा कुछ नरम पसंद करेगा, तो आप केवल सर्वेक्षण समूह B के स्तर पर अलर्ट एनिमेशन बदल देते हैं और इस समूह के सभी सर्वेक्षण अब यही एनिमेशन उपयोग करेंगे। यदि कंपनी A अपना लोगो बदलती है, तो आप उसे सर्वेक्षण समूह A के स्तर पर बदल सकते हैं, और इस समूह के सभी सर्वेक्षण नए लोगो का उपयोग करेंगे।

ये उदाहरण कोर थीम के वर्तमान विकल्पों पर आधारित हैं। लेकिन बेशक, यदि आप थीम प्रदाता हैं, या twig के साथ थोड़ी स्क्रिप्टिंग कर सकते हैं, तो आप अपने खुद के विकल्प जोड़ सकते हैं। उदाहरण के लिए, आप एक विकल्प “info footer” जोड़ सकते हैं, जिसमें कंपनी की वेबसाइट या सहायता के लिए फ़ोन नंबर जैसा डेटा डाला जा सके। फिर, यदि कंपनी A के अलग-अलग विभाग हैं, जिनके फ़ोन नंबर अलग-अलग हैं, तो आप सर्वेक्षण समूह A में प्रत्येक विभाग के लिए एक सब-ग्रुप बना सकते हैं। प्रत्येक सब-ग्रुप के इन विकल्पों में उसका अपना फ़ोन नंबर होगा।

थीम कस्टमाइज़ेशन के बारे में FAQ

यहाँ आपको फ़ोरम में पूछे गए कुछ प्रश्नों के उत्तर मिलेंगे, जो आपकी थीम को कस्टमाइज़ करने में मदद कर सकते हैं।

CSS/JS को कस्टमाइज़ करना: एसेट मैनेजर को समझना ("मेरे बदलाव लागू क्यों नहीं हो रहे?")

यदि आप अपने पसंदीदा एडिटर से कोड को सीधे एडिट करके किसी थीम की CSS/JS अपडेट करने का प्रयास कर रहे हैं, तो आपको आश्चर्य हो सकता है कि आपके बदलाव लागू नहीं हो रहे हैं।

2.50 से, LS Yii एसेट मैनेजर का उपयोग करता है: एसेट्स के बारे में Yii दस्तावेज़

यह किसी थीम की CSS/JS फ़ाइलों को एक यादृच्छिक स्ट्रिंग वाली tmp/ उप-डायरेक्टरी में ले जाता है (उदा.: "tmp/1ef64ml/")। इसलिए यदि आप किसी css/js फ़ाइल में कोई बदलाव करते हैं और एसेट मैनेजर को इसकी सूचना देते हैं, तो फ़ाइलें नए नाम वाली नई उप-डायरेक्टरी में कॉपी हो जाती हैं, ताकि उपयोगकर्ता के ब्राउज़र का कैश अपडेट हो जाए और उन्हें नई css/js दिखे। अन्यथा, उन्हें अपना ब्राउज़र कैश साफ़ करना पड़ता।

एसेट मैनेजर चालू होने पर हेडर में CSS लिंक ऐसे दिखते हैं:

जैसा कि आप देख सकते हैं, ये सभी tmp/ उप-फ़ोल्डरों की ओर संकेत करते हैं।

एसेट मैनेजर बंद होने पर हेडर में CSS लिंक ऐसे दिखते हैं:

जैसा कि आप देख सकते हैं, ये थीम की वास्तविक फ़ाइलों की ओर संकेत करते हैं।

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

इसलिए, किसी थीम की CSS/JS एडिट करते समय आपके पास कई विकल्प हैं:

आप LS थीम एडिटर का उपयोग कर सकते हैं: यह एसेट मैनेजर को संभाल लेता है और आपको किसी बात की चिंता करने की ज़रूरत नहीं होती
आप डिबग मोड चालू कर सकते हैं: इससे एसेट मैनेजर बंद हो जाएगा, इसलिए आपकी थीम की वास्तविक css/js फ़ाइलें कॉल की जाएँगी (लेकिन तब आपको हर लोड पर अपना ब्राउज़र कैश रीफ़्रेश करना होगा)
आप एसेट्स कैश रीफ़्रेश कर सकते हैं: वैश्विक सेटिंग्स -> सामान्य -> Clear asset cache से

कस्टम CSS को एडिट करने के लिए थीम एडिटर का उपयोग करना अब तक का सबसे अच्छा समाधान है।

थीम एडिटर का उपयोग करने से आपको नए थीम इंजन की संरचना समझने में मदद मिलेगी। इसके अलावा, यदि आप fruity को कस्टमाइज़ कर रहे हैं, तो CSS specificity का ध्यान रखें: अधिकांश परिभाषाएँ ".fruity" सेलेक्टर का उपयोग करती हैं (body एलिमेंट की एक क्लास)।

अपनी थीम में कस्टम फ़ॉन्ट जोड़ना

आसान तरीका: Google Font CDN का उपयोग

Bootswatch सर्वेक्षण थीम Google Font CDN का उपयोग करती है। आइए देखें कि यह कैसे काम करता है: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

फिर Lato फ़ॉन्ट का उपयोग CSS नियमों के माध्यम से किया जाता है: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

आप अपनी कस्टम थीम में इस तरह किसी भी Google फ़ॉन्ट का उपयोग कर सकते हैं। बेशक, आपको अपनी थीम के विकल्पों से फ़ॉन्ट सेलेक्टर हटा देना चाहिए। options.twig में ये पंक्तियाँ हटाएँ: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

लोकल फ़ॉन्ट का उपयोग

बेशक, आप फ़ॉन्ट फ़ाइलें डाउनलोड करके उन्हें Google CDN के बजाय लोकल सर्वर से भी उपयोग कर सकते हैं (गोपनीयता के लिए बेहतर)। इसका उदाहरण देखने के लिए, यहाँ noto फ़ॉन्ट का हमारा लोकल संस्करण है: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

आप अपनी थीम की css फ़ाइल में बहुत मिलती-जुलती परिभाषा का उपयोग कर सकते हैं, और फिर NotoSans-Regular.ttf फ़ाइल को अपनी थीम के css/font-src/ फ़ोल्डर में कॉपी कर सकते हैं।

फिर, उस फ़ॉन्ट को ऊपर की तरह अपनी body (या किसी अन्य एलिमेंट) पर लागू करें, और डिफ़ॉल्ट विकल्प वाला फ़ॉन्ट सेलेक्टर हटा दें।

अपने विकल्पों में स्वयं का फ़ॉन्ट चयनकर्ता बनाना

फ़िलहाल आप विकल्पों में अपना फ़ॉन्ट जोड़ने के लिए कोर फ़ॉन्ट चयनकर्ता का आसानी से उपयोग नहीं कर सकते। इसके लिए पहले अंतिम उपयोगकर्ता को कस्टम पैकेज अपलोड करने की सुविधा देनी होगी (अगला अनुच्छेद देखें: Fruity फ़ॉन्ट चयनकर्ता पर एक नज़र)
इसे इस प्रकार करें:

CDN या लोकल सर्वर का उपयोग करके अपनी थीम में दो फ़ॉन्ट (my_custom_font और my_custom_other_font) जोड़ें
इसके बाद अपनी css फ़ाइल में दो नई क्लास जोड़ें:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

अपनी थीम की XML फ़ाइल में एक फ़ॉन्ट विकल्प जोड़ें (डिफ़ॉल्ट my_custom_font होगा) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

option.twig में ये पंक्तियाँ जोड़कर अपना फ़ॉन्ट पिकर जोड़ें (अभी तक परीक्षण नहीं किया गया है, इसलिए यदि यह काम न करे तो फ़ोरम में बताएँ):

            
            <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'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

अब आपके उपयोगकर्ता इन दोनों फ़ॉन्ट में से चुन सकेंगे।

Fruity फ़ॉन्ट चयनकर्ता पर एक नज़र

भविष्य में हम अंतिम उपयोगकर्ताओं को अपने स्वयं के एसेट पैकेज, जिनमें फ़ॉन्ट पैकेज भी शामिल हैं, अपलोड करने की सुविधा देंगे। इससे फ़ॉन्ट का कोई भी अनुकूलन बहुत आसान हो जाएगा।
Yii पैकेज को समझने के लिए:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey पैकेज अलग-अलग फ़ाइलों में परिभाषित हैं। फ़ॉन्ट पैकेज यहाँ परिभाषित हैं: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
उदाहरण के लिए, Noto फ़ॉन्ट पैकेज यहाँ परिभाषित है: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

इसमें शामिल noto.css फ़ाइल यहाँ है: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
इसके अंत में css क्लास ".font-noto" की परिभाषा देखें:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

इसके बाद, Vanilla थीम में noto पैकेज जोड़कर और फ़ॉन्ट विकल्प को noto पर सेट करके noto फ़ॉन्ट का उपयोग किया जाता है:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

इसके बाद, body क्लास का फ़ॉन्ट इसी मान का उपयोग करके परिभाषित किया जाता है: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

बेशक, XML फ़ाइल में केवल आपकी थीम कॉन्फ़िगरेशन के डिफ़ॉल्ट मान होते हैं। लेकिन वास्तव में ये मान डेटाबेस (तालिका "template_configuration" (प्रश्न: "template_" या "theme_"?) में json स्ट्रिंग के रूप में परिभाषित और पढ़े जाते हैं। option.js फ़ाइल केवल सरल विकल्प के फ़ॉन्ट चयनकर्ता के मान का उपयोग करके उन्नत टैब फ़ॉर्म के अंदर का मान बदलती है: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

इसलिए जब "एसेट पैकेज अपलोड करें" सुविधा उपलब्ध हो जाएगी, तो एक ऐसी स्क्रिप्ट जोड़ना आसान होगा जो सभी मौजूदा फ़ॉन्ट पैकेज को स्कैन करके उन्हें चयनकर्ता में जोड़ दे।

सर्वेक्षण तत्वों की स्थिति और प्रदर्शन को नियंत्रित करने के लिए थीम विकल्प जोड़ना

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

सरलता के लिए हम यह ट्यूटोरियल LimeSurvey संस्करण 3.4.3 में "bootswatch" थीम के एक्सटेंशन पर आधारित करेंगे।

कस्टम थीम बनाना

"bootswatch" थीम को ऊपर बताए अनुसार एक्सटेंड करें।
custom.css को ऊपर बताए अनुसार लोकल थीम में कॉपी करें।

नए थीम विकल्प बनाना

/themes/survey/bootswatch/options/ की सामग्री को /upload/themes/survey/yourThemeName/options/ में कॉपी करें।

/upload/themes/survey/yourThemeName/options/options.twig को किसी एडिटर में खोलें और "{# Bootstrap Bootswatch theme #}" खोजें। इसके पैरेंट <div class='row'> तत्व से ठीक पहले यह जोड़ें:

		{# Custom survey name in navbar #}
		<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'>Survey name in navbar</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'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<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'>Survey name below progress bar</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'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

/upload/themes/survey/yourThemeName/config.xml खोलें और "options" ब्लॉक में दो आइटम जोड़ें ताकि यह इस प्रकार दिखे:
```
    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>
```
इससे आपको थीम विकल्प स्क्रीन में दो नए विकल्प इस प्रकार मिलने चाहिए:

नेविगेशन बार में सर्वेक्षण के शीर्षक के लिए संशोधित व्यू

/upload/themes/survey/yourThemeName/views/subviews/header/ नाम की एक नई डायरेक्टरी बनाएँ।
/themes/survey/vanilla/views/subviews/header/nav_bar.twig को उस नई डायरेक्टरी में कॉपी करें।

/themes/survey/vanilla/views/subviews/header/nav_bar.twig खोलें और "{# Logo option #}" खोजें। उसके नीचे लोगो/सर्वेक्षण-नाम वाले IF स्टेटमेंट को इस प्रकार बदलें:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

/upload/themes/survey/yourThemeName/css/custom.css में इसी तरह का कुछ जोड़ें:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
थीम विकल्प "Survey name in navbar" को "Yes" पर टॉगल करें।
आपको यह दिखाई देना चाहिए:

प्रगति पट्टी के नीचे सर्वेक्षण के शीर्षक के लिए संशोधित व्यू

/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews नाम की एक नई डायरेक्टरी बनाएँ।
/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig को उस नई डायरेक्टरी में कॉपी करें।

/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig खोलें और सर्वेक्षण के नाम के लिए एक <h1> एलिमेंट जोड़ें, ताकि वह इस प्रकार दिखे:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

/upload/themes/survey/yourThemeName/css/custom.css में इसी तरह का कुछ जोड़ें:
```
.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}
```
थीम विकल्प "Survey name below progress bar" को "Yes" पर टॉगल करें।
आपको यह दिखाई देना चाहिए:

डाउनलोड

नमूना विस्तारित थीम: Test_survey_names.zip

थीम को शुरू से बनाना

दस्तावेज़ जल्द ही उपलब्ध होगा।

अभी के लिए, केवल कुछ सुझाव दिए जा रहे हैं।

थीम की संरचना

फ़ाइलें और डायरेक्टरी

जब आप शुरू से कोई थीम बनाते हैं, तो आपको Vanilla की फ़ाइल/डायरेक्टरी संरचना/css/js का पालन करना ज़रूरी नहीं है। अनिवार्य css/js कोर द्वारा जोड़ी जाती है (ज़रूरत पड़ने पर आप उसे हटा भी सकते हैं)।

आपकी थीम में केवल लेआउट फ़ाइलें अवश्य होनी चाहिए:

layout_global.twig : सर्वेक्षण भरने के पेज रेंडर करती है
layout_survey_list.twig : सर्वेक्षण सूची रेंडर करती है (यदि यह थीम डिफ़ॉल्ट के रूप में सेट है)
layout_errors.twig : उन त्रुटियों को रेंडर करने के लिए उपयोग होती है जो सर्वेक्षण रेंडरिंग को रोकती हैं (गलत सर्वेक्षण आईडी, समूह पूर्वावलोकन में खाली समूह आदि)।
layout_user_forms.twig: उपयोगकर्ता फ़ॉर्म रेंडर करती है, जैसे: टोकन (सर्वेक्षण प्रतिभागी) और रजिस्टर।
layout_print.twig : सर्वेक्षण को pdf में प्रिंट करने के लिए उपयोग होती है
layout_printanswers.twig: उत्तर प्रिंट करती है

इन फ़ाइलों की सामग्री और उनमें कौन-सी फ़ाइलें शामिल हों या न हों, यह पूरी तरह आप पर निर्भर है। Vanilla में मिलने वाली अन्य सभी फ़ाइलें और डायरेक्टरी पूरी तरह वैकल्पिक हैं; अपने कोड को अपनी इच्छा के अनुसार व्यवस्थित करने के लिए स्वतंत्र हैं।

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

उदा.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

सामग्री

Vanilla की layout_global.twig में आप देखेंगे कि क्या दिखाना है यह तय करने के लिए हम "include_content" नामक एक वेरिएबल का उपयोग करते हैं https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

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

यदि आपने LimeSurvey के 2.x संस्करणों के लिए पहले कोई थीम बनाई है, तो आप देखेंगे कि इनमें से अधिकांश LimeSurvey 2.x की पुरानी pstpl फ़ाइलों के अनुरूप हैं। फिर भी, आपकी थीम में इन फ़ाइलों को इन्हीं नामों से इसी डायरेक्टरी में बनाना आपके लिए अनिवार्य नहीं है। उदाहरण के लिए, आप layout_global.twig में हर क्रिया के लिए वांछित HTML के साथ एक बड़ा switch भी जोड़ सकते हैं।

मेनिफ़ेस्ट config.xml

थीम के मेनिफ़ेस्ट में आपकी थीम की मुख्य जानकारी होती है। जब आप कोई थीम इंस्टॉल करते हैं, तो मेनिफ़ेस्ट की सामग्री डेटाबेस में दो अलग-अलग टेबल में लोड हो जाती है: template और template_configuration। इसलिए जब भी आप किसी थीम का मेनिफ़ेस्ट संशोधित करें, आपको उसे अनइंस्टॉल करके फिर से इंस्टॉल करना होगा (या बस रीसेट करना होगा)। थीम विकसित करते समय यह प्रक्रिया परेशान करने वाली होती है, इसलिए आप DB प्रविष्टियों की बजाय XML फ़ाइल का सीधा उपयोग करने के लिए बाध्य कर सकते हैं। ऐसा करने के लिए, config.php में डीबग मोड चालू करें और 'force_xmlsettings_for_survey_rendering' को true पर सेट करें।

मेटाडेटा सेक्शन

कुछ जटिल नहीं: बस आपकी थीम की मुख्य जानकारी। इसे templates_configuration टेबल में डाला जाएगा।

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

कुछ टिप्पणियाँ:

name: इसका उपयोग db में की (key) के रूप में होगा। इसलिए यह अद्वितीय होना चाहिए और इसमें कोई विशेष वर्ण (स्पेस सहित) नहीं होने चाहिए। ध्यान दें कि अक्षरों के केस (बड़े/छोटे) को ध्यान में नहीं लिया जाएगा
Title: इसका उपयोग विभिन्न सूचियों में आपकी थीम का नाम दिखाने के लिए होगा। इसमें विशेष वर्ण हो सकते हैं
description: इसका उपयोग सर्वेक्षण थीम की मुख्य सूची में होगा। इसमें विशेष वर्ण, यहाँ तक कि HTML कोड भी हो सकता है, इसका उपयोग करके
extends: वैकल्पिक, यह पैरेंट थीम को परिभाषित करता है। इसलिए यदि कोई फ़ाइल (twig/js/css/jpg आदि) इस थीम में मौजूद नहीं है, तो उसे पैरेंट थीम में खोजा जाएगा

यदि आपने 3 कोर थीम (Vanilla, Bootswatch, Fruity) में से किसी एक को विस्तारित किया है, तो आप "extends" का मान एक पैरेंट थीम से दूसरी पैरेंट थीम में बदल सकते हैं। बेशक, आपको थीम रीसेट करनी होगी।

फ़ाइलें सेक्शन

यह एक महत्वपूर्ण सेक्शन है। इसे template_configuration टेबल के files_css, files_js, files_print_css फ़ील्ड में json ऐरे के रूप में डाला जाएगा।

उदा.: Material Premium थीम का फ़ाइलें सेक्शन:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

इस सेक्शन में मौजूद सभी CSS/JS फ़ाइलें सर्वेक्षण शुरू होते समय लोड होंगी (ajax मोड में। यदि ajax मोड बंद है, तो बेशक सभी फ़ाइलें हर पेज पर फिर से लोड होती हैं)।

इन्हें थीम के नाम पर आधारित एक Yii Asset Packet में जोड़ा जाएगा। इसलिए जब Asset Manager चालू होता है (डीबग मोड बंद होने पर), तो ये फ़ाइलें थीम की बाकी फ़ाइलों के साथ tmp डायरेक्टरी में कॉपी हो जाएँगी (ताकि आप इमेज फ़ाइलों तक पहुँचने के लिए CSS और JS में रिलेटिव पाथ का उपयोग कर सकें)। Yii में Asset manager के बारे में: https://www.yiiframework.com/wiki/148/understanding-assets Yii में पैकेज के बारे में: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

ये इनहेरिटेंस सिस्टम का उपयोग करेंगी। इसका अर्थ है कि यदि आप किसी थीम में कोई CSS/JS फ़ाइल जोड़ते हैं, लेकिन वह उस थीम में मौजूद नहीं है, तो इंजन इस थीम की सभी मूल (mother) थीम में खोजेगा और जो पहली फ़ाइल मिलेगी उसका उपयोग करेगा। इसलिए यदि कोई उपयोगकर्ता थीम एडिटर के माध्यम से आपकी थीम को विस्तारित करता है, तो ये सभी फ़ाइलें उसकी थीम में इनहेरिट हो जाएँगी। कीवर्ड इसी इनहेरिटेंस सिस्टम से संबंधित हैं।

add : यह फ़ाइल को थीम में और उसकी सभी इनहेरिट की हुई थीम में जोड़ देगा
replace: यह मूल (mother) थीम की फ़ाइल को बदल देगा
remove: यह फ़ाइल को किसी भी पैकेज से, यहाँ तक कि कोर पैकेज से भी, हटा देगा (3.14 से)

याद रखें कि आप config.php में 'force_xmlsettings_for_survey_rendering' सेट कर सकते हैं, ताकि कॉन्फ़िगरेशन DB की बजाय XML से पढ़ा जाए (रीसेट की ज़रूरत नहीं)। इससे XML फ़ाइलों में किए गए बदलावों का परीक्षण आसान हो जाएगा, और XML के हर संशोधन पर थीम को अनइंस्टॉल/इंस्टॉल करने से बचेंगे।

इन कीवर्ड पर कुछ टिप्पणियाँ:

इनहेरिटेंस संबंधी सुझाव

जैसा कि पहले बताया गया है, "add" कीवर्ड किसी ऐसी फ़ाइल को संदर्भित कर सकता है जो किसी पैरेंट थीम में मौजूद हो। इसलिए आप इस सेक्शन में किसी फ़ाइल को "add" कर सकते हैं, भले ही वह फ़ाइल आपकी थीम में न होकर उसकी किसी पैरेंट थीम में हो। इंजन सभी पैरेंट थीम में खोजेगा और जो पहली फ़ाइल मिलेगी, उसका उपयोग करेगा। यदि फ़ाइल नहीं मिलती, config में डीबग मोड चालू है और ग्लोबल सेटिंग में js फ्रंटएंड डीबग मोड चालू है, तो कंसोल में एक संदेश आपको चेतावनी देगा। उदाहरण: यदि हम my_theme में <add>css/unexisting.css</add> जोड़ते हैं, तो कंसोल में हमें यह दिखेगा:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

यदि डीबग मोड बंद है, तो कोई त्रुटि नहीं दिखेगी। इंजन गलत add स्टेटमेंट को बस अनदेखा कर देगा।

add का उपयोग कब करें, replace का कब, और कब मैं इसे पैरेंट थीम पर छोड़ सकता हूँ?

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

आप पैरेंट थीम के समान नाम वाली फ़ाइल "add" नहीं कर सकते: वह हमेशा उसे बदल (replace) देगी। उदाहरण: यदि आपके पास "my_mother_theme/foo.css" नाम की फ़ाइल है और आप चाइल्ड थीम में "foo.css" नाम की फ़ाइल जोड़ते हैं, तो थीम में केवल "daughter_theme/foo.css" जोड़ी जाएगी। यदि आप "my_mother_theme/foo.css" को रखना चाहते हैं, तो "daughter_theme/foo.css" के लिए कोई दूसरा नाम चुनें, जैसे "daughter_theme/bar.css"। इसलिए "add" कीवर्ड का उपयोग "replace" कीवर्ड की तरह किया जा सकता है।

यदि आप सोच रहे हैं कि ऐसा क्यों है: इससे इनहेरिटेड थीम का स्वचालित निर्माण बहुत आसान हो जाता है; फ़ाइल सेक्शन को कॉपी करना सीधे काम करता है (किसी फ़ाइल को extend करते समय "add" को "replace" में बदलने की ज़रूरत नहीं पड़ती)।

इसे स्पष्ट करने के लिए, Fruity का उदाहरण लेते हैं। यह इसका css फ़ाइल सेक्शन है:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

यदि आप fruity में custom.css फ़ाइल देखें, तो वह vanilla वाली फ़ाइल जैसी ही है। हम fruity के अंदर की custom.css फ़ाइल को डिलीट करें, तो vanilla वाली लोड हो जाएगी। हम Fruity मैनिफ़ेस्ट से <replace>custom.css</replace> स्टेटमेंट हटाएँ, तो vanilla का स्टेटमेंट उपयोग होगा और vanilla की custom.css लोड होगी।

तो फिर हम fruity मैनिफ़ेस्ट के अंदर <replace>custom.css</replace> स्टेटमेंट का उपयोग क्यों करते हैं? इसका उत्तर आसान है: क्योंकि हम चाहते हैं कि अंतिम उपयोगकर्ता fruity थीम का विस्तार कर सके, अपनी लोकल थीम में फ़ाइल को संशोधित कर सके, और इस संशोधित फ़ाइल को अपनी इनहेरिटेड थीम से लोड कर सके। इसे समझने के लिए fruity का विस्तार करें और extended थीम को देखें। extended थीम में custom.css फ़ाइल है ही नहीं। इसलिए fruity वाली फ़ाइल उपयोग होगी। लेकिन: यदि उपयोगकर्ता यह फ़ाइल extended थीम में बनाता है (थीम एडिटर में "extend" पर क्लिक करके), तो यह फ़ाइल उसकी थीम से लोड होगी।

तो सामान्य रूप में: यदि आप किसी थीम का विस्तार किए बिना शुरू से थीम बनाते हैं, तो अपनी css/js फ़ाइलें जोड़ने के लिए बस add स्टेटमेंट का उपयोग करें। बिल्कुल आसान। यदि आप किसी दूसरी थीम का विस्तार करने वाली थीम बनाते हैं, और नहीं चाहते कि उपयोगकर्ता पैरेंट थीम की css/js फ़ाइल को extend कर सकें: तो अपने मैनिफ़ेस्ट में add स्टेटमेंट का उपयोग न करें। फ़ाइलें फिर भी पैरेंट थीम के कॉन्फ़िगरेशन से लोड होंगी। यदि आप किसी दूसरी थीम का विस्तार करने वाली थीम बनाते हैं, और पैरेंट थीम की किसी फ़ाइल को बदलना चाहते हैं: तो replace कीवर्ड का उपयोग करें (add कीवर्ड का परिणाम भी वही होगा)। यदि आप किसी दूसरी थीम का विस्तार करने वाली थीम बनाते हैं, किसी css/js फ़ाइल को बदलते नहीं हैं, लेकिन चाहते हैं कि उपयोगकर्ता उस फ़ाइल को extend कर सकें: तो उस फ़ाइल के लिए अपने मैनिफ़ेस्ट में "replace" स्टेटमेंट का उपयोग करें। फ़ाइल न बदलने पर भी, मैनिफ़ेस्ट में replace कीवर्ड का उपयोग करके आप उपयोगकर्ता को ऐसा करने की अनुमति देते हैं।

केवल इस अंतिम स्थिति को समझने के लिए थोड़ी मानसिक कसरत चाहिए; बाकी सभी स्थितियाँ सरल हैं।

आप CSS और JS फ़ाइलों को सीधे twig कोड से भी रजिस्टर कर सकते हैं। ये फ़ाइलें केवल तभी लोड होंगी जब वह twig फ़ाइल मांगी जाएगी। यदि आप चाहते हैं कि उपयोगकर्ता थीम एडिटर से इन JS/Css फ़ाइलों को इनहेरिट कर सकें, तो फ़ंक्शन Template:RegisterTemplateCssFile('my style.css') और Template:RegisterTemplateScript('my script.js') का उपयोग करना याद रखें। यदि आप इन फ़ंक्शन का उपयोग नहीं करते, तो आपकी थीम काम कर सकती है, लेकिन उस पर इनहेरिटेंस काम नहीं करेगी। यह Template:Image('my picture.jpg') फ़ंक्शन जैसा ही तर्क है।

remove कीवर्ड

remove कीवर्ड केवल 3.14 से उपलब्ध है। इसके साथ आप किसी भी पैकेज से, यहाँ तक कि कोर पैकेज से भी, कोई भी css/फ़ाइल हटा सकते हैं। Material Premium Theme में इसका उपयोग Awseome Bootstrap Checkbox की फ़ाइलें हटाने के लिए किया गया है:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

इसलिए आपको पैकेज की फ़ाइल के बिल्कुल वही सिंटैक्स का उपयोग करना चाहिए (उदाहरण: केवल "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

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

remove टैग में उपयोग किया जाने वाला सटीक नाम जानने का एक और तरीका है asset manager चालू करना (डीबग मोड बंद करके या config में 'use_asset_manager'=>true सेट करके)। फिर, उपयोग किया जाने वाला पाथ tmp डायरेक्टरी में रैंडम डायरेक्टरी के ठीक बाद वाला पाथ होगा। उदाहरण के लिए, awesome-bootstrap-checkbox.css के लिए:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

जिन फ़ाइलों को आपको नहीं हटाना चाहिए:

jquery-3.1.1.min.js : आवश्यक

jquery-migrate-3.0.0.min.js : आवश्यक

survey.js : आवश्यक

moment-with-locales.min.js : दिनांक प्रश्न के प्रकार के लिए आवश्यक (और शायद कुछ अन्य के लिए भी)

em_javascript.js : सभी ExpressionScript जावास्क्रिप्ट के लिए आवश्यक

विकल्प सेक्शन

यह सेक्शन आपकी थीम के विकल्पों से संबंधित है। इसका उपयोग template_configuration टेबल के "options" फ़ील्ड को json ऐरे के रूप में भरने के लिए किया जाएगा।

अधिक जानकारी

Theme:Available function

कुछ नोट

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

नोट: इससे बचने के लिए, आप DB के बजाय XML के उपयोग को बाध्य कर सकते हैं। config.php में डीबग मोड चालू करें और इसे अनकमेंट करें:

'force_xmlsettings_for_survey_rendering' => true, // यदि आप DB के बजाय XML फ़ाइल के उपयोग को बाध्य करना चाहते हैं तो इसे अनकमेंट करें (थीम के आसान विकास के लिए)

सावधान रहें: सब कुछ XML से लोड होगा (विकल्प आदि सहित)

नोट: यदि आप CSS/JS फ़ाइलों को मैन्युअल रूप से एडिट करते हैं (थीम एडिटर का उपयोग किए बिना) और डीबग मोड बंद है, तो अब आप एसेट्स को फ़्लश करने के लिए बाध्य कर सकते हैं। "वैश्विक सेटिंग्स" में, "सामान्य" टैब पर, "Clear assets cache" बटन पर क्लिक करें।

नोट: यदि आप यह सेक्शन हटाते हैं

मुख्य अध्याय

LS3.x में नया टेम्पलेट सिस्टम

From LimeSurvey Manual