Standard Text Styling

Overview

Standard Text Styling lets you define up to five reusable text-style presets for the AppNavi Avatar editor. These presets help keep Route and Pin content consistent with your organization's design guidelines.

For example, you can define a standard font, bold headings, or a specific text color. Once the presets are configured in the application's Custom CSS, content authors can select them in the Avatar editor when formatting text.

Who should complete this setup?

This task is intended for:

Application administrator or CSS developer: Adds the style definitions to the application's Custom CSS.
Content author: Uses the configured presets to format Route and Pin content in the Avatar editor.

Before you start

Make sure you have:

Access to the AppNavi Portal.
Permission to edit the target application's configuration.
Access to the application's Custom CSS section.
Agreement on the standard styles your organization wants to use, such as font family, heading weight, or text color.

Important: The presets are configured through CSS at the application level. Defining the CSS classes is required before content authors can use the corresponding styles in the Avatar editor.

Step 1: Open the application configuration

Sign in to the AppNavi Portal.
Open the application you want to configure.
Locate the Custom CSS section.
Prepare the CSS definitions for the five supported style classes.

Use the application where you intend to author and display the Route and Pin content.

Step 2: Define the five style presets

AppNavi supports up to five custom style presets. Each preset must use the exact class name shown below.

Add the following CSS to the application's Custom CSS section and adjust the style properties to match your organization's design guidelines.

.an-custom-style-1 {
  font-family: Arial;
}

.an-custom-style-2 {
  font-family: Arial;
  font-weight: bold;
}

.an-custom-style-3 {
  font-family: Arial;
  font-weight: bolder;
}

.an-custom-style-4 {
  font-family: Arial;
  background-color: transparent;
}

.an-custom-style-5 {
  color: grey;
}

The example above uses the styles from the original documentation. You can change the CSS properties to suit your requirements, while retaining the required class names.

Understand the presets

CSS class	Example purpose
`.an-custom-style-1`	Standard font
`.an-custom-style-2`	Standard font with bold text
`.an-custom-style-3`	Standard font with heavier text
`.an-custom-style-4`	Standard font with a transparent background
`.an-custom-style-5`	Grey text

Each class corresponds to a separate custom-style option in the Avatar editor.

Step 3: Save the application configuration

Save the application configuration after adding the CSS, following the save workflow provided by the Portal.

Expected result: The application's Custom CSS contains the five correctly named style classes.

If your application configuration has a validation or save confirmation, make sure the change is accepted before testing the presets.

Step 4: Test the presets in the Avatar editor

Open the Avatar editor for content associated with the configured application.
Open an existing Route or Pin for editing, or create a test item.
Select a portion of text in the editor.
Open the text-style options.
Check whether the custom style presets are available.
Apply each preset to sample text and inspect the result.
Verify that the text reflects the intended font, weight, color, or background styling.

Expected result: The configured presets are available in the Avatar editor and apply their corresponding CSS styling to selected text.

If a preset is unavailable or does not look as expected, verify the class names, CSS syntax, and application configuration. Also confirm that you are testing content associated with the application where the CSS was configured.

Step 5: Use the presets when creating content

Once the styles have been verified, content authors can use them when creating or editing Route and Pin content.

Recommended practices:

Use consistent presets for headings and body text.
Apply the same preset for the same purpose across related content.
Test the content in the target application before publishing.
Review changes to the application's Custom CSS if a preset's appearance changes unexpectedly.

Troubleshooting

Issue	What to check
Custom styles are not available in the Avatar editor	Confirm that the CSS classes have been added to the correct application's Custom CSS.
A preset does not apply the expected style	Check that the class name matches the required name exactly and that the CSS is valid.
Text looks different from the intended design	Review the CSS properties and test the result in the target application.
Only some presets work	Verify that all intended classes are defined and that each has valid CSS declarations.