Custom Branding — End-User Help

Overview

The CustomBranding.aspx page allows administrators to customise the look and messaging used on candidate/reference forms and emails.

Use this screen to set banner and button colours, toggle the business logo and position, and edit the default email text sent to referees. Changes are previewed live and saved to the system.

Quick start (1–2 minutes)

1. Edit colours using the colour pickers or enter a hex value into the adjacent boxes (format #RRGGBB).
2. Toggle Show Business Logo and choose position (Left / Middle / Right) if you want the logo shown on forms.
3. Edit the default reference email in TxtMsgReference if needed — keep placeholder tokens intact (see Tokens).
4. Click Save Branding (BtnSave) to persist changes; use Reset to Defaults (BtnResetDefaults) to revert.

Page layout & important controls

Colour controls (two-way bound)

• PickBannerBg + TxtBannerBg — Form top banner background colour (required)
• PickBannerText + TxtBannerText — Banner text colour (required)
• PickBtnMain + TxtBtnMain — Primary button colour (required)
• PickBtnHover + TxtBtnHover — Primary button hover colour (required)

Behaviour:

• Picking a colour updates the text input
• Typing a valid hex into the text input updates the picker
• Live preview updates immediately

Messages

• TxtMsgReference — Default email message sent to referees (multi-line). MaxLength=4000
• TxtMsgCandidate — Default email message to candidate (present in markup but currently hidden in the UI)

Logo display

• ChkShow — Checkbox to show business logo on forms
• RblShowPosition — Radio choices for logo position (Left / Middle / Right). Enabled when ChkShow is checked.

Server-side handler: ChkShow_CheckedChanged

Actions

• BtnSave — Save Branding (BtnSave_Click)
• BtnResetDefaults — Reset to Defaults (BtnResetDefaults_Click)

Feedback

• ErrorPanel / LabelErrorMessage — server validation or save errors
• saveToast — slide-in toast (ARIA polite) shows success notifications

Tokens (placeholders) — do not remove

Use these tokens in email templates where shown. Leave them intact so the system can substitute values:

• {{CandidateName}}
• {{ReferenceName}}
• {{Position}}
• {{CompanyName}}

Field details, constraints & behaviour

• Hex colour format: #RRGGBB (7 characters including the leading #)

Examples: #2c3e50, #FFFFFF, #3498db

• Text inputs have MaxLength:
• TxtBannerBg, TxtBannerText, TxtBtnMain, TxtBtnHover — MaxLength=7
• TxtMsgReference / TxtMsgCandidate — MaxLength=4000
• JavaScript normalization:
• when you type a value into a hex textbox the page normalizes it to include a leading # (if missing)
• if the value matches ^#[0-9A-Fa-f]{6}$ it updates the color picker
• Live preview:
• updatePreview() applies banner background, banner text colour, button background and hover color
• hover is implemented via onmouseenter / onmouseleave
• TxtMsgCandidate block is rendered with display: none in the markup

Live preview specifics

The preview area is the .preview-wrap block:

• Banner element: #PreviewBanner — shows banner background and text colour updates
• Button: #PreviewBtn — shows button colour and hover behaviour

Preview updates immediately as you change picker/text fields — no need to save to view style changes.

Note: preview is a client-side representation only. Some layout differences may occur on different devices or real email clients.

Saving and reset behaviour

• Click BtnSave to persist branding to the server. On success you will see the toast and the saved values will be used by the application.
• Click BtnResetDefaults to restore server defaults. It replaces current values and updates the preview.
• If save fails server-side, ErrorPanel displays an explanatory message; correct the issue and retry.

Validation & common errors

• Invalid hex format: If you type an invalid hex (wrong length or characters), the picker will not update and the preview may not render that colour. Use #RRGGBB.
• Missing required colours: server-side validation may reject blank values.
• Token removal: If you remove or corrupt tokens like {{ReferenceName}} the email will not be populated correctly — restore the token.
• If RblShowPosition stays disabled, ensure ChkShow is checked and that the postback occurred.

Browser & accessibility notes

• Colour inputs (<input type="color">) require a modern browser (Chrome/Edge/Firefox/Safari). Older browsers may show plain inputs — verify hex values then.
• The toast uses aria-live="polite" so screen readers announce success.
• All inputs have labels and ToolTip attributes; tab order follows document flow.
• Email rendering varies by client — test in your target email clients.

Examples and recommended values

Professional (green theme)

• Banner: #1f7a1f
• Banner text: #FFFFFF
• Button: #28a745
• Button hover: #218838

Neutral (blue theme)

• Banner: #2c3e50
• Banner text: #FFFFFF
• Button: #3498db
• Button hover: #2980b9

Step-by-step tasks

Change banner colour

1. Click PickBannerBg and choose a new colour — or type #RRGGBB into TxtBannerBg
2. Watch #PreviewBanner update immediately

Change button hover colour

1. Use PickBtnHover or type hex into TxtBtnHover
2. Hover on Primary Button in preview to confirm effect

Show logo

1. Check ChkShow (server enables RblShowPosition)
2. Select a position and Save Branding

Edit reference email

1. Edit TxtMsgReference (keep tokens intact)
2. Save to persist changes

Troubleshooting

Preview does not update

• Confirm JavaScript is enabled and no script blockers are active.
• Check browser console for JS errors (updatePreview() / bindColorPair() run on load).

Pickers not visible/usable

• Some browsers render type="color" differently; use the hex textbox and ensure it includes #.

Save fails with server error

• Read ErrorPanel message. Common reasons: invalid hex, missing required field, server-side validation issues.
• Provide the exact error text to support if needed.

Tokens not substituted in emails

• Ensure tokens remain exactly like {{TokenName}} and templates are not disabled.

Administration & server notes (for power users)

• Server handlers:
• BtnSave_Click — persists branding
• BtnResetDefaults_Click — restores defaults
• ChkShow_CheckedChanged — toggles RblShowPosition availability (postback)
• LiteralBrandVars may emit server-generated variables for client scripts (read-only)
• Branding affects candidate/reference forms and reference emails across the system.

Support — what to provide when asking for help

Provide:

• steps you took and which control you edited
• the hex values used and any example message text (copy/paste)
• any error text in ErrorPanel
• browser name/version and whether extensions (ad-blockers/script blockers) are enabled

Short FAQ

Q: Can I preview email rendering?

A: Preview shows form colours and button hover. For real email rendering, send a test via your workflow — email clients differ.

Q: What happens when I Reset to Defaults?

A: The server restores the default colours and messages; the preview updates immediately.

Q: Are tokens required in messages?

A: Tokens are not mandatory, but strongly recommended so the email is personalised. Do not alter token syntax.