app builder

Custom styles for apps

Updated: September 13, 2021

You have a lot of control over the look & feel of your apps.

Pre-built styles

In the app builder, under the Settings > Styles tab, you can select from three different pre-built styles or edit individual user-interface elements (e.g. button color): 

HTML elements

Add HTML elements to any page block. In these elements you can write HTML (hypertext markup language) and CSS (cascading style sheets). Together, these two languages allow you to create a fantastic amount of custom user-interface components:

Learn just enough HTML and CSS to make your own UI components.

How do you add icons? 

Using an HTML element, you can add any icon from Font Awesome v4.7. How it works:

  • Add an HTML element
  • Find an icon you like from this Font Awesome list
  • Copy and paste the code for that icon into your HTML element:

Example HTML / CSS

Duplicate this Afterpattern app to see example HTML and CSS, ready for your to copy and paste into your app.

Custom CSS

If you have a Business subscription, you can upload your own .css file to an app:

A custom .css file allows you to change almost anything about the styles of your app (you can't change any functionality; CSS is purely for editing colors, typography, etc.). Here is an example "dark mode" .css file:

Frequently Asked Questions

Don't see your question? Get support.
No items found.

On this page

Hire an Afterpattern expert

Go from idea to launch in weeks.

View services