Knowledge Base — Theme

Path: Centers → Products → Knowledge Base → Theme · URL: /knowledge-base?tab=theme

What this page does

The Theme tab controls how your public KB portal looks — the name, the logo, the favicon, and (optionally) custom CSS overrides for full visual branding. If your KB is on a custom domain (per Knowledge Base — Domains), this is what makes the portal feel like your product instead of a generic Wazzi page.

Levels of branding

Level	What it gets you
Just the name	Your portal header says "Acme Help" instead of "Knowledge Base". 30 seconds of work.
Name + logo + favicon	Visually unmistakable — your logo in the header, your favicon in browser tabs. ~5 minutes.
Custom CSS overrides	Match your brand exactly — typography, color palette, spacing. 30 minutes if you have a brand guide.

Most teams stop at level 2; level 3 is for orgs with strong brand standards.

Steps

1. Open the KB page → Theme tab.

2. Set the basic branding.

• Name — what shows in the portal's header. Defaults to Knowledge Base. Use your product name (e.g., Acme Help) or a phrase (Acme Customer Support).
• Logo — upload a PNG, JPG, or SVG (max 2 MB). SVG is best — scales cleanly on all displays. Aim for ~200×60 pixels of visible content; the portal will fit it into the header height automatically.
• Favicon — upload a PNG, JPG, SVG, or ICO (max 512 KB). Use a square aspect ratio at 64×64 or 128×128.

3. (Advanced) Override CSS variables.

Scroll down to the Custom Theme CSS section. The editor accepts a CSS snippet that overrides Wazzi's default CSS variables — colors, spacing, fonts.

Click Load defaults at the top of the editor to start from Wazzi's baseline variables, then tweak. The variables you'll most often override:

:root {
  --kb-primary: #6d28d9;       /* Your brand primary (CTAs, links) */
  --kb-primary-hover: #5b21b6; /* Hover variant */
  --kb-bg: #ffffff;            /* Page background */
  --kb-text: #111827;          /* Body text */
  --kb-muted: #6b7280;         /* Secondary text */
  --kb-border: #e5e7eb;        /* Card borders, dividers */
  --kb-font-body: 'Inter', system-ui, sans-serif;
  --kb-font-heading: 'Inter', system-ui, sans-serif;
}

Click Save Theme Settings at the bottom to commit. Changes take effect immediately on the public portal — refresh to see them.

Troubleshooting

• My logo looks blurry. PNG / JPG below ~400px tall will look soft on retina displays. Switch to SVG, or upload a 2x version.
• Custom CSS not applying. Two common causes: (a) Save Theme Settings wasn't clicked. (b) The CSS specificity isn't high enough — Wazzi's defaults may have specificity that beats your override. Use :root for variable overrides; for explicit element overrides, ensure you're targeting the right selector.
• Theme looks great in dev but looks broken on customer browsers. Likely browser-cached CSS. Add a unique query string to force a refresh, or wait 5 minutes for the CDN to expire.

Best practices

• Match your primary product, not a microsite. If your customers know you as "Acme" they should land on a "Help — Acme" page, not "Acme Customer Knowledge Center."
• Test on mobile and dark mode. Wazzi's KB respects prefers-color-scheme; tweak both light and dark variables if your brand has both.
• Don't override layout-level CSS. Stick to colors, fonts, and spacing. If you start moving elements around with CSS, future Wazzi UI updates may shift things underneath you.

Frequently asked questions

Can I have different themes for different portals?
No — theme is per-KB, not per-portal. All portals share the theme.

Can I include external font files?
Yes — @import from Google Fonts or another CDN works. Be aware of performance impact.

How do I revert to defaults?
Click Load defaults in the CSS editor and save. Or just empty the CSS field and save — empty = use the Wazzi default theme.

What's next

• Set up the URL: Knowledge Base — Domains.
• Decide who sees the portal: Knowledge Base — Portals.