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

अपने एडिटर ऐड-ऑन को 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 में कुछ विज़ुअल आर्टफ़ैक्ट दिखाते हैं. हालांकि, वे अब भी ठीक से काम कर रहे हैं. यह देखने के लिए कि किसी ब्राउज़र में स्टाइल कैसी दिखती हैं, बस इस पेज को उस ब्राउज़र में लोड करें.

टाइपाेग्राफ़ी

इस्तेमाल के हिसाब से नीचे दी गई स्टाइल में, सभी टेक्स्ट के लिए एरियल फ़ॉन्ट इस्तेमाल करें:

इस्तेमाल और दिखने का तरीका सीएसएस पैकेज के साथ मार्कअप 
<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>