समुदाय केंद्र
Advertisement
समुदाय केंद्र

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

विकल्प[]

FandomDesktop का इस्तेमाल करने के लिए या तो ऐसा करने के लिए आए बैनर पर क्लिक करें या अपनी वरीयताओं पर जाकर स्वरुप टैब पर क्लिक करें। उस पृष्ट पर आपको Oasis/Hydra या FandomDesktop में चुनने का विकल्प मिलेगा। जब FandomDesktop चुना जाता है, आपके पास अपने अनुभव को नियंत्रित करने के लिए अतिरिक्त विकल्प होंगे।

यह वही टैब है जहाँ आप परीक्षण के लिए Oasis पर वापस जा सकते हैं, जैसे-जैसे आपकी समुदाय इस ग्रीष्म के पूरे रिलीज़ के लिए तैयार होती है।

नए CSS/JS फाइल[]

मीडियाविकि:Fandomdesktop.css और मीडियाविकि:Fandomdesktop.js

सुविधाएँ जो GP और फैनडम, दोनों के लिए बदलने वाली हैं[]

टैबर[]

टैबर कंटेनर के लिए .tabber क्लास मौजूद होगा। सभी दूसरे क्लासों को हटा दिया गया है और Fandom Design System क्लासों से बदल दिया गया है: टैब के लिए wds-tabs__tab और टैब के कंटेंट के लिए wds-tabs__content

बुनियादी लेआउट[]

  • GP विकि से माइग्रेट करना
    • पूरे पृष्ठ कंटेनर (नेविगेशन सहित) #pageWrapper को अब .resizable-container क्लास के मदद से बदला जा सकता है, पर नेविगेशन अब पृष्ठ के ऊपर है
    • .page क्लास के साथ अब मुख्य पृष्ठ और दाए रेल के लिए भी एक रैपर है (अगर दाया रेल मौजूद है, इस एलिमेंट में .has-right-rail क्लास भी आ जाता है)
    • अब .page__main क्लास के साथ एक मुख्य कंटेंट का कंटेनर मौजूद है जिसमें शामिल हैं पृष्ठ शीर्षक, कंटेंट और पृष्ठ का फुटर
    • अब आर्टिकल कंटेंट #content या .mw-body का इस्तेमाल #content ID या .page-content क्लास से किया जा सकता है
    • पृष्ठ के शीर्षक का इस्तेमाल .page-header क्लास से किया जा सकता है
    • पृष्ठ के फुटर का इस्तेमाल .page-footer क्लास से किया जा सकता है
    • दाए रेल का इस्तेमाल #WikiaRailWrapper ID या .WikiaRail क्लास से किया जा सकता है
  • फैनडम विकि से माइग्रेट करना
    • पूरे पृष्ठ के कंटेनर (नेविगेशन सहित) .WikiaPage का इस्तेमाल अब .resizable-container क्लास से किया जा सकता है
    • मुख्य पृष्ठ रैपर (दाए रेल के साथ) .WikiaPageContentWrapper का इस्तेमाल अब .page क्लास से किया जा सकता है (अगर दाया रेल मौजूद है, इस एलिमेंट में .has-right-rail क्लास भी आ जाता है)। इसमें कंटेंट का कंटेनर और दाया रेल शामिल हैं।
    • मुख्य कंटेंट कंटेनर #WikiaMainContentContainer या .WikiaMainContentContainer का इस्तेमाल अब .page__main क्लास से किया जा सकता है। इसमें शामिल हैं पृष्ठ शीर्षक, कंटेंट और पृष्ठ का फुटर
    • अब आर्टिकल कंटेंट #content या .WikiaArticle का इस्तेमाल #content ID या .page-content क्लास से किया जा सकता है
    • अब पृष्ठ के शीर्षक (#PageHeader या .page-header) का इस्तेमाल .page-header क्लास से किया जा सकता है
    • अब पृष्ठ के फुटर का इस्तेमाल .page-footer class क्लास से किया जा सकता है
    • अब दाए रेल (#WikiaRailWrapper या .WikiaRail) का इस्तेमाल .right-rail-wrapper क्लास से किया जा सकता है

पोर्टेबल इन्फोबॉक्स[]

दृश्य परिवर्तन[]

  • इन्फोबॉक्स कंटेनर के आस-पास डिफ़ॉल्ट से एक बॉर्डर जोड़ दिया जाता है

शीर्षक (.pi-title) और हैडर (.pi-header) के डिफ़ॉल्ट बैकग्राउंड को "accent color" (--theme-accent-color) में बदल दिया गया है और फॉण्ट के रंग को डायनामिक ढंग से निकालकर --theme-accent-label-color पर सेट कर दिया जाता है। कुछ अनुकूलनों में इससे हैडर (या शीर्षक) का टेक्स्ट अस्पष्ट भी बन सकता है।

संस्तुत हल:

.portable-infobox {
  --pi-secondary-background--label: #अनुकूलित_फॉण्ट_रंग;
}

टैब के लिए नया मार्कअप[]

  • पैनल टैब और चित्र-समूह के टैब के लिए HTML मार्कअप पूरी तरह से बदल चुका है, यानी टैब के लिए कोई भी वर्तमान अनुकूलन समर्थित नहीं है।

चित्र-समूह के लिए पुराना मार्कअप (सरलीकृत):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        कैप्शन
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        चित्र या वीडियो
      </a>
    </figure>
  </div>
</div>

चित्र-समूह के लिए नया मार्कअप (सरलीकृत):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          कैप्शन
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        चित्र या वीडियो
      </a>
    </figure>
  </div>
</div>

पैनल के लिए पुराना मार्कअप (सरलीकृत):

<section class="pi-item pi-panel pi-border-color">
  शीर्षक
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          लेबल
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      कंटेंट
    </div>
  </div>
</section>

पैनल के लिए नया मार्कअप (सरलीकृत):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  शीर्षक
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          लेबल
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    कंटेंट
  </div>
</section>

पोर्टेबल इन्फोबॉक्स के लिए उपलब्ध CSS वेरिएबल[]

.portable-infobox {
  --pi-background: /* मुख्य बैकग्राउंड का रंग */
  --pi-secondary-background: /* शीर्षक और हैडर का रंग */
  --pi-secondary-background--label: /* शीर्षक और हैडर के फॉण्ट का रंग */
  --pi-border-color: /* बॉर्डर का रंग */
}

समुदाय का बैकग्राउंड चित्र[]

नया थीम डिज़ाइनर समुदाय के बैकग्राउंड चित्र को बदलने के लिए कुछ और नए विकल्प देता है। लेकिन अगर आप बैकग्राउंड के लिए फिर भी अपने मौजूदा CSS/JS अनुकूलन का इस्तेमाल करना चाहते हैं, एक नया क्लास मौजूद है: .fandom-community-header__background

Oasis से बदलने वाली चीज़ें[]

गैलरी[]

FandomDesktop पर गैलरियाँ मीडियाविकि के असली गैलरी का इस्तेमाल करेगा।

कृपया https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax देखें।

गैलरी के सिंटैक्स में दो ज़ाहिर बदलाव हैं:

  • गैलरी की स्टाइल का पता लगाने के लिए आपको type के बजाय mode प्रॉपर्टी का इस्तेमाल करना होगा। ताकि पीछे की तरफ से भी Oasis पर बने अनुकूलता को सुनिश्चित किया जा सके, type प्रॉपर्टी का समर्थन FandomDesktop के प्रकाशन के बाद भी बरकरार रहेगा। हालाँकि, सलाह दी जाती है नए mode प्रॉपर्टी का इस्तेमाल करने की।
  • गैलरी के कुछ प्रॉपर्टियों के समर्थन को मिटा दिया जाएगा। पूरी सूची के लिए नीचे देखें:

<gallery> एलिमेंट के एट्रीब्यूट[]

पुराना
प्रकार अस्थायी रूप से समर्थित "mode" एट्रिब्यूट से बदल दिया गया।
widths समर्थित
columns असमर्थित "perrow" एट्रिब्यूट से बदल दिया गया है।
perrow समर्थित
position असमर्थित
spacing असमर्थित
orientation असमर्थित
captionposition असमर्थित captionposition="within" को mode="packed-overlay" से बदला जा सकता है।
captionalign असमर्थित
captiontextcolor असमर्थित
bordersize असमर्थित
bordercolor असमर्थित
hideaddbutton असमर्थित
caption समर्थित
स्लाइडशो
widths समर्थित
crop असमर्थित
showrecentuploads असमर्थित
position असमर्थित
स्लाइडर
orientation समर्थित

अतिरिक्त नोट:

  • फैनडम की गैलरियाँ डिफॉल्ट से "फ्रेमलेस" ("frameless") हैं, जबकि मीडियाविकि की गैलरियों को एक मोटे फ्रेम के अंदर दिखाया जाता है। गैलरी की दिखावट को बरकरार रखने के लिए, इसे या तो कस्टम स्टाइल से बदलना होगा या फिर हर गैलरी पर mode="nolines" जोड़ना होगा।

Hydra/HydraDark से बदलने वाली चीज़ें[]

गैलरियाँ[]

नया गैलरी मोड - slider[]

गेमपीडिया समुदायों पर एक नया स्लाइडर मोड उपलब्ध होगा।

प्रयोग:

<gallery mode="slider">
चित्र.jpg
चित्र २.jpg
...
</gallery>

स्लाइडर गैलरी में orientation नामक एक अतिरिक्त एट्रीब्यूट, जिसमें वैल्यू bottom (डिफ़ॉल्ट) या right समर्थित हैं और ये स्लाइडर के नेविगेशन की जगह को तय करते हैं।

थीम के वेरिएबल[]

FandomDesktop स्किन पर, सदस्य थीम रंगों को परिभाषित करने वाले वेरिएबलों का इस्तेमाल कर पाएँगे। इनका इस्तेमाल CSS की मदद से किया जा सकता है।

HEX वैल्यू का उदाहरण: #ffffff

RGB वैल्यू का उदाहरण: 0,0,0

वेरिएबल का नाम विवरण
--theme-accent-color ThemeDesigner से लिए गए एक्सेंट का वैल्यू (HEX)
--theme-accent-color--hover ThemeDesigner से लिए गए एक्सेंट का वैल्यू, थीम के अनुसार २० प्रति शत उज्वल या गहरा कर दिया जाता है (HEX)
--theme-accent-color--rgb ThemeDesigner से लिए गए एक्सेंट का वैल्यू, (RGB)
--theme-accent-dynamic-color-1 एक्सेंट के लिए dynamic-1 रंग। और जानकारी के लिए कृपया 'डायनामिक रंग सेक्शन देखें।
--theme-accent-dynamic-color-1--rgb एक्सेंट के लिए dynamic-1 रंग का RGB हिस्सा। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-accent-dynamic-color-2 एक्सेंट के लिए dynamic-2। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-accent-dynamic-color-2--rgb एक्सेंट के लिए dynamic-2 रंग का RGB हिस्सा। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-accent-label-color --theme-accent-color बैकग्राउंड के साथ इस्तेमाल करने के लिए टेक्स्ट का रंग (HEX)
--theme-alert-color सूचना का रंग (लाल), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (HEX)
--theme-alert-color--hover सूचना का रंग (लाल), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है, थीम के अनुसार २० प्रति शत उज्वल या गहरा कर दिया जाता है (HEX)
--theme-alert-color--rgb सूचना का रंग (लाल), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (RGB)
--theme-alert-label --theme-alert-color बैकग्राउंड के साथ इस्तेमाल करने के लिए रंग (HEX)
--theme-body-background-color ThemeDesigner से लिया गया पृष्ठ का बैकग्राउंड (HEX)
--theme-body-background-image बैकग्राउंड के चित्र का URL, थीम डिज़ाइनर से लिया जाता है (स्ट्रिंग)
--theme-body-dynamic-color-1 पृष्ठ के बैकग्राउंड के लिए dynamic-1 रंग। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-body-dynamic-color-1--rgb पृष्ठ के बैकग्राउंड के लिए dynamic-1 रंग का RGB हिस्सा। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-body-dynamic-color-2 पृष्ठ के बैकग्राउंड के लिए dynamic-2 रंग। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-body-dynamic-color-2--rgb पृष्ठ के बैकग्राउंड के लिए dynamic-2 रंग का RGB हिस्सा। और जानकारी के लिए कृपया 'डायनामिक रंग' सेक्शन देखें।
--theme-body-text-color --body-background-color बैकग्राउंड के साथ इस्तेमाल करने के लिए रंग (HEX)
--theme-body-text-color--hover बैकग्राउंड के साथ इस्तेमाल करने के लिए रंग, थीम के अनुसार २० प्रति शत उज्वल या गहरा कर दिया जाता है (HEX)
--theme-border-color --theme-page-background-color पर आधारित बॉर्डर का रंग (HEX)
--theme-border-color--rgb --theme-page-background-color पर आधारित बॉर्डर का रंग (RGB)
--theme-link-color ThemeDesigner से लिया गया लिंक का रंग (HEX)
--theme-link-color--hover ThemeDesigner से लिया गया लिंक का रंग, थीम के अनुसार २० प्रति शत उज्वल या गहरा कर दिया जाता है (HEX)
--theme-link-color--rgb ThemeDesigner से लिया गया लिंक का रंग (RGB)
--theme-link-dynamic-color-1 लिंक के लिए dynamic-1 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-link-dynamic-color-1--rgb लिंक के लिए dynamic-1 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-link-dynamic-color-2 लिंक के लिए dynamic-2 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-link-dynamic-color-2--rgb लिंक के लिए dynamic-2 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-link-label-color --theme-link-color बैकग्राउंड के साथ इस्तेमाल करने के लिए रंग (HEX)
--theme-message-color सन्देश का रंग (नीला), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (HEX)
--theme-message-label --theme-message-color बैकग्राउंड के साथ इस्तेमाल करने के लिए रंग (HEX)
--theme-page-accent-mix-color आधे-आधे रेशियो में पृष्ठ के बैकग्राउंड के रंग और एक्सेंट के रंग का मिश्रण
--theme-page-background-color ThemeDesigner से लिया गया पृष्ठ (आर्टिकल) बैकग्राउंड का रंग (HEX)
--theme-page-background-color--rgb ThemeDesigner से लिया गया पृष्ठ (आर्टिकल) बैकग्राउंड का रंग (RGB)
--theme-page-background-color--secondary --theme-page-background-color पर आधारित एक माध्यमिक रंग, थीम के अनुसार थोड़ा सा सफेद या काला जोड़ा जाता है (HEX)
--theme-page-dynamic-color-1 पृष्ठ (आर्टिकल) के बैकग्राउंड के लिए dynamic-1 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-page-dynamic-color-1--rgb पृष्ठ (आर्टिकल) के बैकग्राउंड के लिए dynamic-1 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-page-dynamic-color-2 पृष्ठ (आर्टिकल) के बैकग्राउंड के लिए dynamic-2 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-page-dynamic-color-2--rgb पृष्ठ (आर्टिकल) के बैकग्राउंड के लिए dynamic-2 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-page-text-color पृष्ठ के टेक्स्ट का रंग। --theme-page-dynamic-color-2 का एक उपनाम कहा जा सकता है
--theme-page-text-color--hover पृष्ठ के टेक्स्ट पर होवर करने पर आने वाला रंग
--theme-page-text-color--rgb पृष्ठ के टेक्स्ट के रंग का RGB हिस्सा
--theme-page-text-mix-color आधे-आधे रेशियो में पृष्ठ के बैकग्राउंड के रंग और और पृष्ठ के dynamic-2 रंग का मिश्रण
--theme-sticky-nav-background-color स्टिकी नैव के बैकग्राउंड का रंग। इसे थीम डिज़ाइनर पर भी बदला जा सकता है।
--theme-sticky-nav-dynamic-color-1 स्टिकी नैव के बैकग्राउंड के लिए dynamic-1 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-sticky-nav-dynamic-color-1--rgb स्टिकी नैव के बैकग्राउंड के लिए dynamic-1 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-sticky-nav-dynamic-color-2 स्टिकी नैव के बैकग्राउंड के लिए dynamic-2 रंग। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-sticky-nav-dynamic-color-2--rgb स्टिकी नैव के बैकग्राउंड के लिए dynamic-2 रंग का RGB हिस्सा। और जानकारी के लिए 'डायनामिक रंग' सेक्शन देखें।
--theme-sticky-nav-text-color स्टिकी नैव के टेक्स्ट का रंग। --theme-sticky-nav-dynamic-color-1 का उपनाम भी कहा जा सकता है
--theme-sticky-nav-text-color--hover स्टिकी नैव के टेक्स्ट पर होवर करने पर आने वाला रंग
--theme-success-color सफलता का रंग (हरा), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (HEX)
--theme-success-color--rgb सफलता का रंग (हरा), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (RGB)
--theme-success-label --theme-success-color के साथ इस्तेमाल करने के लिए टेक्स्ट का रंग (HEX)
--theme-warning-color चेतावनी का रंग (पीला), पृष्ठ के बैकग्राउंड के साथ साफ़ लगने के लिए थोड़ा बदला जाता है (HEX)
--theme-warning-label --theme-warning-color बैकग्राउंड के साथ इस्तेमाल करने के लिए टेक्स्ट का रंग (HEX)

डायनामिक रंग[]

डायनामिक रंगों को उनके बैकग्राउंड पर आधारित बनाया जाता है। उन्हें इस तरह से बनाया जाता है ताकि वे उत्तम कंट्रास्ट रेशियो हासिल कर पाए।

  • dynamic-color-1 हल्के बैकग्राउंड के लिए fandom-black (#0E191A) और गहरे बैकग्राउंड के लिए सफेद (#FFFFFF) है।
  • dynamic-color-2 हल्के बैकग्राउंड के लिए गहरा ग्रे (#3A3A3A) और गहरे बैकग्राउंड के लिए हल्का ग्रे (#E6E6E6) है।

थीम-आधारित सिलेक्टर[]

अगर आपको थीम पर आधारित होकर किसी चीज़ के लिए अलग दिखावट चाहिए, आप दोनों थीमों को भी अलग-अलग से उल्लिखित कर सकते हैं।

  • .theme-fandomdesktop-light लाइट थीम के लिए बनाई गई चीज़ों के लिए है।
  • .theme-fandomdesktop-dark डार्क थीम के लिए बनाई गई चीज़ों के लिए है।

सहायता और फीडबैक[]

Advertisement