আপনার থিম কাস্টমাইজ করা (অরিজিনাল ভার্সন)

আপনি Apigee Edge ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন দেখুন। তথ্য

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

স্যাম্পেল পোর্টালের সাথে প্রদান করা ডিফল্ট স্টাইলের বেশিরভাগই Bootstrap-এর উপর ভিত্তি করে তৈরি। নিচের বিভাগে যেভাবে বর্ণনা করা হয়েছে, সেইভাবে আপনি থিম কাস্টমাইজ, প্রিভিউ ও প্রকাশ করতে পারবেন।

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

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

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

থিম এডিটর

আগের ছবিতে হাইলাইট করা অংশ থেকে বোঝা যায় যে থিম এডিটর আপনাকে এগুলি করতে দেয়:

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

স্টাইল এডিটর প্যানে আপনার নিজস্ব 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 স্টাইল শিটে নিম্নলিখিত কন্টেন্ট পরিবর্তন করে হোম পেজের ব্যাকগ্রাউন্ড ছবি কাস্টমাইজ করুন।

  • ব্যাকগ্রাউন্ড ইমেজ ফাইল ও সেটির প্লেসমেন্ট পরিবর্তন করুন।
    আপনি ফাইল ম্যানেজারে একই নাম ও আপেক্ষিক ফাইল সাইজ (১৪৪০ পিক্সেল x ৫৪০ পিক্সেল) ব্যবহার করে portal-hero.jpg ছবির নিজস্ব ভার্সন আপলোড করতে পারবেন। আপনি অন্য কোনও ফাইলের নাম ব্যবহার করতে চাইলে, নিচে দেওয়া 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 বাছাইকারী যত নির্দিষ্ট হবে, তার ওজন তত বেশি হবে। যেমন, কোনও আইডি অ্যাট্রিবিউটকে টাইপ সিলেক্টরের তুলনায় গণনা করার সময় বেশি গুরুত্ব দেওয়া হবে।

যেমন, আপনার 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. প্রকাশ করুন বিকল্পে ক্লিক করুন।

লাইভ পোর্টালে আপনার প্রকাশিত কন্টেন্ট দেখতে, সবচেয়ে উপরে নেভিগেশন বারে লাইভ পোর্টাল বিকল্পে ক্লিক করুন।