Customizing Colors and CSS

To change the colors in your app, visit the Colors tab of the App Customizer.

Modify the color of each item and see it live in your app preview.

Remember, these colors will not show up in your live app until you click “Go Live.”

Custom CSS

Below the color pickers, you will see a custom CSS box. This allows you to make fine-grained changes to your app using custom code.

This area is recommended only for experienced web developers. You can use a browser inspector such as Chrome Dev Tools to see the CSS classes you’d like to change, then see those update live in the preview as you write your code.

Note: When writing your custom CSS, it’s recommended to avoid using any class names ending in -md (item-md for example). Classes ending in -md only appear in the final Android app and not the iOS app.

Targeting Specific Pages

Each page type has a specific HTML element you can use.

For example, to only target post list pages, you can use the selector “post-list.” That would look like this:

post-list .item { background: black; }

(Notice there is no period or hash before the page name)

Other page selectors are: media-list, download-list, post-details, wordpress-page, page-login-modal, language-settings, push-settings, and media-player.