Customise the WHMCS client area theme (Twenty-One) safely

The client area is where your customers pay invoices, open tickets and log in to cPanel, so it should look like your website. WHMCS's default theme, Twenty-One, is built on Bootstrap and supports child themes, which let you change the look without losing your work on every WHMCS update.

Before you start

• FTP or File Manager access to the WHMCS folder.
• Basic HTML and CSS knowledge; Smarty templates use {$variable} syntax.
• A staging copy of WHMCS is ideal for testing template changes.

Never edit the default theme directly

Files in templates/twenty-one/ are overwritten by WHMCS updates. Always work in a child theme or in custom files that WHMCS leaves alone.

Create a child theme

1. Create a folder templates/mybrand/.
2. Create templates/mybrand/theme.yaml with:

name: "My Brand"
parent: twenty-one

3. Go to Configuration → System Settings → General Settings → General and set Template to My Brand.

The child theme uses every template from Twenty-One unless you copy a file into mybrand and change it there.

Add your logo

Set Logo URL in General Settings, or upload a logo under Configuration → System Settings → Brand (in newer versions). The header picks it up automatically.

Change colours and styles

Create templates/mybrand/css/custom.css. Twenty-One loads it after its own styles, so your rules win. Example:

:root { --primary: #0b5fff; } .btn-primary { background-color: #0b5fff; border-color: #0b5fff; }

Use your browser's inspector to find the class of any element you want to restyle.

Edit a template

1. Copy the file from templates/twenty-one/ to the same path in templates/mybrand/, for example footer.tpl.
2. Edit the copy – add footer links, a trust badge or your company address.
3. Clear the template cache: Utilities → System → System Cleanup → Empty Template Cache.

After each WHMCS update, compare your copied files with the new originals for important changes.

Change menus with hooks

Navigation and sidebars are built in PHP, so change them with hooks instead of templates. Create includes/hooks/menu.php and use the ClientAreaPrimaryNavbar hook to add, rename or remove items (for example adding a "Guides" link to your knowledge base). Hooks survive updates.

Order form and other pages

• The cart uses its own template set in templates/orderforms/standard_cart/. Create a child order form folder the same way and select it in General Settings → Ordering.
• Change wording through language overrides in lang/overrides/english.php instead of editing templates – for example $_LANG['clientareanavservices'] = 'My Hosting';.

Troubleshooting

• Changes not visible: empty the template cache and your browser cache.
• Blank page after editing: a Smarty syntax error. Enable Display Errors under Utilities → System → General Settings → Other briefly, or restore the original file.
• Layout broken after an update: a copied template is outdated. Re-copy it from Twenty-One and reapply your changes.

Next steps

• Brand your WHMCS emails.
• Update WHMCS safely.
• Review general settings.