Lesson Topics
app builder
Custom styles for apps
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 you 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:
