আপনার থিম কাস্টমাইজ করুন (মূল সংস্করণ)

আপনি Apigee Edge-এর ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন .info- তে যান।

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

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

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

থিম এডিটর অ্যাক্সেস করুন

থিম এডিটরে আপনার পোর্টালের জন্য থিমটি কাস্টমাইজ, প্রিভিউ এবং পাবলিশ করুন। থিম এডিটর খোলার জন্য, উপরের নেভিগেশন বারের ড্রপ-ডাউন মেনু থেকে 'Theme' নির্বাচন করুন।

পূর্ববর্তী চিত্রে যেমনটি তুলে ধরা হয়েছে, থিম এডিটর আপনাকে নিম্নলিখিত কাজগুলো করতে সক্ষম করে:

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

কাস্টম স্টাইল যোগ করুন

স্টাইল এডিটর প্যানে আপনার নিজস্ব CSS কোড যোগ করে থিমটি কাস্টমাইজ করুন। সকল CSS স্টাইল এলিমেন্ট সমর্থিত।

আপনার থিম কাস্টমাইজ করতে:

1. উপরের নেভিগেশন বারে থাকা ড্রপ-ডাউন মেনু থেকে থিম নির্বাচন করুন।
2. পেজের ডানদিকে থাকা স্টাইল এডিটর প্যানে আপনার নিজস্ব CSS কোড যোগ করুন।
3. প্রিভিউ প্যানে আপনার পরিবর্তনগুলো দেখতে 'রিলোড দ্য প্রিভিউ'- তে ক্লিক করুন।
   দ্রষ্টব্য : আপনি আপনার পোর্টাল নেভিগেশনের মাধ্যমে ক্লিক করে সমস্ত পৃষ্ঠার বিষয়বস্তু প্রিভিউ করতে পারেন।
4. আপনার থিমের পরিবর্তনগুলো প্রকাশ করতে পাবলিশ-এ ক্লিক করুন।
5. আপডেটটি নিশ্চিত করতে পাবলিশ-এ ক্লিক করুন।

আপনার লোগো কাস্টমাইজ করুন

'আপনার লোগো' ছবিটি আপনার কোম্পানির লোগো দিয়ে কাস্টমাইজ করুন। ফাইল ম্যানেজারে থাকা নিম্নলিখিত ইমেজ ফাইলগুলিকে একই নাম এবং সংশ্লিষ্ট ফাইলের আকার ব্যবহার করে আপনার লোগো আপলোড করে প্রতিস্থাপন করুন:

• logo.png (১৪০ পিক্সেল × ৪০ পিক্সেল)
• mobile-logo.png (১৪০ পিক্সেল × ৪০ পিক্সেল)

এছাড়াও, প্রয়োজন অনুযায়ী CSS স্টাইল শীটের নিম্নলিখিত বিষয়বস্তু পরিবর্তন করুন:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}


.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

আরও তথ্যের জন্য, আপনার সম্পদ ব্যবস্থাপনা দেখুন।

হোম পেজের ব্যাকগ্রাউন্ড ইমেজ কাস্টমাইজ করুন

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

• ব্যাকগ্রাউন্ড ইমেজ ফাইল এবং এর অবস্থান পরিবর্তন করুন।
  আপনি portal-hero.jpg ইমেজটির নিজস্ব সংস্করণ একই নাম এবং আপেক্ষিক ফাইলের আকার (১৪৪০ পিক্সেল x ৫৪০ পিক্সেল) ব্যবহার করে ফাইল ম্যানেজারে আপলোড করতে পারেন। যদি আপনি একটি ভিন্ন ফাইলের নাম ব্যবহার করতে চান, তাহলে নিচের CSS-এ background-image ভ্যালুটি অবশ্যই এডিট করে নেবেন।

  /* ==== Jumbotron ====
  a billboard for drawing attention, from Bootstrap  */
  
  home-page-jumbotron-bg {
      background-image: url('/files/portal-hero.jpg');
  }

• ব্যাকগ্রাউন্ড ইমেজের উপরে থাকা টেক্সটের ফরম্যাট পরিবর্তন করুন।

  .jumbotron {
   text-align: center;
   height: 500px;
   background-size: cover;
   margin: -50px -30px 0 -30px;
   border-radius: 0;
  }
  
  .jumbotron h1 {
   font-size: 40px;
   font-weight: 400;
  }
  
  .jumbotron h2 {
   font-size: 25px;
   font-weight: 400;
  }
  
  .jumbotron a, .jumbotron a:hover {
   font-size: 18px;
  }
  
  .jumbotron p {
   max-width: none;
  }

CSS স্পেসিফিসিটি নিয়মগুলো বুঝুন

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

উদাহরণস্বরূপ, যদি আপনি আপনার CSS কোডে নিম্নলিখিত স্টাইল এলিমেন্টগুলো সংজ্ঞায়িত করেন, তাহলে প্যারাগ্রাফ এলিমেন্টটি লাল রঙে চিহ্নিত হবে, কারণ একটি div এলিমেন্টের ভেতরের p স্টাইল এলিমেন্টের ঘোষণাটি p স্টাইল এলিমেন্টের ঘোষণার চেয়ে বেশি সুনির্দিষ্ট।

div p { color: red }  ← More specific  
p { color: blue }

একইভাবে, যদি আপনি আপনার CSS কোডে নিম্নলিখিত স্টাইল এলিমেন্ট ডিক্লারেশনগুলো সংজ্ঞায়িত করেন, তাহলে <div class="test"></div> ট্যাগের মধ্যে থাকা যেকোনো টেক্সট নীল রঙে রঙিন হবে, কারণ একটি div এলিমেন্টের ভেতরের id অ্যাট্রিবিউটের স্টাইল ডিক্লারেশন, div স্টাইল এলিমেন্টের ডিক্লারেশনের চেয়ে বেশি সুনির্দিষ্ট।

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

একই স্পেসিফিসিটি সম্পন্ন স্টাইল এলিমেন্ট ডিক্লারেশনগুলোর ক্ষেত্রে, সর্বশেষ সংজ্ঞায়িত স্টাইল এলিমেন্ট ডিক্লারেশনটি অগ্রাধিকার পাবে। উদাহরণস্বরূপ, নিম্নলিখিত স্টাইল এলিমেন্ট ডিক্লারেশনগুলোর ক্রম অনুসারে, প্যারাগ্রাফ এলিমেন্টটি নীল রঙে রঙিন হবে।

p { color: red }  
p { color: blue }  ← Last specified

আপনার থিম প্রকাশ করুন

আপনার যোগ করা থিম এবং স্টাইল কাস্টমাইজেশনগুলো লাইভ পোর্টালে প্রকাশ করতে:

1. উপরের নেভিগেশন মেনুতে থাকা ড্রপ-ডাউন মেনু থেকে থিম নির্বাচন করুন।
2. প্রকাশ করুন-এ ক্লিক করুন।

লাইভ পোর্টালে আপনার প্রকাশিত কন্টেন্ট দেখতে, উপরের নেভিগেশন বারে থাকা ‘লাইভ পোর্টাল’- এ ক্লিক করুন।