Customizing Web Flow Appearance

Web Flow resources which can be customized are available in the ext-resources folder:

https://github.com/lime-company/powerauth-webflow-customization/tree/master/ext-resources

Overriding Web Flow resources

The general process of updating Web Flow resources:

• Clone project powerauth-webflow-customization from GitHub.
• (Optional) Create a separate GitHub repository based on powerauth-webflow-customization project for storing your resources customizations.
• Update Web Flow resources by overriding existing texts, CSS, fonts and images or by adding additional resources.
• (Optional) Commit and push changes to your Web Flow customizations GitHub repository, in case you created it in the previous step.
• When deploying Web Flow, configure the following Spring boot property (currently present in application.properties):

powerauth.webflow.page.ext-resources.location=classpath:/static/resources/

There are many possible ways how to override Spring boot properties, see: https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-external-config.htm

The following example configures path to the application.properties file for Tomcat.

1. Configure variable spring.config.location in Context configuration file [path_to_your_tomcat]/conf/Catalina/[host]/[path_in_URL].xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>
    <Environment name="spring.config.location" value="/path/to/your/application.properties" type="java.lang.String"/>
</Context>

2. Update the path for ext-resources in application.properties reflecting your deployment:

powerauth.webflow.page.ext-resources.location=file:/path/to/your/ext-resources

See documentation for configuration of environment properties of your container in case you don't use Tomcat.

Customizing Web Flow texts

Web Flow texts are stored in ext-resources/message_[lang].properties files, see:

• ext-resources/messages_en.properties

• ext-resources/messages_cs.properties

After you make a copy of the powerauth-webflow-customization project, you can update the texts and deploy changes to the folder /path/to/your/ext-resources.

Customizing Web Flow CSS styles

Web Flow CSS files are stored in ext-resources/css folder, see:

• ext-resources/css/main.css

After you make a copy of the powerauth-webflow-customization project, you can update the CSS and deploy changes to the folder /path/to/your/ext-resources/css.

Customizing Web Flow images

Web Flow images are stored in ext-resources/images folder, see:

• ext-resources/images

After you make a copy of the powerauth-webflow-customization project, you can update the images and deploy changes to the folder /path/to/your/ext-resources/css.

You can also add new images and configure these images in overriden CSS files.

Customizing Web Flow fonts

Additional fonts for Web Flow can be stored in ext-resources/fonts folder (currently not available in the customization project - standard HTML fonts are used in Web Flow).

After you make a copy of the powerauth-webflow-customization project, you can add new fonts to the folder /path/to/your/ext-resources/fonts and update the CSS to use the added fonts in Web Flow.