Skip to main content
This guide walks through the brand customisation settings available under Admin → Settings → Branding. Changes apply immediately across the entire platform for all users.

​
Brand colour

Your primary brand colour drives the look of the sidebar, buttons, links, active states, and accent elements throughout the interface. Use the interactive preview below to see the effect in real time.

​
Try it — interactive sidebar preview

Pick a colour or enter a hex value to see how the sidebar header, navigation highlights, and action buttons adapt to your brand.

​
Setting your brand colour

1

Open branding settings

Navigate to Admin → Settings → Branding. The Brand Colours card is in the second section.
2

Choose a primary colour

Click the colour swatch or enter a hex value (e.g. #3B82F6). The picker updates in real time so you can preview before saving.
3

Optionally set a secondary colour

The secondary colour is used for subtle backgrounds and muted accents. If you leave it blank, the default grey is used.
4

Save changes

Select Save Settings. The new colour is applied across the platform immediately — no restart required.
Choose a colour with enough contrast against white text. PropOps automatically calculates whether to use black or white text on top of your brand colour based on luminance.
Your logo appears in the sidebar header, login page, and generated documents.

​
Supported formats

1

Open branding settings

Go to Admin → Settings → Branding and scroll to the Brand Assets section.
2

Upload or set a path

Either drag and drop your logo file into the upload area, or enter a relative path to a logo already on the server (e.g. assets/images/my-logo.svg).
3

Check the preview

The preview panel shows how the logo renders. The logo is displayed using a CSS mask technique — it appears as a solid black shape in light mode and inverts to white in dark mode.
4

Save

Select Save Settings. The logo updates across the platform immediately.
The logo height is capped at 40px and max width at 160px by default. These limits are configurable via environment variables NAV_LOGO_HEIGHT and NAV_LOGO_MAX_WIDTH.
For best results, use a flat, single-colour vector logo in .svg format. The sidebar renders your logo using a CSS mask technique, so gradients, shadows, and photographic elements will not display correctly. A simple black SVG on a transparent background works perfectly — PropOps automatically inverts it for dark backgrounds.

​
Company identity

Set these under the Company Identity card in the branding settings page.

​
Favicons and app icons

PropOps Web supports full PWA installation. Upload the following icons to ensure a polished experience across all devices:
If you skip the PWA icons, users who install the app to their home screen will see a generic placeholder icon.

​
Social sharing images

When someone shares a link to your PropOps instance, these images appear in the link preview card:
  • Social Thumbnail — used as the default Open Graph image.
  • OG Image — overrides the thumbnail for Facebook, LinkedIn, and other platforms.
  • Twitter Image — used specifically for Twitter/X card previews.
Upload these under the Social section of the branding page. Recommended dimensions are 1200×630px.

​
Login page

​
Slideshow images

The login page can display a carousel of images alongside the login form:
  1. Go to Admin → Settings → Branding.
  2. Scroll to Login Slideshow Images.
  3. Upload or add paths for each slide image.
  4. Drag to reorder. The first image is shown by default.

​
Background

A custom background image can be set for the login page. This appears behind the login form and slideshow panel.