Custom CSS

Add custom CSS to your app on the Design tab of your app customizer.

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.

Ionic Tags and Custom Properties

AppPresser uses Ionic 5. If you want to style Ionic tags such as ion-button, ion-card, etc. you may need to use custom properties.

For example, the ion-button tag has the custom properties of --background, --color, and more. You can see all of them in the Ionic docs. To change the background or color, you would use this CSS:

my-selector ion-button { --background: #000; --color: #fff; }

Notice that you do not use background: #000, you must use the custom property --background or it will not work.

Custom properties are not required for all tags, only Ionic tags.

To look up custom properties, visit the Ionic component documentation, click the component you want, and click CSS custom properties.

Targeting Specific Pages

Each Custom Page has a specific class you can use.

To find it, go to your app customizer, click Custom Pages, then click on your page. Scroll down until you see this box: