কিভাবে ওয়ার্ডপ্রেসে বুলেট পয়েন্টের রঙ পরিবর্তন করবেন

বুলেট পয়েন্টের রঙ আপনার বিষয়বস্তুকে আরও ভালোভাবে তুলে ধরতে সাহায্য করতে পারে। রং সংঘর্ষ হলে এটি একটি চোখের ব্যথা হতে পারে.

অনলাইনে সবচেয়ে বড় কিছু ওয়েবসাইটে, তালিকাগুলি বিশিষ্ট কিন্তু খুব কমই সেগুলি সাধারণ গোলাকার কালো বৃত্ত যা আপনি যখন ওয়ার্ডপ্রেসে একটি বুলেট তালিকা সন্নিবেশ করেন তখন আদর্শ হিসাবে দেখায়৷

আপনার বুলেটের স্টাইল করার জন্য সম্পাদনা করা দরকার যাতে সেগুলিকে আপনি যেভাবে দেখতে চান তা দেখানোর জন্য। তাদের সরাসরি ওয়ার্ডপ্রেস থেকে কোডিং করতে হবে না।



আপনি প্রতীক সন্নিবেশ করতে ইউনিকোড অক্ষর ব্যবহার করতে পারেন, চিত্রগুলির সাথে বুলেট পয়েন্টগুলি প্রতিস্থাপন করতে পারেন, অথবা যদি আপনার বিদ্যমান শৈলীটি ভাল হয়, তবে এগিয়ে যান এবং শুধুমাত্র রঙ পরিবর্তন করতে একটি রঙের স্টাইলিং উপাদান যুক্ত করুন৷

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

কিভাবে ওয়ার্ডপ্রেসে বুলেট পয়েন্টের রঙ পরিবর্তন করবেন

সবচেয়ে সহজ পদ্ধতি হল CSS দিয়ে থিম কাস্টমাইজার এডিট করা। বিকল্পভাবে, WP Style.css পরিবর্তন করার জন্য পরিবর্তন করা যেতে পারে বুলেট পয়েন্ট রঙ। বুলেট তালিকা 'li' উপাদান দ্বারা নিয়ন্ত্রিত হয়. এগুলোর রং থাকতে পারে, এবং শৈলী পরিবর্তন বা সরানো যেতে পারে ছবি বা ইউনিকোড অক্ষর দিয়ে প্রতিস্থাপন করার জন্য।

থিম স্টাইলশীট (Style.css) সম্পাদনা করে বুলেট পয়েন্টের রঙ পরিবর্তন করা

আপনার থিম স্টাইলশীটটি খুঁজে পেতে, বাম সাইডবার মেনুতে স্ক্রোল করুন, 'আবির্ভাব' মেনু আইটেমের উপর হোভার করুন এবং 'থিম সম্পাদক' বিকল্পটি নির্বাচন করুন।

কিভাবে ওয়ার্ডপ্রেস style.css ফাইলটি সনাক্ত করবেন

style.css ফাইল হল ওয়ার্ডপ্রেস থিমের স্টাইলশীট। আপনি যদি জেনেসিস বা ডিভির মতো একটি ফ্রেমওয়ার্ক থিম ব্যবহার করেন তবে সম্ভবত একটি চাইল্ড থিম হতে পারে।

সন্তানের থিমে আপনার সম্পাদনা করুন এবং একটি অভিভাবক থিম নয়, যা একটি কাঠামোর মধ্যে সমস্ত কোডিং নিয়ে গঠিত৷

সম্পাদনা করতে ক্লাসের নাম চিহ্নিত করুন

প্রতিটি ওয়ার্ডপ্রেস টেমপ্লেটে, বুলেট স্টাইলিং নিয়ন্ত্রণ করতে ব্যবহৃত ক্লাসের নাম আলাদা। সংখ্যাগরিষ্ঠরা .entry-content ul li CSS স্ট্রিং ব্যবহার করে, অন্যরা তাদের তালিকা আইটেমগুলিকে মার্কার দিয়ে নাম দেয়।

ক্লাসের নাম খুঁজতে, একটি বুলেট তালিকার উপর হোভার করুন, ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন। বিষয়বস্তুর পিছনে কোডিং দেখানো একটি নতুন স্ক্রিন খুলবে।

ইন্সপেক্টরে যে নামটি দেখায় তা হল বুলেটের রঙ বা সামগ্রিক স্টাইল পরিবর্তন করতে সম্পাদনা করার জন্য স্টাইলশীটের উপাদান।

স্টাইলশীট আপডেট করতে বা WP কাস্টমাইজার সম্পাদনা করার জন্য আপনার div উপাদানটির নাম প্রয়োজন। সম্পাদনার ক্ষেত্রে একমাত্র পার্থক্য হল আপনি কোডটি কোথায় রাখবেন।

আপনার ওয়ার্ডপ্রেস বুলেট পয়েন্ট স্টাইল করার জন্য উপাদানগুলি সম্পাদনা করুন

ওয়ার্ডপ্রেস টেমপ্লেটগুলির জন্য বেশিরভাগ স্টাইলশীটে, বুলেটগুলি বিশেষভাবে 'উপাদানগুলির' জন্য একটি বিভাগে যুক্ত করা হয়।

এটি ফন্ট, তালিকা আইটেম শৈলী, পাঠ্য রঙ, ব্লককোট শৈলী এবং শিরোনামের আকার, ফন্ট এবং ওজন নিয়ন্ত্রণ করে।

বুলেটগুলি হল তালিকার আইটেম এবং সেগুলিকে 'অর্ডার করা তালিকা' হিসাবে সংক্ষেপে কোডে 'ol' হিসাবে সন্নিবেশিত করা হয়, এবং 'আনঅর্ডারড তালিকা', সংক্ষেপে 'ul' হিসাবে। অর্ডারকৃত তালিকা সংখ্যা ব্যবহার করে। ক্রমবিহীন তালিকা বুলেট ব্যবহার করে। 'ul' এর শৈলী নিয়ন্ত্রণ করে এমন বিভাগটি সন্ধান করুন।

কোডের সঠিক লাইন হল 'ul, li', সাধারণত একটি লাইন বিরতি দিয়ে আলাদা করা হয়, তারপর 'li' কোডের পরে বুলেটের স্টাইলিং যোগ করা হয়।

উদাহরণ হিসেবে, সেই সেটিংস ওভাররাইট করতে থিম কাস্টমাইজার ব্যবহার করলে বুলেট তালিকা এবং এর আইটেমগুলি নীল হয়ে যায়।

বুলেট পয়েন্টের রঙ পরিবর্তন করতে, CSS কাস্টমাইজারে নিম্নলিখিত যোগ করুন

.entry-content ul li {
list-style: square;
color: #2E89FF;
}

*কোন হেক্স রঙের মান পরিবর্তন করুন। আপনি যদি হেক্স কোড না জানেন তবে যেকোনো অনলাইন কালার পিকার খুঁজুন।

লেখার রঙ পরিবর্তন না করে বুলেটের রঙ পরিবর্তন করা

উপরের কোডটি বুলেটের রঙ এবং বুলেট তালিকার মধ্যে রাখা পাঠ্য পরিবর্তন করবে।

আপনি যদি এটি না করতে চান তবে আপনি আপনার থিম স্টাইলিং উপেক্ষা করতে এবং আপনার নিজস্ব কাস্টম CSS দিয়ে এটি প্রতিস্থাপন করতে CSS কাস্টমাইজার ব্যবহার করতে পারেন।

আপনার চেহারা মেনুতে যান, কাস্টমাইজ নির্বাচন করুন, তারপর নিচের কোডটি ব্যবহার করুন:

ul {list-style: none}
li::before {content: "➣"; color: blue;
display: inline-block; width: 1em;
margin-left: -1em}

উপরের CSS স্ট্যান্ডার্ড বুলেট প্রতিস্থাপন করতে একটি ইউনিকোড অক্ষর ব্যবহার করছে। এবং যেহেতু এটি 'আগে' বিষয়বস্তু ব্যবহার করছে, শুধুমাত্র বুলেট রঙ পরিবর্তন করে।

টেক্সট একই রঙ এবং ফন্ট অবশেষ. শুধুমাত্র বুলেট শৈলী পরিবর্তন.

একটি ইউনিকোড অক্ষরের পরিবর্তে শুধুমাত্র একটি ভিন্ন রঙে স্ট্যান্ডার্ড বুলেট পয়েন্ট ব্যবহার করতে, ইউনিকোড অক্ষরের জায়গায় একটি স্ট্যান্ডার্ড বুলেট (বৃত্ত, বর্গক্ষেত্র বা যেকোনো আকৃতি) কপি এবং পেস্ট করুন।

li::before {content: "•"; color: blue;

স্টাইলিং ওয়ার্ডপ্রেস বুলেট আপনার পছন্দ নির্দেশ করে

আপনার বুলেটগুলিকে আপনার পছন্দসই শৈলীতে তৈরি করতে অসংখ্য উপাদান পরিবর্তন করা যেতে পারে।

আপনি ইন্ডেন্ট বাড়াতে বা কমাতে মার্জিন প্যাডিং পরিবর্তন করতে পারেন, ফন্ট, ফন্টের ওজন এবং বুলেটের স্টাইল পরিবর্তন করতে পারেন।

বুলেটের জন্য তালিকা-শৈলী হতে পারে:

  • বৃত্ত
  • বর্গক্ষেত্র
  • ডিস্ক
  • দশমিক

সংখ্যাসূচক তালিকা পরিবর্তন করা যেতে পারে

  • দশমিক-প্রধান-শূন্য (01. তালিকা আইটেম 1, 02. তালিকা আইটেম 2, ইত্যাদি)
  • নিম্ন-রোমান (i. তালিকা আইটেম 1, ii., তালিকা আইটেম 2, ইত্যাদি)
  • আপার-রোমান (I. তালিকা আইটেম 1 এর জন্য, II, তালিকা আইটেম 2 এর জন্য, ইত্যাদি)
  • কোনটিই নয় (পরে এ বিষয়ে আরও)

পরিবর্তনগুলি দেখতে কেমন তা এখানে।

ছবির জন্য বুলেট পয়েন্ট অদলবদল

উপরে তালিকাভুক্ত শৈলীতে, আপনি একটি বিকল্প হিসাবে 'কোনটিই নয়' দেখে অবাক হতে পারেন। কেন আপনি শুধুমাত্র বুলেট লুকানোর জন্য একটি বুলেট তালিকা অন্তর্ভুক্ত করতে চান?

আপনি ভাল সম্পর্কে শিখতে হবে কিভাবে ওয়ার্ডপ্রেসে টেক্সট ইন্ডেন্ট করা যায় .

নো স্টাইলিং এর বিকল্প হল আপনি যখন এর পরিবর্তে একটি ব্যাকগ্রাউন্ড ইমেজ প্রদর্শন করতে চান তখন এটিকে কী হিসাবে সেট করতে হবে।

বুলেটের জন্য ব্যবহার করার জন্য চিত্রগুলির আকার 16 পিক্সেল বাই 16 পিক্সেল বা 20 পিক্সেল বাই 20 পিক্সেল সবচেয়ে ভাল কাজ করে। যেকোনো বড়, আপনাকে সঠিকভাবে পাঠ্য-সারিবদ্ধ করতে লাইনের ব্যবধান বাড়াতে হবে।

একটি বুলেট হিসাবে একটি ছবি ব্যবহার করতে, এটি প্রথমে আপনার ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরিতে আপলোড করুন, তারপর ছবির URLটি অনুলিপি করুন৷

নীচের স্ক্রিনশটে, আইকনটির আকার 20 x 20 করা হয়েছে৷

ব্যবহার করার জন্য কোড হল

.entry-content ul li {
list-style-image:url(http:www.yoursite.com/wp-uploads/image-title.png);
}

আপলোড করার আগে প্রথমে আপনার ছবির আকার পরিবর্তন করতে ভুলবেন না। অন্যথায়, ছবিটি সঙ্কুচিত করতে আপনাকে আরও CSS কোড যোগ করতে হবে এবং এটি দুর্দান্ত মানের হবে না।

ইউনিকোড অক্ষর ব্যবহার করে ছবি উপেক্ষা করা

ইউনিকোড অক্ষর ইমোজির মত। হাজার হাজার অক্ষর আছে এবং সবগুলোই হাস্যোজ্জ্বল মুখ নয়।

প্রেমের হৃদয় থেকে এমন বিকল্প রয়েছে যা আপনার প্রিয় কম-কার্ব খাবারের বুলেটযুক্ত তালিকা তৈরি করতে ব্যবহার করা যেতে পারে বা যা করতে হবে না তার বুলেটযুক্ত তালিকা তৈরি করতে ক্রস।

সেগুলি খুঁজে পেতে, 'ইউনিকোড অক্ষর' এর জন্য ওয়েবে অনুসন্ধান করুন৷ তাদের লাইব্রেরি বজায় রাখার জন্য নিবেদিত সাইট আছে. কিছু কুলুঙ্গি ডিরেক্টরি মত হয়.

এগুলি ব্যবহার করার জন্য, আপনার কোডিংয়ের প্রয়োজন নেই কারণ অক্ষরগুলি সরাসরি ওয়ার্ডপ্রেস থিম কাস্টমাইজারে কপি এবং পেস্ট করা যেতে পারে।

কোডটিকে দুটি ভাগে বিভক্ত করতে হবে যাতে চিত্রের অক্ষরগুলি দেখানোর জন্য একটি 'আগে' বিভাগ থাকে এবং চিত্রের অক্ষর এবং পাঠ্য অক্ষরের মধ্যে কিছু ব্যবধান থাকে৷

বুলেট তালিকা পরিবর্তন করতে CSS ইনপুট করে শুরু করুন:

.entry-content ul li {
list-style-type: none;
}

তারপর তালিকা আইটেম আগে অক্ষর যোগ করার জন্য একটি নতুন বিভাগ যোগ করুন.

.entry-content ul li:before {
content: "♥";
padding-right: 10px;
color: red;
}

ফলাফল এই মত হওয়া উচিত:

ইউনিকোড অক্ষরের প্রকারের উপর নির্ভর করে, কিছু রঙ পরিবর্তন করতে পারে। উপরের উদাহরণে, রঙ লাল হওয়ার আগে হৃদয়ের অক্ষরটি কালো ছিল।

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

ওয়ার্ডপ্রেসে বুলেট পয়েন্টের রঙ কীভাবে পরিবর্তন করা যায় সে সম্পর্কিত প্রায়শই জিজ্ঞাসিত প্রশ্ন

থিম সম্পাদনা করা বা বুলেট পয়েন্ট স্টাইল করতে WP কাস্টমাইজার ব্যবহার করা কি ভাল?

WP থিম আপডেটগুলি ফাইল টেমপ্লেটগুলিতে আপনার করা সম্পাদনাগুলি বাতিল করতে পারে৷ থিম কাস্টমাইজার পরিবর্তন বজায় রাখে। মনে রাখবেন শুধুমাত্র চাইল্ড থিম এডিট করা উচিত। মূল থিম নয়। প্রতিটি আপডেটের পরে, পরিবর্তনগুলি পুনরুদ্ধার করতে স্টাইলশীট আপডেট করতে হবে। WP কাস্টমাইজারে পরিবর্তন WP আপডেটের সাথে করা হয়।

আপনি বুলেট তালিকার আইটেমগুলির রঙ পরিবর্তন করতে পারেন এবং একটি ভিন্ন পাঠ্য রঙ থাকতে পারেন?

আপনি যখন সিএসএস-এ তালিকা আইটেমগুলির জন্য রঙের কোড সেট করেন, তখন এটি সমস্ত তালিকা আইটেমগুলিতে প্রযোজ্য হয় যাতে শুধুমাত্র একটি রঙ প্রয়োগ করা যায়। তালিকা-স্টাইল-টাইপ ব্যবহার করে: কোনোটিই নয়; উপাদান, ইমেজ যোগ করা যেতে পারে, তারপর একক রঙ টেক্সট প্রযোজ্য হবে. এটি করার ফলে আপনি ইমেজের যেকোনো রঙ এবং তালিকা আইটেমগুলির জন্য একটি কাস্টম ফন্ট রঙ ব্যবহার করতে পারবেন।