New Twenty-One Client Area Theme - Revision history

SarahK at 20:21, 26 April 2022

2022-04-26T20:21:36Z

SarahK at 23:31, 20 November 2020

2020-11-20T23:31:54Z

SarahK: Created page with "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..."

2020-11-20T21:38:20Z

Created page with "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..."

New page

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.

[[File:CreateAccountInCheckout.png|300px|thumb|right|Creating an account during checkout.]]

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

# Click '''Account''' in the top-right corner.
# Select '''Register'''.
# Fill out the form.
# 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.

[[File:twenty-one-one.png|300px|thumb|right|The new theme.]]

=== Streamlined Navigation ===

[[File:twenty-one-two.png|300px|thumb|left|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.

[[File:twenty-one-three.png|300px|thumb|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_Networking|Social]]''' tab.

[[File:twenty-one-two.png|300px|thumb|right|Notifications in Twenty-One]]

=== Enhanced Interface Elements ===

[[File:twenty-one-five.png|300px|thumb|left|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 ===

[[File:twenty-one-six.png|300px|thumb|right|Customizations]]

Twenty-One offers a neutral color palette in gray tones with muted accents. You can easily make a [https://developers.whmcs.com/themes/ custom system theme] to update this, or you can place a <tt>custom.css</tt> file in the <tt>css</tt> 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 [https://developers.whmcs.com/themes/ Developer Documentation].

=== Enabling Twenty-One ===

To set ''Twenty-One'' as your WHMCS installation's system theme in the Client Area, go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[General Settings]]'''. In the '''General''' tab, select ''Twenty-One'' as your '''System Theme'''.

← Older revision		Revision as of 23:31, 20 November 2020
Line 1:		Line 1:
	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.		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.
−
−	~~[[File:CreateAccountInCheckout.png\|300px\|thumb\|right\|Creating an account during checkout.]]~~
−
−	~~Anyone can create an account through the Client Area. To do this:~~
−
−	~~# Click '''Account''' in the top-right corner.~~
−	~~# Select '''Register'''.~~
−	~~# Fill out the form.~~
−	~~# 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.

	[[File:twenty-one-one.png\|300px\|thumb\|right\|The new theme.]]		[[File:twenty-one-one.png\|300px\|thumb\|right\|The new theme.]]

@@ Line 15: / Line 15: @@
 === 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_Networking|Social]]''' tab.
+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 in the '''[[Social_Networking|Social]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > General Settings'''.
 [[File:twenty-one-two.png|300px|thumb|right|Notifications in Twenty-One]]
@@ Line 41: / Line 41: @@
 === Enabling Twenty-One ===
-To set ''Twenty-One'' as your WHMCS installation's system theme in the Client Area, go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[General Settings]]'''. In the '''General''' tab, select ''Twenty-One'' as your '''System Theme'''.
+To set ''Twenty-One'' as your WHMCS installation's system theme in the Client Area, go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[General Settings]]'''. In the '''[[General Tab|General]]''' tab, select ''Twenty-One'' as your '''System Theme'''.