এডিটর অ্যাড-অনগুলির জন্য CSS প্যাকেজ

আপনার এডিটর অ্যাড-অনকে Google পত্রক, ডক্স, স্লাইড বা ফর্মের মতো দেখতে এবং অনুভব করতে সাহায্য করতে, ফন্ট, বোতাম এবং ফর্ম উপাদানগুলিতে Google স্টাইলিং প্রয়োগ করতে নীচের CSS প্যাকেজে লিঙ্ক করুন৷ ব্যবহৃত CSS প্যাকেজের নমুনার জন্য, ডক্স অ্যাড-অন কুইকস্টার্ট দেখুন। CSS প্যাকেজ ব্যবহার করতে, প্রতিটি HTML ফাইলের শীর্ষে শুধুমাত্র নিম্নলিখিতগুলি অন্তর্ভুক্ত করুন:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

মনে রাখবেন যে সমস্ত ব্রাউজারে ফর্ম উপাদানগুলির শৈলী সম্পূর্ণরূপে নিয়ন্ত্রিত করা যায় না। বিশেষ করে, <select> উপাদানগুলি Firefox এবং Internet Explorer-এ কিছু ভিজ্যুয়াল আর্টিফ্যাক্ট প্রদর্শন করে, যদিও তারা এখনও সঠিকভাবে কাজ করে। একটি প্রদত্ত ব্রাউজারে শৈলীগুলি কেমন দেখায় তা দেখতে, কেবলমাত্র সেই ব্রাউজারে এই পৃষ্ঠাটি লোড করুন৷

টাইপোগ্রাফি

ব্যবহারের উপর নির্ভর করে নিম্নলিখিত শৈলীতে, সমস্ত পাঠ্যের জন্য এরিয়াল ফন্ট ব্যবহার করুন:

ব্যবহার এবং চেহারা CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

বোতাম

আপনি যেকোনো মানক ধরনের বোতাম ব্যবহার করতে পারেন— <button> , <input type="button"> , অথবা <input type="submit"> , সেইসাথে <a class="button"> । যে বোতামগুলি অনুভূমিকভাবে সংলগ্ন স্থান স্বয়ংক্রিয়ভাবে আউট হয়ে যায়। বিভিন্ন ব্যবহারের জন্য বিভিন্ন রং পাওয়া যায়:

ব্যবহার করুন চেহারা CSS প্যাকেজ দিয়ে মার্কআপ করুন
প্রাথমিক কর্ম 
<button class="action">Translate</button>
সেকেন্ডারি ক্রিয়া(গুলি)
<button>Close</button>
কর্ম তৈরি করুন
<button class="create">Create</button>
কর্ম শেয়ার করুন
<button class="share">Share</button>

চেকবক্স

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

রেডিওর বোতামগুলি

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

মেনু নির্বাচন করুন

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

পাঠ্য অঞ্চল

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

পাঠ্য ক্ষেত্র

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

সাইডবারগুলি স্টাইল করা কঠিন হতে পারে কারণ উচ্চতা পরিবর্তনশীল হলেও, অনেক অ্যাড-অনগুলির একটি ব্র্যান্ডিং এলাকা অন্তর্ভুক্ত করতে হবে যা স্ক্রোল করে না। নীচে Google ডক্স অ্যাড-অন কুইকস্টার্ট থেকে সাইডবারের একটি সরলীকৃত অনুলিপি রয়েছে। আপনি সাইডবারের থেকে বিষয়বস্তুকে লম্বা করতে পাঠ্য এলাকার নীচে-ডানদিকে টেনে আনলে, বিষয়বস্তু এলাকাটি স্বয়ংক্রিয়ভাবে স্ক্রোল হবে কিন্তু নীচের অংশে ব্র্যান্ডিং হবে না।

উদাহরণটি সঠিক প্যাডিং প্রয়োগ করতে sidebar ক্লাস এবং ব্র্যান্ডিং এরিয়াকে নীচের দিকে জোর করতে bottom শ্রেণী ব্যবহার করে। একটি স্থানীয় শ্রেণী, branding-below , তারপর সেই ক্ষেত্রটিকে সংজ্ঞায়িত করে যে সাইডবারের প্রধান ক্ষেত্রটি নীচে থেকে পরিষ্কার হওয়া উচিত।

উদাহরণ CSS প্যাকেজ দিয়ে মার্কআপ করুন 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>