Back to Blog Posts

Introducing the Twenty-One Theme

By Sarah / December 4th, 2020

WHMCS 8.1 includes a new system theme, Twenty-One, that will upgrade your customers' experience throughout the WHMCS Client Area. We've updated the look-and-feel of every page and modernized it with a sectional-based design, clearly breaking content into easy-to-digest sections. Twenty-One also enhances the experience for mobile and tablet users, with responsive improvements that enhance usability across all screen sizes.

A New Homepage
The Client Area home page is now a brighter and cleaner landing page for your customers. We've worked hard to cater to different user types and make the page useful to all of your customers.
New customers can easily find what they need to order domains and services, enabled in part by easy-to-find product groups. For existing customers in need of assistance, dedicated sections make submitting a support ticket or finding knowledgebase articles easy. When they're ready to perform account-related actions like making payments and managing domains and services, it will be easy to find everything they need, all at their fingertips.

On Every Page
On every page of the WHMCS Client Area, you'll find additions and other changes, though most of the base navigation remains the same. The header and footer now contain new and helpful elements.

When clients are logged in, they'll see an extra bar at the top of the page. Notifications display on the left, and, on the right side, you can see the name of the currently-selected account, with an option to switch between the accounts that the logged-in user can access. A new search box below, available whether a customer is logged in or not, will make finding things in your knowledgebase easy.
In the footer, you can now easily add social media icons using settings in the Admin Area. You'll also find the controls for preferred language and currency in the footer, available on every page.

Improved Domain Search
On your front page, the domain search features neutral default styling with a splash of color thanks to a newly-added space for Spotlight TLDs. We're also adding a link here to the domain pricing list.

Better Support Area
When your customers work with their support tickets, they'll get to enjoy an improved look-and-feel as well as some great updates to reorganize content.
The reply box on support ticket pages has moved to the bottom of the page (but don't worry, the Reply buttons will take you there from anywhere on the page). We also added new styling for replies, and updated the file upload and attachment system to make attachments stand out on the page.
Your knowledgebase and download pages have been updated too, with a refreshed look and brighter design.

Modern Network Status Alerts
In previous themes like Six, Network Status messages were harder to find. Now they automatically appear at the top of every page in a new notification bar. The bar changes color depending on the state of the issue, with clear indications of when you have an issue, are performing maintenance, or have maintenance scheduled in the future.
Clicking through will take your clients to the main Network Status page, where they'll be able to view your detailed network status posts and a server status overview.

Bootstrap 4 and Other Theme Development Improvements
While developing Twenty-One, we worked to keep the theme's design flexible, allowing greater design potential for custom theme designers. Twenty-One uses a neutral color palette with gray tones and muted accents, making it easy to customize with simple CSS updates.

We chose Bootstrap 4 for this theme since it allowed us to create a responsive and refined design experience. There are many differences between the layout and classes of Bootstrap 4 (Twenty-One) and Bootstrap 3 (Six), but we've taken extra time to make sure those differences never clash. We've made sure that all of the WHMCS-shipped order form templates will work seamlessly with both system themes. We're also working on maintaining Bootstrap 3 and 4 in a sustainable way as we move forward: releasing this new theme means we're supporting not one but two themes for at least a year (and possibly longer). We're prepared to meet the challenge, though, with more development bandwidth and readiness in support.

You don't need to do anything special to use Bootstrap 4 for your custom themes. You can find more information on developing custom themes in our Developer Documentation, or learn more about Bootstrap 4 on the Bootstrap website.

Start Using Twenty-One
Switching to Twenty-One is easy. After you make the move to WHMCS 8.1, just go to Configuration > System Settings > General Settings, choose the General tab, and select Twenty-One as your System Theme.

Liked this article? Share it