পুরো স্টোরে বা একটি সেকশনে কীভাবে নিজের CSS যোগ করব?

CSS আপনার স্টোরের লুক বদলায়: রং, ব্যবধান, সাইজ ও আরও অনেক কিছু। বিল্ডার-এ দুই জায়গায় নিজের CSS যোগ করতে পারেন: পুরো স্টোরের জন্য, বা শুধু একটি সেকশনের জন্য।

পুরো স্টোরের জন্য কাস্টম CSS

গিয়ার আইকনে ক্লিক করে কাস্টম CSS ট্যাব খুলুন। বক্সটির নাম CSS কোড: পুরো স্টোরে প্রযোজ্য। আপনি যে মার্কেট এডিট করছেন তার প্রতিটি পেজে আপনার CSS লোড হয়, আর প্রিভিউ ফলাফল দেখায়।

যে নিয়ম সবখানে প্রযোজ্য হতে হবে তার জন্য এটি ব্যবহার করুন, যেমন সব পেজে একটি এলিমেন্ট লুকানো বা প্রতিটি বাটনের স্টাইল বদলানো। যেমন, h1 { text-transform: uppercase; } প্রতিটি পেজের প্রধান শিরোনাম বড় হাতের অক্ষরে লেখে।

একটি সেকশনের জন্য কাস্টম CSS

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

এটি বেশি নিরাপদ পছন্দ। Storeep আপনার প্রতিটি সিলেক্টরের আগে সেকশনটি যোগ করে, তাই আপনার নিয়ম এর বাইরের কিছু বদলাতে পারে না।

• h2 { letter-spacing: 2px; } শুধু এই সেকশনের ভেতরের শিরোনাম বদলায়।
• সেকশনটিকেই স্টাইল করতে & ব্যবহার করুন: & { border-top: 1px solid #000; }।
• @media নিয়ম কাজ করে। এর ভেতরের নিয়মগুলোও সেকশনের মধ্যেই সীমিত থাকে।
• @keyframes অ্যানিমেশন আপনি যেভাবে লিখেছেন সেভাবেই থাকে।

সেকশনের CSS সেই পেজের সেই সেকশনের। সেকশনটি তার CSS সহ আপনার অন্য যে পেজগুলোতে এটি আছে সেগুলোতে কপি করতে সেকশনে সব পেজে প্রয়োগ করুন ব্যবহার করুন। দেখুন সব পেজে প্রয়োগ করুন।

কোনটি ব্যবহার করবেন

• একটি সেকশন ভুল দেখাচ্ছে: সেকশনের কাস্টম CSS ব্যবহার করুন।
• একই পরিবর্তন সবখানে দরকার: কাস্টম CSS সেটিংস ট্যাব ব্যবহার করুন।
• CSS লেখার আগে দেখে নিন কোনো সেটিং আগে থেকেই কাজটি করে কিনা: রং আছে কালার স্কিম-এ, ফন্ট ফন্ট সেটিংস-এ, আর কোণ ও শ্যাডো আসে আপনার থিম থেকে।

আপনার CSS কাজ না করলে

• কোনো } বা ; বাদ পড়েছে কিনা দেখুন। একটি ভুল তার পরের নিয়মগুলো থামিয়ে দিতে পারে।
• আপনার নিয়ম থিমের নিয়মের চেয়ে দুর্বল হতে পারে। সিলেক্টরটি আরও নির্দিষ্ট করুন।
• সেকশনের CSS-এ সিলেক্টর body বা html দিয়ে শুরু করবেন না। এগুলো সেকশনের বাইরে, তাই নিয়মটি মিলবে না।
• পেজ ভাঙা দেখালে শেষ পরিবর্তনটি সরিয়ে প্রকাশ করুন, তারপর একটি একটি করে নিয়ম আবার যোগ করুন।

জেনে রাখুন

• কাস্টম CSS যে মার্কেট এডিট করছেন সেই মার্কেটের। যে মার্কেটে দরকার প্রতিটিতে আবার যোগ করুন।
• থিম বদলালে ক্লাসের নাম ও লেআউট বদলে যেতে পারে, তাই থিম বদলানোর পর আপনার কাস্টম CSS দেখে নিন।
• প্রকাশ করুন-এ ক্লিক করলে পরিবর্তনগুলো লাইভ হয়।
• পেজের ভেতরে HTML ও কোডের জন্য দেখুন কাস্টম কোড।