Para mejorar el aspecto de tu complemento de editor como Hojas de cálculo, Documentos, Presentaciones o Formularios de Google, vincula el siguiente paquete de CSS para aplicar el estilo de Google a las fuentes, los botones y los elementos de los formularios.
Para ver una muestra del paquete CSS en uso, consulta la guía de inicio rápido sobre el complemento de Documentos.
Para usar el paquete de CSS, incluye lo siguiente en la parte superior de cada archivo HTML:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
Ten en cuenta que el estilo de los elementos del formulario no se puede controlar por completo en todos los navegadores. En particular, los elementos <select>
muestran algunos artefactos visuales en Internet Explorer y Firefox, aunque aún funcionan correctamente. Para ver cómo lucen los estilos en un navegador determinado, simplemente carga esta página en ese navegador.
Tipografía
Usa la fuente Arial para todo el texto, en los siguientes estilos según el uso:
Uso y apariencia |
Lenguaje de marcado con paquete de 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> |
Puedes usar cualquiera de los tipos de botones estándar: <button>
, <input type="button">
o <input type="submit">
, así como <a class="button">
. Los botones que se ubican horizontalmente adyacentes al espacio en sí mismos salen automáticamente. Hay varios colores disponibles para distintos usos:
Usar |
Diseño |
Lenguaje de marcado con paquete de CSS |
Acción principal |
|
<button class="action">Translate</button> |
Acción(es) secundaria(s) |
<button>Close</button> |
Crear acción |
<button class="create">Create</button> |
Compartir acción |
<button class="share">Share</button> |
Casillas de verificación
Ejemplo |
Lenguaje de marcado con paquete de 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> |
Ejemplo |
Lenguaje de marcado con paquete de 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> |
Ejemplo |
Lenguaje de marcado con paquete de 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> |
Áreas de texto
Ejemplo |
Lenguaje de marcado con paquete de CSS |
|
<div class="form-group">
<label for="sampleTextArea">Label</label>
<textarea id="sampleTextArea" rows="3"></textarea>
</div> |
Campos de texto
Ejemplo |
Lenguaje de marcado con paquete de 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> |
Las barras laterales pueden ser difíciles de diseñar porque, si bien la altura es variable, muchos complementos deben incluir un área de desarrollo de la marca que no se desplace.
A continuación, se muestra una copia simplificada de la barra lateral de la guía de inicio rápido sobre el complemento de Documentos de Google.
Si arrastras la esquina inferior derecha del área de texto para que el contenido sea más alto que la barra lateral, el área de contenido se desplazará automáticamente, pero la marca de la parte inferior no.
En el ejemplo, se usa la clase sidebar
para aplicar el padding correcto y la clase bottom
para forzar el área de desarrollo de la marca a la parte inferior. Luego, una clase local, branding-below
, define el área que el área principal de la barra lateral debe dejar sin efecto desde la parte inferior.
Ejemplo |
Lenguaje de marcado con paquete de 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> |