G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

Styles

The Style panel lets you customize the look and feel of your app. You can set themes, choose between widget variants, and even create your own styles.

Global Style: style multiple widgets at once

Set an app-wide style with themes

The theme selector at the top of the Styles tab controls the default appearance of widgets in your app. App Maker currently has two themes:

  • Material: A theme that implements Material Design, the standard Google visual style. Use this theme to build apps that look like Google favorites like Inbox or Keep.

  • Plain: A simpler theme that provides a generic look and feel. Build on to the plain theme to develop your own unique visual style.

Customize widgets with CSS

If you want to tweak Material widgets or spruce up the Plain theme, you can customize widgets by writing your own Cascading Style Sheets, or CSS.

App Maker widgets and their sub-components have built-in CSS classes with app- as a prefix, followed by their names. To change widgets' appearance, add your own CSS to these classes using the text area below the theme selector. Example:

/* Adds rounded corners to button widgets */
.app-Button {
  border-radius: 10px;
}

/* Sets font size for rows in list panels */
.app-ListPanelRow {
  font-size: 1.2em;
}

You can also use the full range of CSS selectors to style your app:

/* Turns off link underlines. */
.app-Link:link {
  text-decoration: none;
}

/* Changes color of disabled buttons. */
.app-Button[disabled] {
  background-image: none;
  background-color: white;
}

Widget Style: style a single widget

Widget themes

Use the theme picker to easily apply styles to widgets. Select a widget and choose from a list of themes in the drop-down in the action bar.

Theme picker

The Material theme comes with multiple variants for most widgets. For example, panel widgets have a Paper variant that looks like a piece of white paper, a Transparent variant that shows widgets below the panel, and many more.

Widget-specific CSS

The Style tab has a text area to enter custom CSS, so you can tweak a selected widget's style to your exact specifications. Widget styles also have the prefix .app- followed by then name of the page the widget is located on then the name of the widget itself. When the widget is selected it shows up at the top of the auto-complete popup.

Examples:

/* Changes color of SampleButton1 to yellow */
.app-NewPage-SampleButton1 {
  background-image: none;
  background-color: yellow;
}

/* Sets font in SampleListPanel1's rows to bold */
.app-NewPage-SampleListPanel1Row {
  font-weight: bold;
}

Custom variants

App Maker also lets you create your own variants. To make a variant, use the CSS section of the Styles tab, and create a class with a name in the format app-[WidgetType]--[VariantName]. Example:

.app-Button--RedButton {
  background-image: none;
  background-color: red;
}

Once you've created an appropriately-named class, your variant appears in the Variant drop-down in the action bar when that widget is selected.

Extra styles with the styles property

You can add styles to widgets outside the Style panel using the styles property under Display in the Property Editor. Define a class under Style, and add it to the property. Styles assigned this way don't need the usual app- prefix. Example:

.specialSubmitButton {
  background-image: none;
  background-color: red;
}