Branding & Appearance

Customise your company logo, portal name, accent colour, and footer text in Opterius Commerce.

Admin → Settings → Branding

The Branding screen controls how Commerce looks to your clients. Changes take effect immediately — no build step or cache clear required.

Available Fields

Field	Description
Company Logo	Image file (PNG/SVG recommended, max 2 MB). Shown in the portal navigation bar and on invoice PDFs.
Portal Name	The name shown in the browser tab and portal `<title>`. Defaults to company name if left blank.
Primary / Accent Colour	Hex value (e.g. `#6366f1`). Applied as the CSS variable `--pa` across the entire client portal.
Portal Footer Text	Short HTML or plain-text block shown in the client portal footer (below nav links).

Uploading a Logo

Click Choose File next to the logo field.
Select a PNG, JPG, or SVG. PNG or SVG with a transparent background works best on light and dark headers.
Click Save. The logo is stored in storage/app/public/branding/ and served via the /storage symlink.

[!TIP] Use an SVG logo if possible. It scales cleanly on retina displays and in invoice PDFs without pixelation.

Accent Colour

The accent colour is stored as the branding_accent_color setting and injected as a CSS custom property on every portal page:

<style>
  :root { --pa: #6366f1; }
</style>

Tailwind utility classes in the portal theme reference --pa via color-mix() to derive hover, disabled, and ring states:

/* Example — primary button background */
background-color: var(--pa);

/* Hover — 10% darker */
background-color: color-mix(in srgb, var(--pa) 90%, black);

This means changing the hex value here recolours all buttons, links, active nav items, and focus rings without touching any CSS file.

[!IMPORTANT] The accent colour applies to the client portal only. The admin panel uses a fixed indigo theme that does not change.

Portal Name

The portal name appears in:

Browser <title> tags (e.g. "My Hosting — Dashboard")
The <meta name="application-name"> tag
The top-left of the portal navigation bar (alongside the logo)

Portal Footer Text

The footer text field accepts plain text or basic HTML. Keep it short — one or two lines is typical:

&copy; 2026 My Hosting Ltd. All rights reserved.

This text appears below the auto-generated nav links and company contact details. For full control over the footer, see Portal Builder.

Branding & Appearance