Home-theater-designers![স্টাইলিশ [ফায়ারফক্স এবং ক্রোম] এর সাহায্যে ওয়েবে ক্ষুদ্র ক্ষোভগুলি কীভাবে ঠিক করবেন](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
ওয়েব ডিজাইনারদের কাজ প্রায় অসম্ভব। তাদের এমন একটি নকশা নিয়ে আসা দরকার যা সবাইকে খুশি করে। জিমেইলের মতো একটি পরিষেবা সম্পর্কে কথা বলার সময়, সারা বিশ্বের অগণিত লক্ষ লক্ষ মানুষ ব্যবহার করে, আপনি সত্যিই 'প্রায়' অংশটি ফেলে দিতে পারেন - এটি কেবল অসম্ভব। এমনকি যদি একটি পুনesনির্মাণ বেশিরভাগ লোকের দ্বারা ভালভাবে পছন্দ করা হয়, তবে সর্বদা এমন ব্যবহারকারী থাকবে যারা সত্যিই নতুন চেহারা পছন্দ করে না।
কখনও কখনও এই ব্যবহারকারীদের পর্যাপ্ত পরিমাণে একটি কোম্পানীকে পিছনে যেতে বাধ্য করে, যেমন গুগল সম্প্রতি জিমেইল আইকন বোতামগুলির সাথে করেছে। কিন্তু যদি আপনার কাছে কিছু থাকে সত্যিই ঘৃণা, এবং কোম্পানি এটা ফিরে পরিবর্তন না? আপনি কি চিরকাল এর সাথে আটকে আছেন? ব্যবহারকারীর শৈলীর জন্য ধন্যবাদ, আপনি নিজেরাই এই ধরনের সমস্যাগুলি সমাধান করতে পারেন।
স্টাইলিশ পরিচয় করিয়ে দিচ্ছি
স্টাইলিশ একটি বিনামূল্যে অ্যাড-অন উভয়ের জন্য উপলব্ধ ফায়ারফক্স এবং ক্রোম , এবং এটি আপনাকে বেশ জাদুকরী কিছু করতে দেয় - ওয়েবপেজের উপাদানগুলিতে আপনার নিজস্ব শৈলী প্রয়োগ করুন। এমনকি যদি আপনি ওয়েব ডেভেলপার না হন এবং আপনি আপনার জীবনে কখনও একটু CSS লিখেননি, এটি শোনার চেয়ে অনেক সহজ। আপনি ওয়েবসাইটগুলিকে সম্পূর্ণরূপে রূপান্তর করতে স্টাইলিশ ব্যবহার করতে পারেন (যেমন আমি আপনাকে পরবর্তী বিভাগে দেখাব), তবে আরও গুরুত্বপূর্ণ, আপনি কয়েক মিনিটের মধ্যে ছোটখাটো বিরক্তি ঠিক করতে স্টাইলিশ ব্যবহার করতে পারেন।
উদাহরণস্বরূপ, আমার জিমেইলে ডিফল্ট ফন্ট সাইজের সমস্যা ছিল। ইন্টারফেসটি ঠিক ছিল - আমি আমার ব্রাউজারের সাথে (Ctrl +) জুম করতে চাইনি, কারণ এটি সমস্ত ইন্টারফেস উপাদানগুলির আকার বৃদ্ধি করবে এবং সত্যিই কুৎসিত হবে। আমি শুধু বার্তা ফন্ট একটু বড় করার একটি উপায় চেয়েছিলাম।
স্টাইলিশের সাথে, এটি সত্যিই সহজ ছিল, এবং আমি আপনাকে দেখাব কিভাবে। তবে আমরা আপনার নিজের ব্যবহারকারীর স্টাইল তৈরির দিকে নজর দেওয়ার আগে, আসুন অন্য লোকের কাজের সুবিধা নেওয়ার বিষয়ে কথা বলি।
UserStyles.org
যদি আপনার স্নায়ুতে কিছু ুকতে থাকে, তাহলে এটা সম্পূর্ণ সম্ভব যে আপনি একা নন। UserStyles.org একটি ওয়েবসাইট যা ব্যবহারকারীদের তাদের তৈরি করা স্টাইল শেয়ার করতে দেয়। উপরে আপনি একটি শৈলী দেখতে পারেন ( টুলবার আইকনগুলিতে লেবেল যুক্ত করুন জিমেইল আইকন বোতাম সম্বন্ধে আমাদের গল্পের উত্তরে MakeUseOf মন্তব্যকারী RandyN দ্বারা প্রস্তাবিত। এই স্টাইলটি আপনাকে আইকনগুলি রাখতে দেয়, কিন্তু টেক্সট লেবেলে যোগ করে - এমন কিছু যা Google আপনাকে করতে দেয় না।
UserStyles.org দারুণ, কিন্তু এটি নিখুঁত নয়। কিছু ডিজাইন খুব বেশি করার চেষ্টা করে (সম্পূর্ণরূপে একটি ওয়েবসাইটের চেহারা পরিবর্তন করে), এবং কিছু ওয়েবসাইটের পুরানো সংস্করণের জন্য এবং এখন ভেঙে গেছে। আপনি যদি ছোট কিছু ঠিক করার চেষ্টা করেন এবং UserStyles.org এ খুঁজে না পান, তাহলে সম্ভবত আপনার সেরা পদক্ষেপটি এটি নিজেই করা।
আপনার নিজের সহজ ব্যবহারকারীর স্টাইল তৈরি করা
আপনার নিজস্ব ব্যবহারকারীর শৈলী তৈরি করতে, আপনাকে প্রথমে জানতে হবে যে পৃষ্ঠার কোন উপাদানটি আপনি পরিবর্তন করার চেষ্টা করছেন এবং তারপর আপনি কোন পরিবর্তন করতে চান। সুতরাং, শুরু করতে, আপনি যা পরিবর্তন করতে চান তা ডান ক্লিক করুন এবং বাছুন এলিমেন্ট পরিদর্শন করুন । আপনি এই মত কিছু দেখতে হবে:
ফায়ারফক্স বাকি পৃষ্ঠাকে অন্ধকার করে, এবং আপনার নির্বাচিত উপাদানটির চারপাশে একটি খুব স্পষ্ট ফ্রেম আঁকে। সেই উপাদানটির উপরে, যে পাঠ্যটি বলে div#2d6.ii.gt.adP.adO , সিএসএস ক্লাসের একটি গুচ্ছ, একটি আইডি সহ (যে অংশটি #দিয়ে শুরু হয়)। এই নির্বাচকই এই উপাদানটির স্টাইলিংকে প্রভাবিত করে। স্ক্রিনের নীচে একটি ন্যাভিগেশন বার রয়েছে যা আপনাকে ' DOM গাছ অতিক্রম করুন ', অথবা সহজ কথায়, উপাদানগুলির শ্রেণিবিন্যাসে উপরে এবং নিচে যান যা আপনার বাছাই করা উপাদানটির দিকে নিয়ে যায়।
এখানে খেলাটির নাম হল আপনি যে উপাদানটি স্টাইল করতে চান তা বেছে নিন এবং নির্বাচনকে এত সংকীর্ণ না করুন যে এটি আপনি যা প্রভাবিত করতে চান তা প্রভাবিত করবে না, বা এত বিস্তৃত নয় যে এটি অন্যান্য জিনিসগুলিকে গোলমাল করবে।
আমি একটি উপাদান উচ্চতর ক্লিক করেছি, div.gs , কারণ আমি এর নাম পছন্দ করি (মনে হচ্ছে এমন কিছু যা খুব শীঘ্রই পরিবর্তন হবে না, কিন্তু এটি আমার পক্ষ থেকে একটি সম্পূর্ণ অনুমান)। এটি পুরো বার্তা এলাকা প্রভাবিত করে। একবার আপনি স্টাইল করতে চান এমন এলাকা নির্বাচন করা হলে, ক্লিক করুন স্টাইল বোতামটি নীচে-ডানদিকে, খুলতে নিয়ম রুটি:
আমি জানি, এটি প্রথমে ভীতিকর। কিন্তু এখানেই আপনি বিভিন্ন সিএসএস নিয়ম দেখেন যা আপনার নির্বাচিত উপাদানটিকে প্রভাবিত করে এবং এখানেই আপনি নিজের অস্থায়ী পরিবর্তন করতে পারেন এবং রিয়েল-টাইমে পৃষ্ঠায় তাদের প্রভাবগুলি পুনরায় লোড না করে দেখতে পারেন। কিন্তু আপনার কি পরিবর্তন করা উচিত? ক্লিক করুন বৈশিষ্ট্য বোতাম এবং আনচেক করুন শুধুমাত্র ব্যবহারকারীর স্টাইল :
এখানে আপনি একটি সম্পূর্ণ তালিকা দেখতে পারেন সব CSS এর নিয়ম। আপনি তালিকাটি স্ক্রোল করতে পারেন যতক্ষণ না আপনি এমন একটি নিয়ম খুঁজে পান যা আপনার প্রয়োজনীয়তার জন্য বোধগম্য হয় (আমাদের ক্ষেত্রে ফন্ট-সাইজ), এবং এমনকি একটি ব্যাখ্যা পৃষ্ঠা খুলতে তার পাশে থাকা প্রশ্ন চিহ্নটি ক্লিক করুন। সুতরাং, এখন আমরা জানি যে আমরা সমস্ত ডিভ উপাদানগুলির জন্য ফন্ট-আকারের সম্পত্তি পরিবর্তন করতে চাই যার একটি শ্রেণী আছে gs '(শর্টহ্যান্ডে লেখা div.gs )।
একমাত্র প্রশ্ন থেকে যায় যে আমরা এর মান কি হতে চাই। তার জন্য, আমরা রুলস প্যানেলে ফিরে যাই এবং চারপাশে খেলা শুরু করি:
40 পিক্সেল একটু পাগল হতে পারে, কিন্তু আপনি সাধারণ ধারণা পান। এর সাথে খেলুন, এবং অন্য কোন বৈশিষ্ট্য যুক্ত করতে বিনা দ্বিধায় থাকুন, যতক্ষণ না আপনি যে চেহারাটি দেখতে যাচ্ছেন। পৃষ্ঠাটি বন্ধ করতে ভুলবেন না, কারণ আপনার পরিবর্তনগুলি না যে কোন জায়গায় সংরক্ষিত।
আপনার নতুন স্টাইল সংরক্ষণ করা হচ্ছে
একবার আপনি সাইটের এই অংশটি আপনার পছন্দ মতো দেখতে পেয়ে গেলে, এটি সংরক্ষণ করার সময় এসেছে। ক্লিক করুন স্টাইলিশ অ্যাড-অন বারে আইকন, এবং নির্বাচন করুন নতুন স্টাইল লিখুন । স্টাইলিশ তখন জানতে চাইবে কোন পেজে নতুন স্টাইল প্রয়োগ করা উচিত - আমাদের ক্ষেত্রে, দ্বিতীয় বিকল্পটি বেছে নিন, mail.google.com । পরবর্তী, আপনি এই ডায়ালগটি দেখতে পাবেন:
আমি ইতিমধ্যে এটি পূরণ করেছি। স্পষ্টতই, আমি শৈলীর জন্য একটি নাম এবং কিছু ট্যাগ বাছাই করেছি। কিন্তু আসল জিনিস কোডের মধ্যেই ঘটে: লাইন 3 আগে থেকেই ছিল - স্টাইলিশ এটিকে এমন জায়গায় রেখেছে যাতে স্টাইলটি কোন পৃষ্ঠায় প্রযোজ্য তা জানে। কিন্তু লাইন 5-7 আমার। আসুন তাদের বিশ্লেষণ করি:
লাইন 5: div.gs { - এই অংশটি আপনার চিনতে হবে। এই উপাদানটি আমরা স্টাইল করার সিদ্ধান্ত নিয়েছি। খোলার বন্ধনী মানে আমরা এখন কিছু CSS নিয়ম লিখতে যাচ্ছি। লাইন 6: ফন্ট সাইজ: 20px! গুরুত্বপূর্ণ; -যে নিয়ম আমরা পরিবর্তন করতে চাই ফন্টের আকার ভিন্ন কিছু। লাইন 7:} - স্টাইল সংজ্ঞা বন্ধ করা।
পরবর্তীতে, প্রিভিউতে ক্লিক করুন এবং আপনার কাজে বিস্মিত হোন:
এবং অবশেষে, একবার আপনি দেখতে পান যে এটি কাজ করছে, ক্লিক করুন সংরক্ষণ.
এটি একটি সম্পূর্ণ নির্দেশিকা নয়
আমি ভালভাবেই জানি যে এই সংক্ষিপ্ত টিউটোরিয়ালটিকে একক পোস্টের সীমার মধ্যে রাখতে, আমাকে অনেকগুলো লাফিয়ে লাফিয়ে লাফাতে হয়েছে। যদি আপনি পথের মধ্যে বিভ্রান্ত হন, দয়া করে আমার ক্ষমা গ্রহণ করুন। সিএসএস প্রথমে চতুর, কিন্তু একবার আপনি এটির ঝুলি পেয়ে গেলে এটি এত জটিল নয় - এবং স্থানীয়ভাবে ওয়েবসাইটগুলি কাস্টমাইজ করা শেখার অন্যতম সেরা উপায়।
আপনি যদি কিছু দ্বারা বিভ্রান্ত হন, দয়া করে আমাকে নীচে জিজ্ঞাসা করুন এবং আমি সাহায্য করার জন্য যথাসাধ্য চেষ্টা করব।
টেলিগ্রামে কীভাবে স্টিকার যুক্ত করবেনশেয়ার করুন শেয়ার করুন টুইট ইমেইল আপনার ভার্চুয়ালবক্স লিনাক্স মেশিনগুলিকে সুপারচার্জ করার 5 টি টিপস
ভার্চুয়াল মেশিন দ্বারা দেওয়া খারাপ পারফরম্যান্সে ক্লান্ত? আপনার ভার্চুয়ালবক্সের কর্মক্ষমতা বাড়ানোর জন্য আপনার যা করা উচিত তা এখানে।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- ব্রাউজার
- ওয়েব ডেভেলপমেন্ট
- ওয়েবমাস্টার টুলস
- মোজিলা ফায়ারফক্স
- গুগল ক্রম
- ওয়েব ডিজাইন
আমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন