সিএসএস কাস্টমাইজেশন

"ড্যাশবোর্ড> জেনারেল" এ, "কাস্টম সিএসএস" ক্ষেত্রটি যে কোনও ওভাররাইড প্রবেশের জন্য ব্যবহার করা যেতে পারে, যা জেলিফিন সিএসএস স্টাইল শীটে প্রয়োগ করা হবে।

কাস্টম সিএসএস ইন্টারফেস কাস্টমাইজেশন যেমন রঙ, লেআউট, উপাদান আকার এবং আচরণ পরিবর্তন করে provides নীচে প্রয়োগ করা যেতে পারে এমন বিভিন্ন পরিবর্তনের একটি তালিকা রয়েছে। সিএসএস পরিবর্তনগুলি ওয়েব ক্লায়েন্ট এবং অ্যান্ড্রয়েড অ্যাপ্লিকেশন উভয় ক্ষেত্রেই কাজ করে। কোডটি লিখিতভাবে ক্রমে প্রয়োগ করা হবে যাতে কোডটি পূর্বনির্ধারিত কাস্টম সিএসএসকে ওভাররাইড করতে পারে! গুরুত্বপূর্ণ সমস্ত কিছু ওভাররাইড করে। আরও জানতে, সিএসএসের বিশদতা দেখুন। এই পরিবর্তনগুলি প্রয়োগ করতে, ড্যাশবোর্ড> সাধারণ> কাস্টম সিএসএসে যান। নির্দিষ্টকরণের জন্য অতিরিক্ত উত্স হ'ল স্পষ্টতা।

আপনার যদি সিএসএসের অভিজ্ঞতা কম বা না থাকে তবে আপনি নিম্নলিখিত অনলাইন পরিবর্তনগুলি উদাহরণ হিসাবে ব্যবহারের পাশাপাশি বিভিন্ন অনলাইন সংস্থান এবং টিউটোরিয়াল খুঁজে পেতে পারেন, আপনার জেলিফিন উদাহরণে নিজের নিজস্ব পরিবর্তন করা শুরু করা বেশ সহজ।

সিএসএস ওভারভিউ

আপনি ডাব্লু 3 স্কুল এর মতো সাইট ব্যবহার করে সিএসএস সম্পর্কে আরও শিখতে পারেন। নীচে কয়েকটি খুব প্রাথমিক বিবরণ দেওয়া হয়েছে যা আপনাকে ইতিমধ্যে তৈরি করা পরিবর্তনগুলির প্রাথমিক সম্পাদনাগুলি করার অনুমতি দেবে।

রং

সিএসএস একাধিক রঙ ফর্ম্যাট সমর্থন করে, যার বেশিরভাগই সাধারণত হেক্সাডেসিমাল। তবে টেক্সটটি সহজভাবে কাজ করে। "হলুদ" পেতে আপনি কেবল "হলুদ" লিখতে পারেন, এটি প্রিসেটের হলুদ রঙ ব্যবহার করবে। একটি নির্দিষ্ট রঙ প্রাপ্ত করতে, নীচের হেক্সাডেসিমাল কোডগুলির মতো সঠিক রঙের ডেটা অবশ্যই ব্যবহার করা উচিত।

হেক্স রঙের কোডগুলির কয়েকটি উদাহরণ:

#5dd000 সবুজ
#0000d0 নীল
#d00000 লাল
#00000058 স্বচ্ছ কালো

যে কোনও রঙের জন্য একটি কোড পেতে একটি হেক্স রঙের চার্টের জন্য এখানে যান।

/ * এবং * / এর মধ্যে কোড বা পাঠ্যের একটি অংশ একটি মন্তব্য নির্দেশ করে এবং উপেক্ষা করা হবে। এটি আপনাকে কোডের কোনও বিশেষ বিভাগ কী করে তা সহজেই সনাক্তযোগ্য হতে পারে তার বর্ণনা যুক্ত করতে দেয়। কোডটি মোছা না করে এটি অক্ষম করতেও এটি ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ

/ * এটি কোডের উপরে এটি যুক্ত করতে পারে এটি আপনাকে কী বলবে * / /

সিএসএস চেইন

সিএসএসকে বিভিন্ন বিভাগ একসাথে সংশোধন করার জন্য শৃঙ্খলিত করা যায়। এর উদাহরণ "বর্ডার কালার" মোড। এটি সংশোধন করার জন্য উপাদানগুলির তালিকাবদ্ধ করে এবং সেগুলির জন্য প্রযোজ্য একটি পরিবর্তন করে।

পরিবর্তনগুলির তালিকা

এগুলির যে কোনও প্রয়োগ করতে, "কাস্টম সিএসএস" ক্ষেত্রে CSS কোডটি অনুলিপি করুন এবং আটকান। একাধিক পরিবর্তন ব্যবহার করতে, কেবল ক্ষেত্রের মধ্যে একের পর এক এগুলি যুক্ত করুন। যে কোনও প্রয়োগকৃত কোডটি মাঠে থাকবে। কোনও পরিবর্তন মুছতে, ক্ষেত্রের সংশ্লিষ্ট কোডটি মুছুন বা মন্তব্য করুন। পরিবর্তনগুলি তত্ক্ষণাত কার্যকর হয় যখন কনফিগারেশন পৃষ্ঠাটি সংরক্ষণ করা হয় এবং পুনরায় আরম্ভ করার প্রয়োজন হয় না।

সূচক পুনরুত্পাদন

এটি প্লেব্যাক / পর্যবেক্ষণ সূচককে প্রভাবিত করবে। আপনি যে মানটি চান তার সাথে রঙিন ষড়্ভুজটি প্রতিস্থাপন করুন।

মোড ছাড়া

সবুজ

.playedIndicator {i}: #5dd000; }

হেক্সাডেসিমাল আরজিবিএ ব্যবহার করে গা transparent় স্বচ্ছ

/ * পর্যবেক্ষণ করা আইকনটি অন্ধকার এবং স্বচ্ছ করুন * /। প্লে ইন্ডিকেটর {পটভূমি: #00000058;}

স্বচ্ছ শীর্ষ মেনু

selfexplanatory

/ * শীর্ষ মেনু স্বচ্ছতা * /। স্কিনহিডার.ফোকাসকন্টেইনার-এক্স.সকিনহেডার-কনফন্ডো.স্কিনহিডার-অস্পষ্ট {পটভূমি: কিছুই নয়; পটভূমির রঙ: আরজিবা (0, 0, 0, 0);}} স্কিনহাইডার.ফোকাসকন্টেইনার-এক্স.সকিনহাইডার-সাথে ব্যাকগ্রাউন্ড.সকিনহাইডার-ব্লারড.নো হোমবটনহাইডার {ব্যাকগ্রাউন্ড: কিছুই নয়; পটভূমি-রঙ: আরজিবা (0, 0, 0, 0);

ট্যাব বোতামগুলি প্রসারিত করুন

ট্যাব বোতামগুলি, ইঙ্গিতগুলি, জেনারগুলি ইত্যাদি প্রসারিত করুন ডিফল্টরূপে এগুলি খুব ছোট, বিশেষত মোবাইলে।

/ * আকার পরিবর্তন করতে "আকার-সামঞ্জস্য" এবং "আকার" উভয়ই সামঞ্জস্য করুন * /। HeaderTabs.sectionTabs {পাঠ্য-আকার-সমন্বয়: 110%; হরফ-আকার: 110%;}। পৃষ্ঠাটাইটেল {মার্জিন-শীর্ষ: অটো; মার্জিন-নীচে: অটো; emb এম্বি-ট্যাব-বোতাম {প্যাডিং: 1.75 মিমি 1.7 মিমি}

প্রসারিত ট্যাব এবং স্বচ্ছ মেনুতে বোতামগুলি এর মতো দেখায়:

মিনিমালিস্ট লগইন পৃষ্ঠা

স্বচ্ছ শীর্ষ মেনু সহ এটি আরও ভাল দেখায়।

/ * লগইন ফর্মটি হ্রাস করুন * / #loginPage .readOnlyContent, #lginPage ফর্ম {সর্বাধিক প্রস্থ: 22 মিমি; * / * "দয়া করে লগইন করুন" পাঠ্যটি লুকান, মার্জিনটি লগইন ফর্মটিকে অনেক বেশি উপরে যেতে বাধা দেয় * / #loginPage h1 {প্রদর্শন: কোনওটি নয়} #loginPage .প্যাড-বামে। প্যাডড-ডান পৃষ্ঠা ad প্যাড-নীচে {নমুনা: 50px} / * "ম্যানুয়াল" এবং "ভুলে যাওয়া" বোতামগুলি * / #loginPage .raised.cancel. block.btnManual.emby বোতাম {নমুনা: কোনওটি নয়} #loginPage .raised.cancel. block .btnButtonPassword.emby بھول.btn {নমুনা: কিছুই নয়

স্টাইলাইজড পর্বের পূর্বরূপগুলি

সিজন ভিউতে এপিসোডগুলির পূর্বরূপগুলি অনুভূমিক রেজোলিউশনের উপর ভিত্তি করে আকারযুক্ত, যার ফলে পর্বের সারাংশে প্রচুর জায়গা নষ্ট হয়ে যায় এবং উচ্চ উল্লম্ব পৃষ্ঠায় নেভিগেট করার জন্য প্রচুর স্ক্রোলিংয়ের প্রয়োজন হয়। এই কোডটি বড় পর্দায় উল্লম্ব স্ক্রোলিংয়ের প্রয়োজনীয়তা হ্রাস করতে পর্বের এন্ট্রিগুলির উচ্চতা হ্রাস করে।

/ * পর্বের আকারের পূর্বরূপ চিত্রগুলি আরও সংক্ষিপ্তভাবে {উচ্চতা: 61px; মার্জিন: 0;

সবচেয়ে ছোট এবং সবচেয়ে স্টাইলিশ কাস্ট সম্পর্কে তথ্য

এটি ব্রডকাস্টের তথ্যের স্টাইলকে নাটকীয়ভাবে পরিবর্তিত করবে প্ল্লেক্স কীভাবে তার অনুরূপ something বেগুনি ধূসর থিমটি ইতিমধ্যে গোলাকার castালাই সংক্রান্ত তথ্য রয়েছে, তবে সমস্ত কিছুর মতো একই আকারে, এই ওভাররাইডের ফলে সামান্য ছোট থাম্বনেইল হবে এবং অন্যান্য সমস্ত থিমগুলির সাথেও কাজ করবে works

/ * স্কোয়ার সঙ্কুচিত করুন এবং থাম্বনেইলগুলি (বা রাউন্ড) প্রজেক্ট করুন * / #castContent .card.overflowPortraitCard.PressCard.card-hoverable.cardwithuserdata {প্রস্থ: 4.2 সেমি! গুরুত্বপূর্ণ; হরফ আকার: 90%! গুরুত্বপূর্ণ; TP #castContent .card.overflowPortraitCard। personaTarjeta.com তথ্য ডেটা ব্যবহার {প্রস্থ: 4.2 সেমি! গুরুত্বপূর্ণ; হরফ আকার: 90%! গুরুত্বপূর্ণ;; / * সঠিক চিত্র অনুপাতের আচরণটি সঠিক করুন, বর্গক্ষেত্র টাইলের জন্য প্রান্ত ব্যাসার্ধকে শূন্যের সাথে সেট করুন * / #castContent .cardContent-button.cardImageContainer.c UsedI छवि। C পটভূমি আকার: কভার; গুরুত্বপূর্ণ! প্রান্ত ব্যাসার্ধ: 2.5 সেমি; TP 1 টিপি 3টাস্টক্ট কনটেন্ট .কার্ড কনটেন্ট-বাটনকর্ডকার্ড কনটেনার.কভার চিত্র ডিফল্ট.কার্ডব্যাকগ্রাউন্ড।ডাফল্টকার্ডব্যাকগ্রাউন্ড 1.cardContent। cardSombra.itemAcción {পটভূমি আকার: কভার; গুরুত্বপূর্ণ! প্রান্ত ব্যাসার্ধ: 2.5 সেন্টিমিটার;} #castContento .CardBonton.cardImageContainer.c UsedImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content। আইটেম অ্যাকশন {তহবিলের আকার: কভার; গুরুত্বপূর্ণ! প্রান্ত ব্যধি ! গুরুত্বপূর্ণ; প্রান্ত-ব্যাসার্ধ: 2.5 সেমি; TP 1 টিপি 3টাস্টক্ট কনটেন্টকন্টেন্টবটন.ফস কনটেন্ট কনটেইনার। চিত্রটি আচ্ছাদিত ডিফল্ট চিত্রকার্ডব্যাকগ্রাউন্ড।ডিফল্টকার্ডব্যাকগ্রাউন্ড 4.কার্ডকার্টেন্ট.কার্ড শ্যাডকন্টেন্টএশন; পটভূমির আকার: কভার; গুরুত্বপূর্ণ! প্রান্ত-ব্যাসার্ধ: 2.5 সেমি; TP 1 টিপি 3 টিস্টক্ট কন্ট্রাক্ট কন্টেন্ট.বটন.কন্টেইনার.কভার ইমেজ.ডেফল্টকার্ডব্যাকগ্রাউন্ড।ডাফল্টকার্ডব্যাকগ্রাউন্ড 5.cardContent.card শ্যাডকন্টেন্ট.অ্যাকশন {পটভূমির আকার: কভার; গুরুত্বপূর্ণ! প্রান্ত ব্যাসার্ধ: 2.5 সেমি; TP #castContento nto কার্ডসকেলেবল {প্রস্থ: 3.8 সেন্টিমিটার! গুরুত্বপূর্ণ; উচ্চ: 3.8 সেমি! গুরুত্বপূর্ণ; ব্যাসার্ধ-প্রান্ত: 2.5 সেমি;} #castContent .CardOverlayContainer.itemAction {ব্যাসার্ধ প্রান্ত: 2.5 সেমি; * / * কেন্দ্রের মাউসওভার বোতাম * / #castContent .কার্ড ওভারলে বাটন-বিআর {নীচে: 4%; ডান: 15%; প্রস্থ: 70%;} #castContento.cardOverlayButton.card ওভারলেবাটন-হোভার.সাইটমঅ্যাকশন.প্যাপার-আইকন-বোতাম-লাইট {মার্জিন: অটো;;

পটভূমির রঙ

.backgroundContenedor, .dialog, html {পটভূমির রঙ: #0fd0d0; }

পটভূমি গাark় করুন

এটি নীল চকচকে এবং বেগুনি ধোঁয়ার পটভূমিকে অন্ধকার করে দেয়, আপনি এটি কতটা অন্ধকার চান তার উপর নির্ভর করে শতাংশ সম্পাদনা করুন। লোয়ার গা dark় হয়।

/ * অন্ধকার ব্যাকগ্রাউন্ড, শুধুমাত্র নীল আভাসের সাথে কাজ করে * /। ব্যাকগ্রাউন্ডকন্টেইনার {পটভূমি রঙ: #000000; ফিল্টার: উজ্জ্বলতা (50%);

ডান শিরোনাম

এটি উপরের ডানদিকে কাস্ট, অনুসন্ধান এবং ব্যবহারকারীর বোতামের রং পরিবর্তন করে।

.হেডাররাইট {রঙ: হলুদ; }

কনসোল প্যানেল

বামদিকে মেনু প্যানেলের রঙ পরিবর্তন করুন।

.mainDrawer-scrolContainer {রঙ: হলুদ; }

সাধারণ পৃষ্ঠা

.কন্ট্রোল প্যানেল সাধারণ ফর্ম {রঙ: হলুদ; }

সীমানার রঙ

এটি পাঠ্য ক্ষেত্রগুলির সীমানার রঙ পরিবর্তন করবে এবং মেনুগুলি নামিয়ে দেবে।

.এমবি-ইনপুট,। এমবি-টেক্সারিয়া, এমবি নির্বাচন করুন select সীমানা-রঙ: #d00000; }

এটি নির্বাচিত পাঠ্য ক্ষেত্রগুলির সীমানা রঙ এবং ড্রপ-ডাউন মেনুগুলিকে প্রভাবিত করবে।

.এমবি-ইনপুট: ফোকাস, এমবি-টেক্সারিয়া: ফোকাস, এম্বেই সিলেক্ট-কালার ol বর্ডার কালার: 1 টিপি 3 টিফফ্ফ! গুরুত্বপূর্ণ; }

সম্পূর্ণ শিরোনাম মোড

.স্কিনহেইডার, .মেনড্রেভার, .জেবি-ইনপুট, .জেবি-টেক্সারিয়া, .এমবি সিলেক্ট। }

হটডগস এবং ক্যাটসআপ

রঙিন থিমের উদাহরণ।

.স্কিনহেইডার, .মেনড্রেওয়ার, .জেবি-ইনপুট, .জেবি-টেক্সারিয়া, .এমবি-নির্বাচন, .navMenuOption- নির্বাচিত, .কার্ডবক্স, কাগজ তালিকা {পটভূমি: #ff9475; emb। এমবাই-ইনপুট, .এমবি-টেক্সারিয়া,। USBy- "সীমানা-রঙ: #fdbe7d; background div> div> div> a: নবম-শিশু (বিজোড়),। বোতাম-জমা দিন,। প্রধান অ্যানিমেটেড পেজ *: নবম শিশু (বিজোড়), ড্যাশবোর্ড জেনারাল ফর্ম *: নবম শিশু (বিজোড়), .মেনড্রেয়ার-স্ক্রোলকন্টেনার *: নবম-শিশু (বিজোড়),। শিরোনাম রাইট *: নবম-শিশু (বিজোড়) {রঙ: লাল;} #miPreferencesMenuPage। listItemIcon, .emby-tab-বোতাম [ডেটা-সূচক = "1"], #myPageMenuPreferences; ডিভ; ডিভ; ডিভ; ডিভ; ডি: এ: নথ-চাইল্ড (সম) ড্যাশবোর্ডজেনারাল ফর্ম *: নবম-শিশু (এমনকি),। মেইনড্রেয়ার-স্ক্রোলকন্টিনিয়ার *: নবম-শিশু (এমনকি),। হেডার রাইট *: নবম-শিশু (এমনকি) .ক্যান্সেল {রঙ: হলুদ;}

ভাসমান এখন নিয়ন্ত্রণ বাজানো

/ * নীচের সারিটির জন্য নির্দিষ্ট উচ্চতা * /: মূল {- ফিক্সড-এলিমেন্ট-আপ: 95px;} / * এখন পাদদেশে বার আলতো চাপুন * /। এখন প্লেইংবার {প্রস্থ: 650px; জেড-ইনডেক্স: 10; অবস্থান: স্থির; আপ: 300px; উচ্চতা: 120px; প্রান্ত শৈলী: কঠিন; সীমানা রঙ: সাদা; পটভূমি রঙ: কালো; বাম মার্জিন: 50%;} / * এখনকার প্লেইংবার * / .এখন প্লেইংবারটপ {উচ্চতা: 5px! গুরুত্বপূর্ণ; সর্বাধিক প্রস্থ: 500px শীর্ষ: 10px;} / * গানের অগ্রগতি অনুসন্ধান বার * /। এখন ব্যবহার বারে অবস্থানপরিবর্তনকারী {অবস্থান: আপেক্ষিক; উপরে: 1.0 এম! গুরুত্বপূর্ণ;} / * অ্যালবামের থাম্বনেইল, শিল্পী, এবং অ্যালবামের নাম * /। বর্তমানে প্লেয়িংবারিফোনকন্টেইনার containing অবস্থান: স্থির! গুরুত্বপূর্ণ রয়েছে; বাম: 12px; শীর্ষ: 34px; উচ্চতা: 60px; প্রস্থ: 1100px;} / * পরবর্তী, পূর্ববর্তী ট্র্যাক, প্লে / বিরতি, পরবর্তী এবং সময়ের উপাদানগুলি রাখে * /। এখন প্লেইংবারেন্টার {অবস্থান: আপেক্ষিক! গুরুত্বপূর্ণ; বাম: 32px; উপরে: var (- নির্দিষ্ট-উপাদান-উপরে); সর্বনিম্ন প্রস্থ: 500px;} / * নীরব থাকুন, ভলিউম স্লাইডার সহ ধারক, পুনরাবৃত্তি বোতাম, প্রিয় এবং রিমোট কন্ট্রোল * /। এখনপ্লেইংবারাইট {প্রস্থ: 402 পিএক্স! গুরুত্বপূর্ণ; বাম: -60px;} / * নিঃশব্দ বোতাম * /। নিঃশব্দ বাটন {অবস্থান: আপেক্ষিক; আপ: var (- আইটেম-আপ);} / * ভলিউম স্লাইডার * /। এখনপ্লেইংবারভোলিউমস্লাইডারকন্টেইনার {অবস্থান: আপেক্ষিক; বাম: -4px; শীর্ষ: var (- শীর্ষ-উপাদান);} / * টগল পুনরাবৃত্তি বোতাম * /। toggleRepeatButton {অবস্থান: আপেক্ষিক! গুরুত্বপূর্ণ; বাম: -20px; শীর্ষ: var (- শীর্ষ-উপাদান);} / * প্রিয় * /। এখনপ্লেইংবারউসারডেটাবাটনস {অবস্থান: আপেক্ষিক; বাম: -4px; শীর্ষ: var (- শীর্ষ-উপাদান);} / * রিমোট কন্ট্রোল * /। রিমোটকন্ট্রলবাটন {বাম: -110px; শীর্ষ: বর্ণ (- শীর্ষ-উপাদান);

সম্প্রদায় লিঙ্ক

কাস্টম সিএসএস নিয়ে আলোচনা করা এবং ভাগ করা হয়েছে এমন জায়গাগুলির কয়েকটি লিঙ্ক।

কাস্টম সিএসএস - 10.5.0 এর জন্য আপডেট হয়েছে থেকে jellyfin

সহজ জেলিফিন কাস্টম সিএসএস থেকে jellyfin

https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/