MediaWiki

स्किन:Lakeus

This page is a translated version of the page Skin:Lakeus and the translation is 74% complete.
Outdated translations are marked like this.
Other languages:
मीडियाविकि स्किन मैन्युअल - श्रेणी
OOjs UI icon layout-ltr.svg
Lakeus
प्रकाशन की स्थिति: स्थिर
SkinLakeus.png
लेखक
  • Lakejason0
  • Light beacon
  • Dianliang233
  • Winston Sung
  • ...
नवीनतम संस्करण 1.1.12 (2022-08-07)
संगतता नीति मीडियाविकि के साथ प्रकाशित स्नैपशॉट। मास्टर में पीछे की तरफ से संगतता नहीं है।
मीडियाविकि 1.36+
लाइसेंस GNU साधारण सार्वजनिक लाइसेंस 3.0 या उसके बाद
डाउनलोड करें

GitHub:

उदाहरण Example on MediaWiki Skins Wiki
पैरामीटर
  • $wgLakeusShowRepositoryLink
  • $wgLakeusSiteNoticeHasBorder
Lakeus स्किन को अनुवादित करें अगर यह translatewiki.net पर उपलब्ध है
उपयोग और संस्करण के मैट्रिक्स को देखें;

Lakeus एक स्किन है जो एक साधारण पर सुविधापूर्ण अनुभव प्रस्तुत करता है। इसका नाम लेखकों में से एक की कहानी के एक पात्र, Lakejason0 पर रखा गया है।

स्थापना

  • फाइलों को डाउनलोड करें और अपने skins/ फोल्डर के Lakeus नामक डिरेक्ट्री में डालें।
  • अपने LocalSettings.php के अंत में यह कोड जोड़ें:
wfLoadSkin( 'Lakeus' );
  •   पूर्ण - अपने विकि पर Special:Version पर जाकर देखें कि स्किन को सफलतापूर्वक स्थापित किया गया है कि नहीं।

विशेषता

  • साधारण पर सुविधापूर्ण (कम से कम ज़्यादातर काम करते हैं)।
  • गैर-जावास्किप्ट समर्थन के साथ।
  • CSS वेरिएबल से अनुकूलन।
  • रेसपॉनसिव डिज़ाइन डेस्कटॉप और टैब्लेट के साथ काम करना चाहिए; बहुत पतले फ़ोन पर साइडबार मेनू शायद ज़्यादा चौड़ा हो और इसे बंद न किया जा सके।
  • एक थीम डिज़ाइनर। अपने वरीयताओं में इसे सक्षम करके आप लाइव थीम का पूर्वावलोकन देख सकते हैं। ज़्यादातर समय बस कुछ बुनियादी वेरिएबलों को बदल देने से यह कई प्रक्रियाओं से आपके लिए एक थीम बना देगा।
    • इसमें कुछ बग्स हैं और यह अस्थिर है, तो मुझे वे समस्याएँ ज़रूर रिपोर्ट करें! अगर आप अंजाम से सहमत न हो तो स्वचालित थीम को रद्द कर सकते हैं।

योजनाबद्ध सुविधाएँ

टिप्पणियाँ

  • स्किन के पास गैर-जावास्क्रिप्ट समर्थन होना चाहिए। कुछ सुविधाएँ शायद उपलब्ध न हो।
  • इस स्किन में LanguageConverter प्रकारों वाली भाषाओं के लिए एक समर्पित मेनू है (जैसे zh और सर्बियाई)। अगर प्रकार उपलब्ध नहीं होते हैं, यह मेनू अदृश्य रहता है।
  • RTL समर्थन को ठीक से परीक्षणित नहीं किया गया है, पर मुख्य सुविधाओं पर RTL समर्थन को घोषित कर दिया गया है (जैसे साइडबार के मेनू)।

अनुकूलन

CSS वेरिएबल

आपका CSS शायद मेरी वरीयताएँ जैसे कुछ पृष्ठों पर काम न करे; यह सुरक्षा के मुद्दों के कारण मीडियाविकि की एक सुविधा है, लेकिन खतरों के समझने के बाद साइट के प्रबंधक true को $wgAllowSiteCSSOnRestrictedPages पर सेट करके इसे बाइपास कर सकते हैं।

Lakeus CSS वेरिएबल द्वारा अनुकूलन के समर्थित करता है। Below are several methods to generate a theme, and to apply the result (should be CSS code) you'll need to copy it to Lakeus.css, which can be found on MediaWiki:Lakeus.css for all wiki users, and Special:MyPage/Lakeus.css for yourself.

थीम डिज़ाइनर

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

इसे सक्षम करने के लिए वरीयताओं में जाएँ, "स्वरूप" चुनें, और Lakeus स्किन चुनने पर आपको विकल्प मिल जाएगा। सक्षम हो जाने पर यह हर पृष्ठ पर लोड होगा।

बस सारे बटन और इंपुट अपने मतलब के काम ही करेंगे; अगर आप ठीक से समझे नहीं तो इसका उपयोग करके देखें। कुछ ऐसे वेरिएबल हैं जो सभी पृष्ठों पर नहीं दिखते, और वे नीचे सूचीबद्ध हैं:

  • इंटरफेस सूचना बॉक्स। ये एलिमेंट जावास्क्रिप्ट के अक्षम होते हुए सदस्य समूह के सेटिंग को लागू किए जाने, अनुवाद पृष्ठ पर सूचना या चेतावनी पाने, पृष्ठ संपादन के समय मीडियाविकि के छूटों, बिना Echo या किसी सूचना एक्सटेंशन को स्थापित किए सदस्य वार्ता पृष्ठ सूचनाओं, आदि स्थितियों में आते हैं।

प्रीसेट थीम्स

आपके उपयोग के लिए पहले से ही कुछ प्रीसेट थीम्स मौजूद होंगे। आप वार्ता पृष्ठ पर आपका अपना थीम भी बाँट सकते हैं। अगर कुछ नहीं है तो बाद में वापस आइए।

Vintage

A vintage theme, last exported on 1.1.7. 

:root {
    --color-primary: #8e860a;
    --color-secondary: #eeebe7;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: rgba(238,235,231,0);
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #eeebe7;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #eeebe7;
    --border-color-search-suggestions: #8c8985;
    --background-color-search-suggestions-current: #8e860a;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #eeebe7;
    --border-color-search-bar: #8c8985;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #8e860a;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,0,0,0.1);
    --text-color-toggle-list-item-hover: #000000;
    --background-color-toggle-list-item-focus: rgba(0,0,0,0.2);
    --text-color-toggle-list-item-focus: #000000;
    --border-color-toggle-list: #9b9b9b;
    --subheader-color-toggle-list: #6a6a6a;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #eeebe7;
    --text-color-content: #24220a;
    --background-color-body: #eeebe7;
    --text-color-body: #000000;
    --border-color-content: #bcb9b5;
    --color-accent-header-tab: #8e860a;
    --color-accent-header-tab-selected: #8e860a;
    --color-accent-header-tab-new: #8e860a;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #e4e1dd;
    --border-color-toc: #b2afab;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #e9e6e2;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #9e9c98;
    --background-color-wikitable-table-head: #dfdcd8;
    --background-color-portlet-body: #ffffff;
    --background-color-portlet-item-hover: rgba(0,0,0,0.1);
    --background-color-portlet-item-focus: rgba(44,44,44,0.1);
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dad7d3;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}
Ocean

A theme with light blue color scheme, last exported on 1.1.8. 

:root {
    --color-primary: #3366cc;
    --color-secondary: #f4fcff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #e2f4fe;
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f4fcff;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #f4fcff;
    --border-color-search-suggestions: #91989b;
    --background-color-search-suggestions-current: #3366cc;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #f4fcff;
    --border-color-search-bar: #91989b;
    --background-color-toggle-list: #f4fcff;
    --background-color-toggle-list-card: #3366cc;
    --text-color-toggle-list-item: #0b3c75;
    --background-color-toggle-list-item-hover: rgba(51,102,204,0.1);
    --text-color-toggle-list-item-hover: #0b3c75;
    --background-color-toggle-list-item-focus: rgba(35,93,194,0.2);
    --text-color-toggle-list-item-focus: #0b3c75;
    --border-color-toggle-list: #91989b;
    --subheader-color-toggle-list: #0955b8;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #f4fcff;
    --text-color-content: #000000;
    --background-color-body: #f4fcff;
    --text-color-body: #000000;
    --border-color-content: #c1c9cc;
    --color-accent-header-tab: #3366cc;
    --color-accent-header-tab-selected: #3366cc;
    --color-accent-header-tab-new: #3366cc;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #eaf2f5;
    --border-color-toc: #b7bfc2;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #eff7fa;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #a4abae;
    --background-color-wikitable-table-head: #e5ecef;
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #0b3c75;
    --background-color-portlet-item-hover: rgba(51,102,204,0.1);
    --text-color-portlet-item-hover: #0b3c75;
    --background-color-portlet-item-focus: rgba(112,147,255,0.1);
    --text-color-portlet-item-focus: #0b3c75;
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #e2f4fe;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}


वेरिएबल खुद बदलें

नीचे CSS वेरिएबलों का डिफ़ॉल्च सेटिंग है; इन्हें बदलकर अपने Lakeus.css में डाल दें: 

:root {
  --background-color-base: white;
  --background-color-body: white;
  --background-color-content: white;
  --background-color-footer: #eee;
  --background-color-toggle-list: white;
  --background-color-portlet-body: white;
  --background-color-toggle-list-card: #eee;
  --background-color-toggle-list-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-toggle-list-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-portlet-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-portlet-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-edit-options: #eee;
  --background-color-search-suggestions: #fff;
  --background-color-search-suggestions-current: #1d5492;
  --background-color-search-input: #fff;
  --background-color-toc: #f8f9fa;
  --background-color-interface-message-box-neutral: #eaecf0;
  --background-color-interface-message-box-error: #fee7e6;
  --background-color-interface-message-box-warning: #fef6e7;
  --background-color-interface-message-box-success: #d5fdf4;
  --background-color-user-message: #ffce7b;
  --background-color-wikitable: #f8f9fa;
  --background-color-wikitable-table-head: #eaecf0;
  --border-color-edit-options: #c8ccd1;
  --border-color-content: #ccc;
  --border-color-toggle-list: #ddd;
  --border-color-search-suggestions: #c8ccd1;
  --border-color-search-bar: var(--color-gray-2);
  --border-color-portlet-body: var(--color-gray);
  --border-color-header-tab: var(--color-gray-2);
  --border-color-toc: #a2a9b1;
  --border-color-interface-message-box-neutral: #a2a9b1;
  --border-color-interface-message-box-error: #d33;
  --border-color-interface-message-box-warning: #fc3;
  --border-color-interface-message-box-success: #14866d;
  --border-color-user-message: #ffa500;
  --border-color-wikitable: #a2a9b1;
  --subheader-color-toggle-list: #6a6a6a;
  --logo-text-color-toggle-list: #000000;
  --text-color-toggle-list-item: #1c1c1c;
  --text-color-toggle-list-item-hover: #3a3a3a;
  --text-color-toggle-list-item-focus: #3a3a3a;
  --text-color-content: #000000;
  --text-color-header: #000000;
  --text-color-body: #000000;
  --text-color-footer: #000000;
  --text-color-interface-message-box-neutral: #000000;
  --text-color-interface-message-box-error: #000000;
  --text-color-interface-message-box-warning: #000000;
  --text-color-interface-message-box-success: #000000;
  --text-color-user-message: #000000;
  --text-color-wikitable: #202122;
  --icon-filter-header: unset;
  --color-search-suggestions-text: #000;
  --color-search-suggestions-text-current: #fff;
  --color-tagline: var(--color-base);
  --color-accent-header-tab: var(--color-base);
  --color-accent-header-tab-selected: #54595d;
  --color-accent-header-tab-new: #54595d;
  --color-header: white;
  --color-base: #54595d;
  --color-gray: #a2a9b1;
  --color-gray-2: #eaecf0;
  --color-link: #0645ad;
  --color-link--visited: #0b0080;
  --color-link--active: #faa700;
  --color-link-new: #d33;
  --color-link-new--visited: #a55858;
  --color-link-new--active: #faa700;
  --color-link-external: #36b;
  --color-link-external--visited: #636;
  --color-link-external--active: #b63;
  --color-footer-link: #0645ad;
  --color-footer-link--visited: #0b0080;
  --color-footer-link--active: #faa700;
  --color-toc-number: #202122;
  --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
  --font-family-headings: var(--font-family-serif);
  --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
  --header-elevation: var(--elevation);
  --mask-background: rgba( 0, 0, 0, 0.8 );
}

उदाहरणस्वरूप, शीर्षक के रंग को हल्के नीले (जैसे #4FC3F7) में बदलने के लिए कोड होगा: 

:root {
  --color-header: #4FC3F7;
}


पैरामीटर

पैरामीटर प्रकार मूल विवरण
$wgLakeusShowRepositoryLink बूलियन true यह तय करता है कि लिंक को फुटर के स्किन रिपॉज़िटरी में दिखाया जाएगा कि नहीं।
$wgLogos अभी के लिए सिर्फ icon और wordmark ही मान्य हैं; स्किन svg, 1x, 1.5x या 2x जैसे कुंजियों का उपयोग नहीं करती। ध्यान रखें कि दूसरी त्वचाएँ icon और दूसरे कुंजियों द्वारा प्रदान किए गए चित्रों का भी उपयोग कर सकते हैं, तो सिर्फ इसी स्किन के लिए आइकॉन देने के लिए कुंजी पर निर्भर न रहें।
$wgLakeusSiteNoticeHasBorder बूलियन false यह तय करता है कि स्किन साइट सूचना पर बॉर्डर जोड़ेगा कि नहीं। इसे सक्षम करने से सामान्य पाठ की सूचनाओं को फ़ायदा हो सकता है, लेकिन अगर आपने सूचना पर पहले से ही बॉर्डर जोड़ा हुआ है, आप इसे अक्षम रख सकते हैं।

Sidebar icons

Unfortunately, it's not easy to add icons to the skin without including many images on page. If you can bear the loading time of web font icons, you can try this out as follows. To start with, include the icon font face (in this whole example, Material Icons) in your CSS (Lakeus.css). You may have loaded some font faces in other places other than Lakeus.css, in which case just ensure that they don't conflict with each other. 

/* MD Icons */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

Then, as we are going to use pseudo elements, some paddings and extra settings to create space for icons are applied: 

.toggle-list__list a {
    padding-left: calc(8px + 25px);
}

.toggle-list__list a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    /* Display Optimizing */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

Now, it's time to add the actual icons. You can use Devtools (The tool opened by right click and then Inspect Element) to see the list items' IDs, and we are finally going to set the actual content of the pseudo elements (icons): 

/* Navigation */
#n-mainpage-description a::before {
    content: 'home';
}

#n-recentchanges a::before {
    content: 'auto_awesome';
}

#n-randompage a::before {
    content: 'shuffle';
}

#n-portal a::before {
    content: 'forum';
}

#n-help-mediawiki a::before {
    content: 'help_center';
}

In this example, Material Icons supports certain strings (used here) and code points for an certain icon. For what strings or code points could be used for Material Icons, see Icons - Google Fonts. Feel free to add more rules for your own site, for example one of the authors' site got an admin noticeboard: 

#n-adminnoticeboard a::before {
    content: 'groups';
}

The #n-... part corresponds with the system message you used in your MediaWiki:Sidebar.

Retrieved from "https://www.mediawiki.org/w/index.php?title=Skin:Lakeus/hi&oldid=5415281"