ऐप का इस्तेमाल
रूप-रंग
रूप-रंग पेज आपके स्टोर के सभी चार्ट को एक साथ स्टाइल करता है, ताकि वे सब आपके ब्रांड से मेल खाएँ। पेज पर लाइव प्रीव्यू हर बदलाव को उसी समय दिखाता है।
बदलाव लागू करने के लिए ऊपर वाली बार में सेव करें पर क्लिक करें। आपके स्टोर का हर सक्रिय चार्ट तुरंत अपडेट हो जाता है — चार्ट एक-एक करके दोबारा सेव करने की ज़रूरत नहीं। किसी एक चार्ट को अलग दिखाना है? किसी एक चार्ट को अलग लुक देना देखें।
चार्ट विंडो
| सेटिंग | यह क्या करती है |
|---|---|
| चौड़ाई | संकरी (तीन या चार कॉलम के लिए सबसे अच्छी), मध्यम (डिफ़ॉल्ट), चौड़ी (बिना बगल में स्क्रॉल किए चौड़ी टेबल के लिए जगह), या बहुत चौड़ी (चार्ट के बगल में प्रोडक्ट फ़ोटो के साथ सबसे अच्छी)। |
| कोनों की गोलाई | 0–24 px। डिफ़ॉल्ट 8 px। |
| पैडिंग | 0–48 px। डिफ़ॉल्ट 24 px। चार्ट के किनारे और उसकी सामग्री के बीच की जगह। |
हेडर
पॉपअप या ड्रॉअर के ऊपर की बार।
| सेटिंग | यह क्या करती है |
|---|---|
| प्रोडक्ट का नाम दिखाएँ | पॉपअप के ऊपर उस प्रोडक्ट का नाम दिखाता है जहाँ से उसे खोला गया। छिपा होने पर भी स्क्रीन रीडर उसे पढ़कर सुनाते हैं। |
| हेडर का बैकग्राउंड | चार्ट का बैकग्राउंड इस्तेमाल करने के लिए खाली छोड़ें। |
| शीर्षक का रंग | टेक्स्ट का रंग इस्तेमाल करने के लिए खाली छोड़ें। |
| शीर्षक का संरेखण | बाएँ या बीच में। |
| क्लोज़ बटन | सादा ✕, या भरे हुए गोले में ✕। |
| आइकन का रंग | खुद ✕ का रंग। शीर्षक का रंग इस्तेमाल करने के लिए खाली छोड़ें। |
| गोले का रंग | भरे हुए गोले वाली स्टाइल के लिए। |
प्रोडक्ट फ़ोटो
| सेटिंग | यह क्या करती है |
|---|---|
| चार्ट के बगल में प्रोडक्ट फ़ोटो दिखाएँ | चार्ट के बगल में प्रोडक्ट की अपनी फ़ोटो दिखाता है, देखने के लिए तीरों के साथ। बड़ी स्क्रीन पर ये सिर्फ़ पॉपअप में दिखती हैं — ड्रॉअर बहुत संकरे होते हैं। बहुत चौड़ी विंडो के साथ इस्तेमाल करें। |
| फ़ोन पर भी दिखाएँ | फ़ोन पर फ़ोटो चार्ट के ऊपर आती हैं, पॉपअप और ड्रॉअर दोनों में। बंद होने पर फ़ोन पर सिर्फ़ चार्ट दिखता है। |
बैकग्राउंड
| सेटिंग | यह क्या करती है |
|---|---|
| बैकग्राउंड का रंग | चार्ट की सतह। डिफ़ॉल्ट सफ़ेद। |
| टेक्स्ट का रंग | मुख्य टेक्स्ट — गहरे बैकग्राउंड के साथ इसे भी बदलें ताकि चार्ट पढ़ने लायक रहे। |
| बैकग्राउंड इमेज | पूरे चार्ट के पीछे एक इमेज। |
| इमेज फ़िट | चार्ट को भरें, पूरी इमेज फ़िट करें, या दोहराएँ (टाइल)। |
| इमेज की जगह | बीच में, ऊपर या नीचे। |
| ओवरले | 0–90%। इमेज को बैकग्राउंड रंग से हल्का करता है ताकि टेक्स्ट पढ़ा जा सके। 0% पर इमेज जैसी है वैसी दिखती है। |
टेबल
| सेटिंग | यह क्या करती है |
|---|---|
| कॉलम हेडर का बैकग्राउंड | डिफ़ॉल्ट हल्का ग्रे। |
| कॉलम हेडर टेक्स्ट | डिफ़ॉल्ट लगभग काला। |
| ग्रिड रेखाएँ | पंक्तियों और सेल के बीच की रेखाओं का रंग। |
| पंक्तियों में बारी-बारी से छाया | हर दूसरी पंक्ति को हल्का रंग देता है ताकि चौड़ी टेबल को पढ़ना आसान हो। |
अलग-अलग टेबल एडिटर में स्टाइल विकल्प के अंदर इन रंगों को बदल सकती हैं।
टेक्स्ट
| सेटिंग | यह क्या करती है |
|---|---|
| हेडिंग का रंग | चार्ट की हेडिंग, साथ ही इकाई स्विच में चुनी गई इकाई और कीबोर्ड फ़ोकस आउटलाइन जैसे हाइलाइट। |
| मूल साइज़ | 11–20 px। डिफ़ॉल्ट 14 px। हेडिंग और टेक्स्ट इसी के हिसाब से बड़े-छोटे होते हैं। |
व्यवहार
| सेटिंग | यह क्या करती है |
|---|---|
| बाहर क्लिक करने पर बंद करें | डिफ़ॉल्ट रूप से चालू। बंद करें ताकि चार्ट सिर्फ़ क्लोज़ बटन से बंद हो। Escape हमेशा काम करता है। |
कस्टम CSS
उन सब चीज़ों के लिए जो ऊपर के विकल्पों में नहीं हैं। CSS वहाँ जोड़ी जाती है जहाँ भी चार्ट दिखता है। अपने सिलेक्टर .plug-sc से शुरू करें ताकि वे सिर्फ़ साइज़ चार्ट पर असर डालें, आपकी थीम के बाकी हिस्से पर नहीं।
काम के क्लास नाम:
| सेटिंग | यह क्या करती है |
|---|---|
| .plug-sc__trigger | साइज़ चार्ट लिंक या बटन। |
| .plug-sc__dialog | पॉपअप या ड्रॉअर विंडो। |
| .plug-sc__heading | पॉपअप के ऊपर का शीर्षक। |
| .plug-sc__table | हर माप टेबल। |
| .plug-sc__units | टेबल के ऊपर का इकाई स्विच। |
| .plug-sc__float | फ़्लोटिंग बटन। |
| .plug-sc__inline | पेज पर इनलाइन दिखने वाला चार्ट। |
/* स्टोर पर टेबल का टेक्स्ट छोटा करें */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* फ़ोन पर फ़्लोटिंग बटन छिपाएँ */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}रीसेट
डिफ़ॉल्ट बहाल करें फ़ॉर्म के हर विकल्प को उसकी डिफ़ॉल्ट वैल्यू पर वापस ले आता है। जब तक आप सेव करें पर क्लिक नहीं करते, आपके स्टोर पर कुछ नहीं बदलता।