To help your Editor Add-on
look and feel like Google Sheets, Docs, Slides, or Forms, link in the CSS
package below to apply Google styling to fonts, buttons, and form elements.
For a sample of the CSS package in use, see the Docs add-on quickstart
.
To use the
CSS package, just include the following at the top of each HTML file:
< link
rel
=
" stylesheet
"
href
=
" https
://
ssl
.
gstatic
.
com
/
docs
/
script
/
css
/
add-ons1
.
css
">
Note that the style for form elements cannot be completely controlled in all
browsers. In particular, <select>
elements display some visual artifacts in
Firefox and Internet Explorer, although they still work properly. To see what
the styles look like in a given browser, simply load this page in that browser.
Typography
Use Arial font for all text, in the following styles depending on use:
| Use and appearance |
Markup with CSS package |
< 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
>
|
You can use any of the standard types of buttons— <button>
, <input type="button">
, or <input type="submit">
, as well as <a class="button">
. Buttons that are horizontally adjacent space
themselves out automatically. There are several colors available, for various
uses:
Use
Appearance
Markup with CSS package
Primary action
< button
class
=
"action"
> Translate
< /
button
>
Secondary action(s)
< button>Close
< /
button
>
Create action
< button
class
=
"create"
> Create
< /
button
>
Share action
< button
class
=
"share"
> Share
< /
button
>
Checkboxes
| Example |
Markup with CSS package |
< 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
>
|
| Example |
Markup with CSS package |
< 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
>
|
| Example |
Markup with CSS package |
< 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
>
|
Text areas
| Example |
Markup with CSS package |
< div
class
=
"form-group"
>
< label
for
=
"sampleTextArea"
> Label
< /
label
>
< textarea
id
=
"sampleTextArea"
rows
=
"3"
>< /
textarea
>
< /
div
>
|
Text fields
| Example |
Markup with CSS package |
< 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
>
|
Sidebars can be tricky to style because while the height is variable, many
add-ons need to include a branding area that does not scroll.
Below is a simplified copy of the sidebar from the Google Docs add-on quickstart
.
If you drag the bottom-right corner of the text area to make the content taller
than the sidebar, the content area automatically scrolls but the branding at
the bottom does not.
The example uses the sidebar
class to apply the correct padding and the bottom
class to force the branding area to the bottom. A local class, branding-below
, then defines the area that the main area of the sidebar should
leave clear from the bottom.
| Example |
Markup with CSS package |
< style
> .
branding-below
{
bottom
:
56
px
;
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
>
|
