Customize the solution UI#

This section describes how to customize the visual identity of your solution’s user interface by replacing the default placeholder assets.

Logo#

The solution template includes a placeholder logo displayed in the top-left corner of the navigation bar.

Property	Value
Default filename	`placeholder_logo_white.png`
Recommended size	676 × 76 pixels (displayed at 36 pixels height)
Location	`<solution_root>/src/<organization_name>/<solution_module_name>/ui/assets/logos/`

To replace the logo:

Prepare a PNG image with a transparent background.
Place it in the logos/ directory shown above.
If the filename differs from the default, update the reference in page.py:
```
html.Img(src=dash.get_asset_url("logos/placeholder_logo_white.png"), height="36px")
```
Replace placeholder_logo_white.png with the new filename.

Note

The logo is rendered at 36 pixels height regardless of the original image dimensions.

The solution template includes a placeholder workflow image displayed on the About page.

Property	Value
Default filename	`workflow-placeholder.png`
Recommended size	1280 × 320 pixels
Location	`<solution_root>/src/<organization_name>/<solution_module_name>/ui/assets/images/`

To replace the workflow illustration:

Prepare a PNG image.
Place it in the images/ directory shown above.
If the filename differs from the default, update the reference in about_page.py:
```
dbc.CardImg(src=dash.get_asset_url("images/workflow-placeholder.png"))
```
Replace workflow-placeholder.png with the new filename.