"डैशबोर्ड> जनरल" में, "कस्टम सीएसएस" फ़ील्ड का उपयोग किसी भी ओवरराइड में प्रवेश करने के लिए किया जा सकता है, जिसे बाद में जेलिफ़िन सीएसएस शैली शीट पर लागू किया जाएगा।
कस्टम सीएसएस इंटरफ़ेस अनुकूलन प्रदान करता है जैसे कि रंग, लेआउट, तत्व का आकार और व्यवहार। नीचे विभिन्न संशोधनों की सूची दी गई है जिन्हें लागू किया जा सकता है। CSS संशोधनों वेब क्लाइंट और एंड्रॉइड एप्लिकेशन दोनों में काम करती हैं। कोड को उस क्रम में लागू किया जाएगा जिस पर यह लिखा गया है ताकि कोड पहले से निर्धारित कस्टम सीएसएस को ओवरराइड कर सके; - महत्वपूर्ण सब कुछ ओवरराइड कर देगा। अधिक जानने के लिए, सीएसएस विशिष्टता देखें। इन परिवर्तनों को लागू करने के लिए, डैशबोर्ड> सामान्य> कस्टम सीएसएस पर जाएं। विशिष्टता के लिए एक अतिरिक्त स्रोत विशिष्टता है।
यदि आपके पास बहुत कम या कोई सीएसएस अनुभव नहीं है, तो आप विभिन्न ऑनलाइन संसाधनों और ट्यूटोरियल पा सकते हैं, उदाहरणों के रूप में निम्न संशोधनों का उपयोग कर सकते हैं, अपने जेलीफिन उदाहरण के लिए अपने स्वयं के परिवर्तन करना शुरू करना बहुत आसान है।
सीएसएस अवलोकन
आप w3school जैसी साइटों का उपयोग करके CSS के बारे में अधिक जान सकते हैं। नीचे कुछ बहुत ही बुनियादी विवरण दिए गए हैं जो आपको पहले से किए गए संशोधनों के अल्पविकसित संपादन करने की अनुमति देंगे।
रंग
CSS कई रंग प्रारूपों का समर्थन करता है, जिनमें से अधिकांश आमतौर पर हेक्साडेसिमल हैं। लेकिन पाठ बस भी काम करता है। "पीला" पाने के लिए आप बस "पीला" लिख सकते हैं, यह एक पूर्व निर्धारित पीले रंग का उपयोग करेगा। एक विशिष्ट रंग प्राप्त करने के लिए, सटीक रंग डेटा जैसे कि हेक्साडेसिमल कोड का उपयोग किया जाना चाहिए।
हेक्स रंग कोड के कुछ उदाहरण:
#5dd000 ग्रीन
#0000d0 नीला
#d00000 रेड
#00000058 पारदर्शी काला
किसी भी रंग के लिए एक कोड प्राप्त करने के लिए हेक्स रंग चार्ट के लिए यहां जाएं।
/ * और * / के बीच कोड या पाठ का एक अनुभाग एक टिप्पणी को इंगित करता है, और इसे अनदेखा किया जाएगा। यह आपको किसी भी विशेष अनुभाग के कोड का वर्णन करने की अनुमति देता है ताकि यह आसानी से पहचाने जा सके। इसे हटाने के बिना कोड को अक्षम करने के लिए भी इस्तेमाल किया जा सकता है। उदाहरण के लिए
/ * यह कोड के ऊपर जोड़ा जा सकता है आपको यह बताने के लिए कि यह क्या करता है * /
सीएसएस चेनिंग
सीएसएस को विभिन्न वर्गों को एक साथ संशोधित करने के लिए जंजीर किया जा सकता है। इसका एक उदाहरण "बॉर्डर रंग" मॉड है। यह संशोधित करने के लिए तत्वों को सूचीबद्ध करता है और उन सभी पर लागू होने वाला परिवर्तन करता है।
संशोधनों की सूची
इनमें से किसी को भी लागू करने के लिए, सीएसएस कोड को "कस्टम सीएसएस" फ़ील्ड में कॉपी और पेस्ट करें। कई संशोधनों का उपयोग करने के लिए, उन्हें क्षेत्र में एक के बाद एक जोड़ दें। कोई भी लागू कोड फ़ील्ड में रहेगा। किसी संशोधन को हटाने के लिए, फ़ील्ड में संबंधित कोड हटाएं या टिप्पणी करें। परिवर्तन तुरंत प्रभावी हो जाता है जब कॉन्फ़िगरेशन पृष्ठ सहेजा जाता है और उसे पुनरारंभ करने की आवश्यकता नहीं होती है।
संकेतक पुन: पेश किया
यह प्लेबैक / अवलोकन संकेतक को प्रभावित करेगा। रंगीन षट्भुज को अपने इच्छित मान से बदलें।
बिना मॉड के
ग्रीन
.playedIndicator {i}: #5dd000; }
हेक्साडेसिमल आरजीबीए का उपयोग करके गहरा पारदर्शी
/ * मनाया आइकन को गहरा और पारदर्शी बनाओ * /। PlayIndicator {पृष्ठभूमि: #00000058;}
पारदर्शी शीर्ष मेनू
selfexplanatory
/ * शीर्ष मेनू पारदर्शिता * / /। SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader- धुंधला {पृष्ठभूमि: कोई नहीं; पृष्ठभूमि का रंग: आरजीबीए (0, 0, 0, 0);}; skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-bloub.noHomeButtonHeader {पृष्ठभूमि: कोई नहीं; पृष्ठभूमि-रंग: rgba (0, 0, 0, 0) ;;
टैब बटन का विस्तार करें
टैब बटन, संकेत, शैली आदि का विस्तार करें। डिफ़ॉल्ट रूप से वे बहुत छोटे हैं, खासकर मोबाइल पर।
/ * आकार को संशोधित करने के लिए "आकार-समायोजन" और "आकार" दोनों को समायोजित करें * /। HeaderTabs.sectionTabs {पाठ-आकार-समायोजन: 110%; फ़ॉन्ट-आकार: 110%;}; पेजइटल {मार्जिन-टॉप: ऑटो; मार्जिन-बॉटम: ऑटो;}; एमबी-टैब-बटन {पैडिंग: 1.75em 1.7em;}
विस्तारित टैब पर बटन और पारदर्शी मेनू इस तरह दिखता है:
मिनिमलिस्ट लॉगिन पेज
यह पारदर्शी शीर्ष मेनू के साथ और भी बेहतर दिखता है।
/ * लॉगिन फ़ॉर्म को कम करें * / #loginPage .readOnlyContent, #loginPage फ़ॉर्म {अधिकतम-चौड़ाई: 22em;} / * पाठ "कृपया लॉगिन" छुपाएं, लॉगिन फ़ॉर्म को बहुत दूर जाने से रोकने के लिए है * / #loginPage h1 {display: none} #loginPage .padded-left गद्देदार-सही पृष्ठ.पैडेड-बॉटम {नमूना: 50px} / * "मैनुअल" और "भूल गए" बटन * / #loginPage छिपाएं ।raised.cancel.block.btnManual.emby बटन: नमूना: कोई नहीं} #loginPage .raised.cancel.block। .btnButtonPassword.emby भूल गए। बीटीएन {नमूना: कोई नहीं}
Stylized एपिसोड पूर्वावलोकन
सीज़न दृश्य में एपिसोड का पूर्वावलोकन क्षैतिज रिज़ॉल्यूशन पर आधारित होता है, जिससे एपिसोड सारांश में बहुत अधिक जगह बर्बाद हो जाती है और उच्च ऊर्ध्वाधर पृष्ठ को नेविगेट करने के लिए बहुत स्क्रॉलिंग की आवश्यकता होती है। यह कोड बड़ी स्क्रीन पर ऊर्ध्वाधर स्क्रॉलिंग की आवश्यकता को कम करने के लिए एपिसोड प्रविष्टियों की ऊंचाई को कम करता है।
/ * एपिसोड आकार का पूर्वावलोकन करें चित्र अधिक कॉम्पैक्ट रूप से * / /। ListItemImage.listItemImage-large.itemAction.lazy {ऊँचाई: 110px;}। ListItem-content {ऊँचाई: 115px;}; माध्यमिक .list -em.-सिंहावलोकन .सूची। ItBemText {ऊंचाई: 61 पीएक्स; मार्जिन: 0;}
सबसे छोटी और सबसे स्टाइलिश कलाकारों के बारे में जानकारी
यह नाटकीय रूप से प्रसारण जानकारी की शैली को बहुत कुछ उसी तरह से बदल देगा जैसे कि कैसे करता है। पर्पल हेज़ थीम में पहले से ही डाली गई जानकारी है, लेकिन बाकी सब चीज़ों के समान आकार में, इस ओवरराइड के परिणामस्वरूप थोड़े छोटे थंबनेल होंगे, और अन्य सभी विषयों के साथ भी काम करेगा।
/ * स्क्वायर (या राउंड) थंबनेल को सिकोड़ें और प्रोजेक्ट करें * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {width: 4.2cm! महत्वपूर्ण फ़ॉन्ट का आकार: 90%! महत्वपूर्ण;} #castContent .card.overflowPortraitCard। personaTarjeta.com नारियल डेटा उपयोग {चौड़ाई: 4.2 सेमी! महत्वपूर्ण; फ़ॉन्ट का आकार: 90%! महत्वपूर्ण;} / * सही छवि पहलू अनुपात व्यवहार, वर्ग टाइल के लिए शून्य से त्रिज्या सेट करें * / #castContent .cardContent-button.cardImageContainer.overedImage। cardContento.cardContent-shadow.itemAction.lazy {पृष्ठभूमि आकार: कवर; महत्वपूर्ण; धार त्रिज्या: 2.5cm;} #castContent .cardContent-button.cardContainer.Cover छवि Default.CardBackground.DefaultCardBackground1.cardContent। cardSombra.itemAcción {पृष्ठभूमि का आकार: कवर; महत्वपूर्ण; धार त्रिज्या: 2.5cm;} #castContento .cardBonton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.contContent.cardSombra.content। आइटमएशन {फंड का आकार: कवर; महत्वपूर्ण; धार त्रिज्या: 2.5cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground.CardContent.cardContent-ard.ontection- बैकग्राउंड आकार: कवर; ! महत्वपूर्ण; धार-त्रिज्या: 2.5 सेमी;} #castContent.contentButton.of.content कंटेनर। मैसेज ढकी हुई डिफ़ॉल्ट छविCardBackground.DefaultCardBackground4.CardContent .Card Shade.contentAction {पृष्ठभूमि का आकार: कवर; महत्वपूर्ण; धार-त्रिज्या: 2.5cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card शेड .content.Action {पृष्ठभूमि आकार: कवर; महत्वपूर्ण; एज त्रिज्या: 2.5 सेमी;} #castContento। cardScalable {चौड़ाई: 3.8cm; महत्वपूर्ण; उच्च: 3.8 सेमी! महत्वपूर्ण; त्रिज्या-बढ़त: 2.5cm;} #castContent .cardOverlayContainer.itemAction {त्रिज्या-बढ़त: 2.5cm;} / * केंद्र माउसओवर बटन * / #castContent .cardOverlayButton-br {निचला: 4%; दाईं ओर: 15%; चौड़ाई: 70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper- आइकन-बटन-लाइट {मार्जिन: ऑटो;}
पृष्ठभूमि का रंग
.backgroundContenedor, .dialog, html {बैकग्राउंड कलर: #0fd0d0; }
पृष्ठभूमि को गहरा करो
यह नीली चमक और बैंगनी धुंध की पृष्ठभूमि को गहरा करता है, आप कितना अंधेरा चाहते हैं इसके आधार पर प्रतिशत को संपादित करें। लोअर गहरा है।
/ * डार्क बैकग्राउंड, केवल नीली चमक के साथ काम करता है * /। बैकग्राउंडकोर्नर {बैकग्राउंड कलर: #000000; फ़िल्टर: चमक (50%) ;;
सही हेडर
यह ऊपरी दाएं में कलाकारों के रंग, खोज और उपयोगकर्ता बटन को संशोधित करता है।
.याडराइट {रंग: पीला; }
कंसोल पैनल
बाईं ओर मेनू पैनल का रंग संशोधित करें।
.MainDrawer-ScrollContainer {रंग: पीला; }
सामान्य पृष्ठ
.control पैनल सामान्य रूप {रंग: पीला; }
सीमा का रंग
यह टेक्स्ट फ़ील्ड के बॉर्डर कलर को बदल देगा और मेनू को डाउन कर देगा।
.मेबी-इनपुट; .मेबी-टेक्सारिया, .मेबी-सलेक्ट {बॉर्डर-कलर: #d00000; }
यह चयनित टेक्स्ट फ़ील्ड और ड्रॉप-डाउन मेनू के बॉर्डर रंग को प्रभावित करेगा।
.emby-input: फ़ोकस, .emby-textarea: फ़ोकस, .emby-select-withcolor {बॉर्डर-कलर: #ffffff-important! }
पूर्ण हैडर मॉड
; }
हॉटडॉग और कैट्सअप
एक रंग विषय का एक उदाहरण।
.SINHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption- चयनित, .cardBox, .paperList {बैकग्राउंड: #ff9475;} emby-input .emby-textarea, .emby {बॉर्डर-रंग: #fdbe7d;} का चयन करें। बैकग्राउंड कॉनटेनर ।withBackdrop, .backdropContainer,। बैकग्राउंड कॉनटेनर {बैकग्राउंड: #fdbe7d;} #myPreferencesMenuPage, .emby-tab, .emby-tab। div> div> div> a: nth-child (विषम), बटन-सबमिट,। mainAnimatedPage *: nth-child (odd); dashboardGeneralForm *: nth-child (विषम), mainDrawer-scrollContainer *: nth-child (विषम), शीर्ष लेख: * nth-child (विषम) {color: red;}; #miPreferencesMenuPage। listItemIcon, .emby-tab-button [data-index = "1"], #myPageMenuPreferences; div; div; div; div; a: nth-child (even); mainAnimatedPage *: nth-child (even), dashboardGeneralForm *: nth-child (सम), mainDrawer-ScrollContainer *: nth-child (even), HeaderRight *: nth-child (even) .cancel (रंग: पीला;})
फ्लोटिंग नाउ प्लेइंग कंट्रोल
/ * निचली पंक्ति के लिए निश्चित ऊंचाई * /: रूट {- उपसर्ग-तत्व-अप: 95px;} / * अब पाद में बार टैपिंग * / /। nowPlayingBar {चौड़ाई: 650px; z-index: 10; स्थिति: निश्चित; अप: 300 पीएक्स; ऊंचाई: 120 पीएक्स; धार शैली: ठोस; सीमा का रंग: सफेद; पृष्ठभूमि का रंग: काला; बायाँ मार्जिन: 50%;} / * अब का एकमात्र बच्चाप्लेबरबार * /। अब ।प्लेइंगबारटॉप {ऊंचाई: 5px; महत्वपूर्ण; अधिकतम चौड़ाई: 500px शीर्ष: 10px;} / * गीत प्रगति खोज बार * /। अब उपयोग में रखेंपोषकेशन {स्थिति: रिश्तेदार; ऊपर: 1.0em? Important;} / * कंटेनर जिसमें एल्बम थंबनेल, कलाकार, और एल्बम का नाम शामिल है * /। nowPlayingBarInfoContainer {स्थिति: फिक्स्ड! महत्वपूर्ण बाएं: 12 पीएक्स; शीर्ष: 34 पीएक्स; ऊंचाई: 60 पीएक्स; चौड़ाई: 1100px;} / * अगला, पिछला ट्रैक, प्ले / पॉज, अगला और समय एलिमेंट * * रखता है। बाएं: 32 पीएक्स; ऊपर: var (- निश्चित-तत्व-ऊपर); न्यूनतम-चौड़ाई: 500px;} / * मूक कंटेनर रखें, वॉल्यूम स्लाइडर के साथ, रिपीट बटन, पसंदीदा और रिमोट कंट्रोल * /। nowPlayingBarRight {चौड़ाई: 402px! महत्वपूर्ण; बायां: -60px;} / * म्यूट बटन * /। म्यूटबटन {स्थिति: रिश्तेदार; अप: var (- आइटम-अप);} / * वॉल्यूम स्लाइडर * /। nowPlayingBarVolumeSliderContainer {स्थिति: रिश्तेदार; बाएं: -4 पीएक्स; शीर्ष: var (- टॉप-एलीमेंट);} / * टॉगल रिपीट बटन * /। टॉगल रिपेटबटन {पोजीशन: रिलेटिव! महत्वपूर्ण बाएं: -20 पीएक्स; शीर्ष: var (- top-element);} / * पसंदीदा * /। nowPlayingBarUserDataButtons {स्थिति: रिश्तेदार; बाएं: -4 पीएक्स; शीर्ष: var (- top-element);} / * रिमोट कंट्रोल * /। RemoteControlButton {left: -110px; शीर्ष: var (- शीर्ष-तत्व) ;;
सामुदायिक लिंक
उन स्थानों के कुछ लिंक जहां कस्टम सीएसएस पर चर्चा और साझा की गई है।
https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/
अंतर्वस्तु
- सीएसएस अवलोकन
- रंग
- सीएसएस चेनिंग
- संशोधनों की सूची
- संकेतक पुन: पेश किया
- पारदर्शी शीर्ष मेनू
- टैब बटन का विस्तार करें
- मिनिमलिस्ट लॉगिन पेज
- Stylized एपिसोड पूर्वावलोकन
- सबसे छोटी और सबसे स्टाइलिश कलाकारों के बारे में जानकारी
- पृष्ठभूमि का रंग
- पृष्ठभूमि को गहरा करो
- सही हेडर
- कंसोल पैनल
- सामान्य पृष्ठ
- सीमा का रंग
- पूर्ण हैडर मॉड
- हॉटडॉग और कैट्सअप
- फ्लोटिंग नाउ प्लेइंग कंट्रोल
- सामुदायिक लिंक