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

FormatRecommendedNotes
SVGYesScales perfectly at any size, smallest file size
PNGYesUse a transparent background for best results
WebPSupportedGood quality-to-size ratio
JPEGSupportedAvoid — no transparency support
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

SettingWhere it appears
App NameBrowser tab title, email headers, PWA install prompt
Short NamePWA home screen icon label, compact UI areas
DescriptionMeta description, PWA manifest
Set these under the Company Identity card in the branding settings page.

​
Favicons and app icons

PropOps supports full PWA installation. Upload the following icons to ensure a polished experience across all devices:
IconSizePurpose
favicon.ico48×48Browser tab icon
favicon-96x96.png96×96High-DPI browser tab
apple-touch-icon.png180×180iOS home screen
manifest-192.png192×192Android home screen
manifest-512.png512×512Android splash screen
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.