বিষয়বস্তুতে চলুন

সাহায্য:ব্যবহারকারীর স্টাইল

উইকিপিডিয়া, মুক্ত বিশ্বকোষ থেকে
সংক্ষিপ্তসমূহ

ব্যবহারকারীরা ফন্ট, রং, মার্জিনে থাকা লিঙ্কের অবস্থানসহ আরও অনেক কিছু নিজের পছন্দমতো সাজিয়ে নিতে পারেন! ব্যবহারকারী পাতার উপপাতায় সংরক্ষিত কাস্টম ক্যাসকেডিং স্টাইল শীটস বা সিএসএস ব্যবহার করে এটি করা হয়।

উদাহরণস্বরূপ: বর্তমানে আপনি যে স্কিন ব্যবহার করছেন তাতে সিএসএস পরিবর্তন করার জন্য বিশেষ:আমার পাতা/skin.css লিঙ্কে গিয়ে একটি পাতা তৈরি করুন এবং সেখানে আপনার পছন্দমতো সিএসএস কোড বসিয়ে দিন (যদি আপনি চান যে আপনার করা পরিবর্তনগুলো সব ধরনের স্কিনেই কার্যকর থাকুক, তবে সেগুলো বিশেষ:আমার পাতা/common.css পাতায় রাখুন)। নির্দিষ্ট কোনো বার্তা লুকিয়ে রাখার পদ্ধতি জানতে WP:CSSHIDE দেখুন।

সাধারণ

[সম্পাদনা]

ক্যাসকেডিং স্টাইল শীট

[সম্পাদনা]

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

মিডিয়াউইকি সফটওয়্যারটিতে নিজস্ব সিএসএস রয়েছে এবং উইকিপিডিয়া নিচের পাতাগুলো ব্যবহার করে সেই সিএসএস-কে ওভাররাইড বা পরিবর্তন করে:

পুরো সাইট জুড়ে কার্যকর সিএসএস MediaWiki:Common.css-এ থাকে।

আপনি ইউজার স্টাইল ব্যবহার করে নিজের জন্য এগুলো পরিবর্তন করতে পারেন। আপনার বর্তমান স্কিন যা-ই হোক না কেন, সব ক্ষেত্রেই পরিবর্তনগুলো কার্যকর করতে আপনার common.css পরিবর্তন করুন। আর যদি শুধু বর্তমান স্কিনে পরিবর্তন আনতে চান, তবে আপনার skin.css পরিবর্তন করুন। উইকিমিডিয়ার সব প্রকল্পে পরিবর্তনগুলো কার্যকর করতে আপনি মেটাতে লগ ইন করে আপনার global.css পরিবর্তন করতে পারেন।

ওই পাতায় কিছু সিএসএস কোড লিখুন। সিএসএস প্রাক-প্রদর্শন বা প্রিভিউ একটি বিশেষ পদ্ধতিতে কাজ করে: যদি বর্তমান স্কিনটি সেই পাতার জন্য প্রযোজ্য হয়, তবে এটি পাতার ভেতরের মূল তথ্যের বদলে মার্জিনগুলো কেমন দেখাবে তা প্রদর্শন করে। এর কিছু সীমাবদ্ধতা আছে। উদাহরণস্বরূপ, মার্জিনে থাকা লিঙ্কগুলো কেমন দেখাবে তা দেখা গেলেও সব ধরনের লিঙ্কের চেহারা পরীক্ষা করা সম্ভব নাও হতে পারে। সংরক্ষণের পর, ওই পাতায় বা অন্য যেকোনো পাতায় থাকাকালীন নতুন ফাইলগুলো লোড করতে একটি ফোর্স রিলোড (shift-reload/ctrl-f5) দিন।

ব্যবহারকারীর সিএসএস যেন স্বয়ংক্রিয়ভাবে লোড হয়, সেজন্য কনফিগারেশনে $wgAllowUserCss ভেরিয়েবলটি 'true' হিসেবে সেট করা থাকতে হয়। অন্যথায়, জাভাস্ক্রিপ্টের মাধ্যমে এটি লোড করা সম্ভব।

জাভাস্ক্রিপ্ট ব্যবহার করে ব্যবহারকারীর উপপাতা থেকে সিএসএস ইমপোর্ট করতে আপনার common.js পাতায় mw.loader.load কমান্ডটি ব্যবহার করুন:

 mw.loader.load( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css', 'text/css' );

জাভাস্ক্রিপ্ট এবং ব্যবহারকারী স্ক্রিপ্ট

[সম্পাদনা]

উইকিপিডিয়াতে নতুন বৈশিষ্ট্য যোগ করতে জাভাস্ক্রিপ্ট ব্যবহার করা যেতে পারে, যেমন: লেখা খোঁজা বা প্রতিস্থাপনের বক্স যোগ করা অথবা উন্নত রোলব্যাক অপশন ব্যবহার করা। ডিফল্ট ফন্ট স্টাইল থেকে শুরু করে কাস্টম বাটন—সবকিছু নিজের মতো সাজানোর জন্য বিভিন্ন স্ক্রিপ্ট রয়েছে।

অনেক স্ক্রিপ্ট পাতা ইমপোর্ট করে ব্যবহার করা যায়। একসাথে অনেকগুলো কাজ করার জন্য ভিন্ন ভিন্ন স্ক্রিপ্ট একে অপরের সাথে মিলিয়েও ব্যবহার করা সম্ভব। কিছু স্ক্রিপ্ট "গ্যাজেট" হিসেবে পাওয়া যায়, যার অর্থ হলো বিশেষ:পছন্দসমূহ-এর "গ্যাজেট" ট্যাব থেকে একটি বক্সে টিক চিহ্ন দিয়েই সেগুলো ইনস্টল করা যায়।

আপনার জাভাস্ক্রিপ্ট পাতায় আগে থেকে থাকা কোনো স্ক্রিপ্ট যোগ করতে ফাইলে {{subst:js|স্ক্রিপ্টের নাম}} কোডটি লিখুন। বিস্তারিত নির্দেশনা উইকিপিডিয়া:ব্যবহারকারী স্ক্রিপ্ট/গাইড পাতায় পাওয়া যাবে।

রেন্ডারিং

[সম্পাদনা]

একটি পাতার এইচটিএমএল সোর্সে নিচের মতো লাইনগুলো থাকে:

 <script src="/w/wiki.phtml?title=ব্যবহারকারী:আপনার-ব্যবহারকারী-নাম/standard.js&amp;action=raw&amp;ctype=text/javascript">
 </script>
 @import "/style/wikistandard.css";
 @import "/w/wiki.phtml?title=User:আপনার-ব্যবহারকারী-নাম/standard.css&action=raw&ctype=text/css";

এটি মূলত নির্দিষ্ট স্কিনের জন্য প্রকল্প-ব্যাপী সিএসএস (যেমন এখানে উইকিপিডিয়ার ক্ষেত্রে //bn.wikipedia.org/style/wikistandard.css-কে বোঝানো হচ্ছে) এবং একটি নির্দিষ্ট স্কিনের জন্য ব্যক্তিগত জাভাস্ক্রিপ্ট ও সিএসএস-কে নির্দেশ করে।

এভাবে সার্ভার মূলত সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলের রেফারেন্সসহ এইচটিএমএল প্রদান করে, কিন্তু এটি সেই ফাইলগুলোর ভেতরের তথ্যের কোনো ব্যাখ্যা বা ইন্টারপ্রিটেশন করে না। এই ব্যাখ্যার কাজটি ব্রাউজার তার নিজস্ব সক্ষমতা এবং সেটিংসের ওপর ভিত্তি করে সম্পন্ন করে।

সিএসএস

[সম্পাদনা]

ব্যবহারকারী উপপাতার সিএসএস বনাম লোকাল ফাইলের সিএসএস

[সম্পাদনা]

উপরের পদ্ধতিগুলোর পাশাপাশি বা বিকল্প হিসেবে ব্রাউজারে একটি লোকাল সিএসএস সেট করা যেতে পারে। কেউ যদি একাধিক ব্রাউজার ব্যবহার করেন, তবে প্রতিটির জন্য আলাদা আলাদা সিএসএস সেট করা সম্ভব। এটি শুধুমাত্র মিডিয়াউইকি প্রকল্পের জন্য নয়, বরং পুরো ওয়ার্ল্ড ওয়াইড ওয়েবের জন্য প্রযোজ্য হয় (এবং এটি লগ ইন থাকার ওপর নির্ভর করে না)। তবে একটি সেটিং অন্য ওয়েবপৃষ্ঠাগুলোকে তখনই প্রভাবিত করে যদি তারা একই সিএসএস সিলেক্টর ব্যবহার করে; যেমন: a.extiw সিলেক্টরের জন্য করা কোনো সেটিং h2-এর তুলনায় ইন্টারনেটের খুব কম পাতায় প্রভাব ফেলবে (তবে এটি অন্তত একটির বদলে সব মিডিয়াউইকি প্রকল্পকে প্রভাবিত করবে)।

সিএসএস এর যেসব লাইন বিভিন্ন মিডিয়াউইকি প্রকল্পে ভিন্ন হওয়া উচিত যেমন সহজে চেনার জন্য আলাদা আলাদা ব্যাকগ্রাউন্ড কালার, সেক্ষেত্রে লোকাল সিএসএস ব্যবহার করা যায় না; এই লাইনগুলো অবশ্যই ব্যবহারকারী উপপাতায় রাখা উচিত।

কিছু কম্পিউটার (যেমন: ইন্টারনেট ক্যাফে, মোবাইল ডিভাইস বা ট্যাবলেট) ব্যবহারকারীকে ব্রাউজারে পছন্দমতো সেটিং বা প্রেফারেন্স সেট করতে দেয় না। সেক্ষেত্রে ব্যবহারকারী উপপাতাগুলো ব্যবহারকারীকে নিজস্ব শৈলী বা ইউজার স্টাইল সেট করার সুযোগ দেয়।

যখন ব্রাউজারকে ওয়েবপৃষ্ঠা বা এক্সটার্নাল সিএসএস-এ নির্দিষ্ট করা ফন্ট সাইজ উপেক্ষা করার জন্য সেট করা হয়, তখন ফন্ট সাইজ সংক্রান্ত সিএসএস লাইনগুলো লোকাল সিএসএসে রাখতে হয়।

সিএসএস সিলেক্টর

[সম্পাদনা]

পাতার মূল অংশের (বডি) শৈলীর জন্য প্রাসঙ্গিক এলিমেন্ট, ক্লাস এবং আইডি-র মাধ্যমে প্রকাশিত সিএসএস সিলেক্টরগুলো নিচে দেওয়া হলো। যতটা সম্ভব উদাহরণ দেওয়া হয়েছে, যা বর্তমান শৈলী অনুযায়ী ফলাফল প্রদর্শন করছে:

  • :link — লিঙ্ক — উদাহরণ: সাহায্য:নির্ঘণ্ট ; ডিফল্ট: help:index (দেখুন a বনাম :link)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external — http://example ; ডিফল্ট: http://example
  • :link.extiw – পাতার মূল অংশে আন্তঃউইকি লিঙ্ক – ; ডিফল্ট: en:example
  • :link.image – পূর্ণাঙ্গ চিত্র থেকে চিত্রের বিবরণ পাতার লিঙ্ক
  • :link.internal – সরাসরি ফাইলের লিঙ্ক (মিডিয়া:) এবং থাম্বনেইল বা ম্যাগনিফাইং গ্লাস আইকন থেকে চিত্রের বিবরণ পাতার লিঙ্ক (মনে রাখবেন, a.internal-এর জন্য নির্দিষ্ট করা রং এবং ফন্ট সাইজ শুধুমাত্র প্রথম ক্ষেত্রে প্রযোজ্য)
  • :link.new উদাহরণ ; ডিফল্ট: example
  • .allpagesredirect – abc – বিশেষ:সব পাতা এবং বিশেষ:উপসর্গসূচি পাতায় পুনর্নির্দেশসমূহ
  • body.ns-0, ..., body.ns-15 (নামস্থানসমূহ)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX ছবি
  • small – উদাহরণ
  • table.toc

সাধারণ অভ্যন্তরীণ লিঙ্কগুলো internal ক্লাসের অন্তর্ভুক্ত নয় (আগে ছিল এবং এখনও যেসব সাইট সফটওয়্যারের পুরনো সংস্করণ ব্যবহার করে সেখানে আছে); এগুলোকে সাধারণত :link এবং :link:visited-এর মাধ্যমে সাজানো যায়, যার পর :link.extiw ইত্যাদি সিলেক্টর ব্যবহার করে লিঙ্কের সাধারণ শৈলীতে ব্যতিক্রম আনা যায়।

আন্তঃভাষা লিঙ্কের জন্য:

  • #p-lang a

শৈলীটি কোনো অ্যাট্রিবিউটের মানের ওপরও নির্ভর করতে পারে, যেমন নিচের সিলেক্টরগুলোর মাধ্যমে:

  • :link[title ="User:''ব্যাবহারকারী নাম''"]
  • :link[title ="''পাতার নাম''"]
  • :link[href ="''পূর্ণ ইউআরএল''"]

এর মাধ্যমে নির্দিষ্ট ব্যবহারকারীকে (নিজের নামসহ) আলাদা রঙে চিহ্নিত করা বা হাইলাইট করা যায় এবং নির্দিষ্ট পাতার লিঙ্কগুলোকে আলাদা করা যায় (যেমন সাম্প্রতিক পরিবর্তনে নজরতালিকায় থাকা পাতাগুলো বোল্ড বা মোটা অক্ষরে দেখানো হয়)। এটি অপেরা ব্রাউজারে কাজ করে, তবে ইন্টারনেট এক্সপ্লোরারে নয়। আরও দেখুন সাহায্য:পাতা নজরে রাখা#সিএসএস।

নজরতালিকা এবং সাম্প্রতিক পরিবর্তনে দুটি ক্লাস ব্যবহৃত হয়:

  • autocomment
    উদাহরণ
  • new (নিচে দেখুন)

পাতার ইতিহাসে autocomment এবং নিচের ক্লাসগুলো রয়েছে:

  • user
  • minor

ফলে user-এর জন্য নির্দিষ্ট করা ফন্ট পাতার ইতিহাসে কার্যকর হলেও নজরতালিকা বা সাম্প্রতিক পরিবর্তনে কার্যকর হয় না।

সম্পাদনা পাতা

[সম্পাদনা]
  • সম্পাদনা বক্স: textarea#wpTextbox1
উদাহরণ ১
  • সম্পাদনা সারাংশ বক্স: input#wpSummary
উদাহরণ ২

প্রধান স্টাইল ব্লকসমূহ

[সম্পাদনা]

দেখুন meta:Customization:Explaining_skins

প্রদর্শন না করা

[সম্পাদনা]

লেখার জন্য একটি চরম "শৈলী" হলো এটি প্রদর্শন না করা: টেমপ্লেট:Sxhl ইত্যাদি।

প্রদর্শন না করা লিঙ্কগুলো কাজ করে না (খুব ছোট ফন্টের লিঙ্কের মতো নয়)।

এটি টেমপ্লেটের নাম, প্যারামিটারের নাম, প্যারামিটার মান বা লিঙ্কের ভেতরে পাতার নাম—এসব ক্ষেত্রে লেখা মুছে ফেলার জন্য ব্যবহার করা যাবে না।

প্যারামিটার বা ভেরিয়েবলের ওপর নির্ভরশীল শৈলী

[সম্পাদনা]

ভেরিয়েবল ক্লাস বা আইডি

[সম্পাদনা]

একটি ক্লাস বা আইডি কোনো টেমপ্লেটের ফলাফল বা টেমপ্লেট প্যারামিটারের ওপর নির্ভর করতে পারে, যেমন: class="abcdef"। সম্ভাব্য এক বা একাধিক ক্লাস নামের জন্য সেই ক্লাসের শৈলী সংজ্ঞায়িত করা যেতে পারে। যদি ক্লাসটি সংজ্ঞায়িত না থাকে তবে এটি উপেক্ষা করা হয় এবং স্ট্যান্ডার্ড শৈলী ব্যবহৃত হয়।

সহজ ক্ষেত্রে যেমন: class="abc{{{1}}}" এবং আমরা abcdef ক্লাসটি সংজ্ঞায়িত করলাম। যদি প্যারামিটারের মান "def" হয় তবে এটি প্রযোজ্য হবে।

যদি সাধারণ ব্যবহারের কোনো পাতা তখনই অর্থবহ হয় যখন নির্দিষ্ট ক্লাসের শৈলী সংজ্ঞায়িত থাকে, তবে সেগুলো MediaWiki:Common.css পাতায় নির্দিষ্ট করতে হয়, যা সব ব্যবহারকারী এবং স্কিনের জন্য প্রযোজ্য হয়।

ভেরিয়েবল এইচটিএমএল অ্যাট্রিবিউট নাম

[সম্পাদনা]

এইচটিএমএল অ্যাট্রিবিউট নাম ভেরিয়েবল হিসেবে ব্যবহার করা যায়। HTML Tidy—একটি পুরনো এইচটিএমএল৪ লাইব্রেরি যা সরিয়ে ফেলার পরিকল্পনা করা হয়েছে—ঐতিহাসিকভাবে সার্ভার প্রান্ত থেকে অবৈধ নামের অ্যাট্রিবিউটগুলো সরিয়ে দেয়, ফলে ফলাফলটি ব্রাউজারের অবৈধ অ্যাট্রিবিউট উপেক্ষা করার ক্ষমতার ওপর নির্ভর করে না এবং প্রেরিত তথ্যের পরিমাণ কমে যায়। "class" মানসহ ভেরিয়েবলের জন্য দেখুন Wikipedia:HiddenStructure এবং en:Template:Infobox (backlinks, edit)।

ভেরিয়েবল স্টাইল প্যারামিটার মান

[সম্পাদনা]

উইকিটেক্সট যেমন:

<span style="display:{{{3|none}}}">বুধবার</span>

এখানে প্যারামিটার ৩ সংজ্ঞায়িত থাকলে এবং তার মান "none" না হলে "বুধবার" লেখাটি দেখাবে। আর যদি প্যারামিটার ৩ সংজ্ঞায়িত না থাকে বা মান "none" হয়, তবে কিছুই দেখাবে না। যদি প্যারামিটার ৩-এর মান "none" ছাড়া অন্য কোনো ডিসপ্লে স্টাইল হয়, তবে সেই শৈলীটি কার্যকর হবে।

নমুনা

[সম্পাদনা]

প্রতিটি ব্যবহারকারীর ব্যক্তিগত সিএসএস ফাইলে কাস্টম শৈলী রাখা যেতে পারে, যেমন বিশেষ:আমার পাতা/common.css, যা প্রতিটি ব্যবহারকারী ব্যক্তিগত শৈলী সেট করার জন্য সম্পাদনা করতে পারেন।

/* কন্টেন্ট এরিয়া এবং ট্যাবের পেছনের ব্যাকগ্রাউন্ড হালকা ধূসর করা */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* কন্টেন্ট এরিয়ার সাথে ব্যাকগ্রাউন্ড ইমেজ স্ক্রোল করা বন্ধ করা */
body { background-attachment: fixed; }

/* ব্যাকগ্রাউন্ডের বইয়ের ছবি বদলে অন্য কিছু দেওয়া */
body { background: Purple; }

/* pre এরিয়ার ব্যাকগ্রাউন্ড পরিবর্তন করা */
pre { background: White }

/* লোগো পরিবর্তন করা */
#p-logo a { background: url(https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png) 35% 50% no-repeat; }

/* কোনো লোগো ব্যবহার না করে বক্সগুলোকে সেই জায়গায় সরিয়ে নেওয়া */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* ব্যবহারকারী নামের পাশের পারসন আইকনটি সরিয়ে ফেলা */
li#pt-userpage { background: none }

/* টেক্সট সাইজ এবং ফন্টের জন্য ব্রাউজার প্রেফারেন্স ব্যবহার করা */
html, body, #globalWrapper { font: inherit !important; }

/* লিঙ্কগুলোতে সব সময় আন্ডারলাইন রাখা */
:link { text-decoration: underline; }

/* সহজে পড়ার জন্য কন্টেন্ট এরিয়াকে সরু কলামে দেখানো */
/* প্রয়োজনমতো শতাংশ পরিবর্তন করে নিন */
div#bodyContent {
  width: 50%;
  line-height: 105%;
}

/* নির্বাচিত নয় এমন ট্যাবের ব্যাকগ্রাউন্ড পরিবর্তন */
#p-cactions ul li a { background: #C7FDC7; }

/* নির্বাচিত ট্যাবের ব্যাকগ্রাউন্ড পরিবর্তন */
#p-cactions ul li.selected a { background: white; }

/* নির্বাচিত ট্যাবের বর্ডার ব্যাকগ্রাউন্ড পরিবর্তন */
#p-cactions li.selected { border-color: #aaaaaa; }

/* হোভার করলে ট্যাবের নিচের অংশ মুছে যাবে না */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* অনুসন্ধান বক্স এবং নিচের বাটনগুলোর শৈলী পরিবর্তন */
.searchButton {
    background-color: #efefef;
    border: 1px outset;
}
#searchInput { border: 1px inset; }

/* আদর্শ লিঙ্কের রংসমূহ */
a:link { color: #0645ad; }
a:visited { color: #0b0080; }
a.new:link { color: #cc2200; }
a.new:visited { color: #a55858; }
a.extiw:link { color: #3366bb; } /* অন্যান্য উইকিপিডিয়ার লিঙ্ক */
a.extiw:visited { color: #3366bb; }
a.external:link { color: #3366bb; } /* বহিঃসংযোগ */
a.external:visited { color: #3366bb; }

/* ফায়ারফক্স ব্রাউজারে pre সেকশনে স্ক্রোলবার যোগ করা */
pre { overflow: auto; }

/* 'ফাইল আপলোড' লিঙ্কে স্ট্রাইকআউট দেওয়া যাতে কমন্সে আপলোড করার কথা মনে থাকে */
li#t-upload { text-decoration: line-through; }

/* প্রতিটি পাতার শিরোনাম মাঝখানে আনা */
.firstHeading { text-align: center; }

/* দ্বৈত-পুনর্নির্দেশ সতর্কবার্তা */
div.redirectMsg a.mw-redirect:after {
  content: ' &lt;double redirect&gt;';
  color: Red;
  font-style: italic;
}

/* শিরোনাম এবং হেডিংগুলোতে সেরিফ ফন্ট বন্ধ করা */
h1, h2 { font-family: inherit !important; }

/* নিবন্ধে persondata বক্স প্রদর্শন করা */
table.persondata { display:table; }

/* বিরক্তিকর সতর্কবার্তাগুলো সরিয়ে ফেলা */
#editpage-copywarn, #editpage-copywarn2, #editpage-copywarn3,
#editpage-head-copywarn, .editpage-head-copywarn,
#editnotice_BLP_editintro, .ve-ui-mwSaveDialog-license
{ display: none !important; }

/* নতুনদের জন্য দেওয়া বয়লারপ্লেট টেক্সট সরিয়ে ফেলা */
#category-namespace-editnotice, #footer-info-copyright, #sitesub, .edithelp,
.posteditwindowhelplinks, #footer-icons, .ve-ui-mwSaveDialog-summaryLabel
{ display: none !important; }

/* সম্পাদনার শেষে প্রদর্শিত টেমপ্লেট তালিকার জায়গা বাঁচানো */
:templatesUsed ul, :templatesUsed li {display: inline; padding-right: 5px;}

/* শিরোনাম ছাড়া সব টেক্সট "Avenir" ফন্টে পরিবর্তন করা */
.mw-body h1, .mw-body h2 {
    font-family: "Avenir"
}

গোল কোণা (Rounded corners)

[সম্পাদনা]
ফায়ারফক্সে গোল কোণার নিয়মাবলী
/* কিছু কোণা গোল করা */
#p-cactions ul li, #p-cactions ul li a {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
#content {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
.pBody {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

মুদ্রণ বা প্রিন্ট ভিউ পরিবর্তনসমূহ

[সম্পাদনা]
/*
** মুদ্রণ সংক্রান্ত সব নিয়ম @media print ব্লকে রাখুন।
*/

/* ছোট ফন্ট ব্যবহার করে কালি এবং কাগজ বাঁচানো */
@media print {
    #footer,
    #content,
    body { font-size: 8pt !important; }
    h1 { font-size: 17pt }
    h2 { font-size: 14pt }
    h3 { font-size: 11pt }
    h4 { font-size: 9pt }
    h5 { font-size: 8pt }
    h6 {
        font-size: 8pt;
        font-weight: normal;
    }
}

/* উন্নত পদ্ধতি: :before এবং :after ব্যবহার করে ফরম্যাটিং যোগ করা। 
নিচের কোডটি লিঙ্কের পরে পূর্ণ ইউআরএল যোগ করে: */
@media print {
  #content a:link:after,
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

ব্যবহারকারী টুলবারকে সাইডবক্সে রূপান্তর করা

[সম্পাদনা]

ক্যামিনো, সাফারি এবং ইন্টারনেট এক্সপ্লোরার ৭-এ পরীক্ষিত।

/* ব্যবহারকারী টুলবারকে একটি সাইডবক্সে রূপান্তর */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 10.7em;
    border: none;
    margin: 0 0 0.1em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* ব্যবহারকারী নামের পাশের আইকনটি সরিয়ে ফেলা */
li#pt-userpage { background: none }

ডিফল্ট শৈলীগুলো দেখতে মনোবুক main.css দেখুন।

স্ক্রোল করার সময় টপ বারের অবস্থান স্থির রাখা

[সম্পাদনা]

এই শৈলীটি ভেক্টর লেগাসি ব্যবহারকারীদের স্ক্রোল করার সময় টপ বারটি (অনুসন্ধান বার, আলাপ পাতা, সম্পাদনা ইত্যাদি লিঙ্কসহ) স্থিরভাবে দেখতে সাহায্য করে:

@media screen {
    #mw-head {
        position: fixed;
        background: linear-gradient(to bottom,#fff 50%,#f6f6f6 100%);
    }
}

স্ক্রোল করার সময় সাইডবারের অবস্থান স্থির রাখা

[সম্পাদনা]

ভেক্টর লেগাসি স্কিনে সাইডবারের অবস্থান সহজেই স্থির করা যায়:

/* সাইডবার স্থির করা */
div#mw-panel { position: fixed;
  overflow: auto;
  top: 0px;
  bottom: 0px;
  height: 100%;
  /* স্ক্রোল করার সময় কন্টেন্ট ওভারলে প্রতিরোধ করা */
  background-color: #F6F6F6;
  border-right: 1px solid #A7D7F9;
}
/* pre এলিমেন্টে স্ক্রোলবার যোগ করা */
pre {
  overflow: auto;
  max-height: 25em;
}
এই স্ক্রিপ্ট এবং সিএসএস সাইডবারটিকে স্ক্রিনের একই জায়গায় স্থির রাখে

ক্রোম ব্রাউজারে এর কিছু অনাকাঙ্ক্ষিত প্রভাব থাকতে পারে।

কোলোন ব্লু স্কিনে একটি "ফ্লোটিং লেফট" কুইকবারের অপশন রয়েছে। এই কোডটি মনোবুক স্কিনেও একই সুবিধা প্রদান করে। দেখুন meta:Help:User style/floating quickbar।

কন্টেন্ট এরিয়ায় সেরিফ ফন্টসহ মনোবুক মেনু

[সম্পাদনা]

কন্টেন্ট এরিয়ায় সেরিফ ফন্টের সাথে মনোবুক মেনুর একটি সমন্বয় User:Tillwe/monobook.css পাতায় পাওয়া যাবে। এটি টেবিল ফরম্যাটের তথ্যগুলো মোটামুটি সঠিকভাবে প্রদর্শন করে।

বিষয়শ্রেণী লিঙ্ক স্থানান্তর করা

[সম্পাদনা]
/******************************************************************/
/* বিষয়শ্রেণী লিঙ্ক ডানদিকে সরানো                                  */
/******************************************************************/

/* বিষয়শ্রেণী লিঙ্ক বক্সটি সরানো */
#catlinks {
  position:absolute;
  z-index:1;
  border: 1px solid #aaaaaa;
  background: #fafaff;
  right:1em;
  top:-0.25em;
  width:10.5em;
  float:right;
  margin: 0.2em;
  padding:0.2em;
}

/* বিষয়শ্রেণী লিঙ্কের ফরম্যাট ঠিক করা */
p.catlinks {
  color: #aaaaaa;
  font-family: Verdana,sans-serif;
  font-size:67%;
  line-height: 1.5em;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

#p-personal h5 {
    display: inline;
}

/* বিষয়শ্রেণী লিঙ্কের ভেতরের লিঙ্কগুলোর ফরম্যাট ঠিক করা */
p.catlinks a {
  color:#888888;
}

পার্থক্য প্রদর্শন শৈলী

[সম্পাদনা]
/* ছোট ফন্ট ব্যবহার না করা */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };

/* শুধুমাত্র পরিবর্তিত টেক্সটের নিচে আন্ডারলাইন দেওয়া */
span.diffchange { text-decoration:underline; }

ইতিহাস লগ থেকে "ধন্যবাদ" (thank) বাটন সরিয়ে ফেলা

[সম্পাদনা]
/* "ধন্যবাদ" বাটন সরিয়ে ফেলা */
.mw-thanks-thank-link { display:none; }

দীর্ঘ নির্দেশনামূলক বার্তা লুকিয়ে রাখা

[সম্পাদনা]
/* সুরক্ষিত পাতা সম্পাদনার সময় 'সোর্স দেখুন' সংক্রান্ত বার্তা লুকিয়ে রাখা */
#mw-protectedpagetext { display: none; }

অন্যান্য সিএসএস শৈলীর মতো এটিও বিশেষ:আমার পাতা/skin.css বা বিশেষ:আমার পাতা/common.css পাতায় যোগ করে ব্রাউজারের ক্যাশে রিফ্রেশ করুন।

আলোচনায় শৈলী এবং ফরম্যাটিং যোগ করা

[সম্পাদনা]

আলোচনায় বাম দিকে লম্বালম্বি লাইন যোগ করা এবং ব্যাকগ্রাউন্ডের রং পরিবর্তন করার জন্য একটি পরীক্ষামূলক স্টাইল শীট রয়েছে। বিস্তারিত জানতে User:Isaacl/style/discussion-threads দেখুন।

সাময়িক অ্যাকাউন্ট নামে শৈলী যোগ করা

[সম্পাদনা]

User:Isaacl/style/temporary-account-names.css হলো একটি স্টাইল শীট যা নজরতালিকা, ইতিহাস পাতা বা কন্ট্রিবিউশন লিঙ্কে থাকা সাময়িক অ্যাকাউন্ট নামের আগে একটি দ্বিবর্ণ বিশিষ্ট বর্গক্ষেত্র যোগ করে। বিস্তারিত জানতে User:Isaacl/style/temporary-account-names দেখুন।

সাময়িক অ্যাকাউন্ট নাম সাজানোর অন্যান্য পদ্ধতির জন্য User:Seercat3160/ColourfulTemporaryAccounts § অন্যান্য টুলের সাথে তুলনা দেখুন।

সাহায্য:তথ্যছক/ইউজার স্টাইল

মোনোস্পেসড কোডিং ফন্টের জন্য ইউজার সিএসএস

[সম্পাদনা]

টেমপ্লেট:Mxt/User CSS for a monospaced coding font

সিএসএস সংক্রান্ত বহিঃসংযোগ

[সম্পাদনা]

জাভাস্ক্রিপ্ট

[সম্পাদনা]

জাভাস্ক্রিপ্টের অনেক সম্ভাবনা রয়েছে; যেমন: পছন্দের অবস্থানে লিঙ্কসহ বিভিন্ন লেখা যোগ করা। এই যোগ করা তথ্যগুলো সার্ভার থেকে আসা এইচটিএমএল সোর্স পেজের ওপর নির্ভর করতে পারে; উদাহরণস্বরূপ, এটি 'getElementById' ব্যবহার করে কোনো নির্দিষ্ট আইডি-যুক্ত এইচটিএমএল উপাদানের ওপর ভিত্তি করে কাজ করতে পারে। আবার 'insertBefore' ব্যবহার করে লেখাটি কোথায় যুক্ত হবে সেই অবস্থানও নির্দিষ্ট করা যায়।

উদাহরণস্বরূপ, আপনার পছন্দসমূহের বাম পাশে একটি পাতার লিঙ্ক যোগ করতে নিচের কোডটি আপনার বিশেষ:আমার পাতা/common.js পাতায় যোগ করুন (এখানে 'PageTitle' এর বদলে উইকি পাতার শিরোনামটি লিখুন):

mw.util.addPortletLink(	'p-personal', '/wiki/PageTitle', 'PageTitle', null, null, null, '#pt-preferences');

আরও দেখুন

[সম্পাদনা]
'https://bn.wikipedia.org/w/index.php?title=সাহায্য:ব্যবহারকারীর_স্টাইল&oldid=8917903' থেকে আনীত