Editor के ऐड-ऑन के लिए सीएसएस पैकेज

अपने एडिटर ऐड-ऑन को Google Sheets, Docs, Slides या Forms जैसा बनाने के लिए, नीचे दिए गए सीएसएस पैकेज को लिंक करें. इससे फ़ॉन्ट, बटन, और फ़ॉर्म एलिमेंट पर Google स्टाइल लागू हो जाएगी. इस्तेमाल किए जा रहे सीएसएस पैकेज का सैंपल देखने के लिए, Docs ऐड-ऑन के बारे में कम शब्दों में जानकारी देखें. सीएसएस पैकेज का इस्तेमाल करने के लिए, हर एचटीएमएल फ़ाइल में सबसे ऊपर ये शामिल करें:

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

ध्यान दें कि सभी ब्राउज़र में, फ़ॉर्म एलिमेंट के स्टाइल को पूरी तरह से कंट्रोल नहीं किया जा सकता. खास तौर पर, <select> एलिमेंट Firefox और Internet Explorer में कुछ विज़ुअल आर्टफ़ैक्ट दिखाते हैं. हालांकि, वे अब भी सही तरीके से काम करते हैं. किसी ब्राउज़र में स्टाइल कैसी दिखती हैं, यह देखने के लिए उस ब्राउज़र में यह पेज लोड करें.

मुद्रण कला

सभी टेक्स्ट के लिए Arial फ़ॉन्ट का इस्तेमाल करें. इसके लिए, इस्तेमाल के हिसाब से इन स्टाइल का इस्तेमाल करें:

इस्तेमाल और दिखावट सीएसएस पैकेज के साथ मार्कअप 
<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"> जैसे किसी भी स्टैंडर्ड बटन का इस्तेमाल किया जा सकता है. बटन, जो हॉरिज़ॉन्टल तौर पर एक-दूसरे के बगल में होते हैं वे अपने-आप स्पेस ले लेते हैं. अलग-अलग कामों के लिए, कई रंग उपलब्ध हैं:

इस्तेमाल करें थीम सीएसएस पैकेज के साथ मार्कअप
मुख्य कार्रवाई 
<button class="action">Translate</button>
सेकंडरी ऐक्शन 
<button>Close</button>
कार्रवाई बनाना 
<button class="create">Create</button>
शेयर करने की कार्रवाई 
<button class="share">Share</button>

चेकबॉक्स

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<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>

रेडियो बटन

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<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>

मेन्यू चुनना

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<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>

टेक्स्ट क्षेत्र

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

टेक्स्ट फ़ील्ड

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<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 Docs के ऐड-ऑन के लिए क्विकस्टार्ट से साइडबार की आसान कॉपी दी गई है. अगर कॉन्टेंट को साइडबार से ज़्यादा ऊंचा बनाने के लिए, टेक्स्ट एरिया के सबसे नीचे दाएं कोने को खींचा और छोड़ा जाता है, तो कॉन्टेंट एरिया अपने-आप स्क्रोल हो जाता है. हालांकि, सबसे नीचे मौजूद ब्रैंडिंग नहीं स्क्रोल होती.

इस उदाहरण में, सही पैडिंग लागू करने के लिए sidebar क्लास और ब्रैंडिंग एरिया को सबसे नीचे ले जाने के लिए bottom क्लास का इस्तेमाल किया गया है. इसके बाद, एक लोकल क्लास, branding-below, उस जगह को तय करती है जहां साइडबार का मुख्य हिस्सा सबसे नीचे से शुरू होना चाहिए.

उदाहरण सीएसएस पैकेज के साथ मार्कअप 
<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>