New Twenty-One Client Area Theme

WHMCS 8.1 and later includes a new system theme, Twenty-One, to upgrade your and your customers' experience in the WHMCS Client Area, including enhancements for mobile devices.

Creating an account during checkout.

Anyone can create an account through the Client Area. To do this:

1. Click Account in the top-right corner.
2. Select Register.
3. Fill out the form.
4. Click Submit.

This creates an account and an associated user who is the account owner.

Logged-in users can choose to create a new account for the items in the cart during checkout. In this case, the system will assign account ownership for the new account to the logged-in user. To do this, select Create a New Account under Choose Account during the checkout process. Fill out the form that appears and then continue with the usual checkout process.

The new theme.

Streamlined Navigation

Notifications in Twenty-One

Notifications and your currently-selected account now display in a bar at the top of the screen. The breadcrumbs to your current page are now displayed prominently in a bar directly below the main menus.

The Selected Account

A convenient Switch Account icon next to your Logged in as information allows you to easily move between your associated accounts to get the most out of our users-and-accounts user management system. A few other actions, like logging out, have also been rearranged to optimize usability.

Social Media Support

The bottom bar of the Client Area now includes a row of configurable social media icons. You can add your social media accounts and display these icons by entering your social media accounts at Configuration > System Settings > General Settings in the Social tab.

Notifications in Twenty-One

Enhanced Interface Elements

Enhanced Interface Elements

We have updated many design elements throughout the Client Area, for a better experience whether you're on a desktop or mobile device. Because of this, several items have moved.

From the top navigation, for example, the user's language and currency now display as a combined control element at the bottom of the page.

Customizable Style and Color Palette

Customizations

Twenty-One offers a neutral color palette in gray tones with muted accents. You can easily make a custom system theme to update this, or you can place a custom.css file in the css directory, which, if present, will be loaded by the system theme template system.

Bootstrap 4

This system theme uses Bootstrap 4 for a responsive and refined design experience. Bootstrap 4 has many layout and class differences compared to Bootstrap 3, which is used in the previous Six system theme. If you use a custom system theme or order form template, you can incorporate these changes with the help of their migration guide.

All of the WHMCS-provided order form templates work with Bootstrap 4 in the Twenty-One or Bootstrap 3 Six. For more information and examples to use to create your own system themes, see our Developer Documentation.

Enabling Twenty-One

To set Twenty-One as your WHMCS installation's system theme in the Client Area, go to Configuration () > System Settings > General Settings. In the General tab, select Twenty-One as your System Theme.