How do I customize the Allure WHMCS Theme?

One of the most powerful features of any SwiftModders WHMCS Theme is that you can customize many different aspects of your theme. The Allure WHMCS Theme is no different and offers many ways to make your installation unique to your brand. In this guide, I’ll walk you through the various settings you can customize.

Editing the General Settings

These settings are general theme options that will impact multiple areas of the theme. Of course, some will have more impact than others, but this is the first step in making your theme unique.

Font CDN URL: This field will utilize the Montserrat font family call via Google Fonts by default. Of course, any font CDN is available, so you can change this CDN URL to anything you would like. Keep in mind if you’re not interested in using a custom font, you can leave this field blank to disable its usage.
Font Family: This field will match whichever font you’ve selected via your preferred Font CDN. If you’re not using a Font CDN, you’ll be expected to call a font stack supported in most browsers. For a safe list of CSS font stacks that do not require a CDN, check out this guide: https://www.cssfontstack.com/
Header Date Format: In the header of the Allure WHMCS Theme, you will see the current date. This date format can be modified here if your country utilizes a different format. This allows for maximum flexibility with your customers. The format is handled via the PHP date format system.
RTL Support: You can enable or disable the use of RTL on supported languages. By default, the system will show the site in RTL mode for supported languages, but if you’re not offering multiple languages to your customers, you can disable this. Disabling this option will reduce the time it takes to compile your CSS changes.
Preloader Animation: A preloader animation will be displayed when it takes for the page to load fully. If you happen to have a slower server or do not want your users to see any jarring changes as the pages load, this option is for you. Disabling this option will sometimes give a better impression of speed.
Light Switch (Dark/Light Theme): The Allure WHMCS Theme comes with a dark variant that can be enabled for your customers to select. When enabled, it will show a toggle option that says “Lights?” next to it. Turning it off will turn off the “lights” and activate the dark theme. Disabling this option will reduce the time it takes to compile your CSS changes.
Default to Dark Theme: If the “Dark Theme” option above is enabled, this option makes the Dark Theme the default for any new users that visit your website. Previous users will utilize the settings they had at the time they visited your site.
Gravatar Support: Gravatar is a global user avatar system provided by WordPress.com. Your selected avatar will be attached to the email address you used when you signed up, and this option will pull your user’s avatar into the header and ticket views. If no avatar was uploaded, then it will show a default silhouette image.
SwiftModders Footer Copyright: If you would like to show support for SwiftModders, you can enable our copyright message to display in the theme's footer. If disabled, it will be removed.
Affiliates URL: SwiftModders offers an affiliates program for all clients who pay you a portion for referred product purchases. You can use this field for your affiliates' URL if the “SwiftModders Footer Copyright” option is enabled.

Adding Your Company Logo

Most organizations will want to use their company branding on the theme instead of the default SwiftModders logo. I highly recommend that you give your site a better professional feel and avoid branding confusion when your customers need support for your products. Let’s walk through the best way to change this.

If you would like to avoid using a logo for any reason, you can altogether disable its use. By disabling “Logo Support,” your logo will be replaced with a text version of your Company Name. If your company name is quite long, it will be truncated in the header automatically utilizing CSS. For those that wish to use logos, you can replace the following fields with your logo URL:

Color Logo: A full-color version of your logo
Color Icon Logo: A full-color version of your logo icon
White Logo: A knockout white version of your logo
White Icon Logo: A knockout white version of your

Notice: While there is no recommended size for the logo, this theme works better with horizontal logos rather than vertical. If your particular logo does not look great when applied, it would be best to turn off “Logo Support.”

Adjusting the Theme Colors

By default, the Allure WHMCS Theme will be using the branding colors of the SwiftModders website. While we enjoy those colors, you might not! If your company or organization features its color palette, this section will be the best place to display it.

As you can see, the theme has many color options you can change to make your installation unique quickly. The “Brand Colors” are the primary colors used throughout the theme. The “Theme Colors” are default color sets that WHMCS uses throughout various areas of the site. I would always keep these colors in the same color family as they are described. The “Gray Colors” are shades of gray that scale from lightest to darkest. It is recommended that you always keep the scale as close to the default as possible. You may end up with legibility issues on your theme otherwise. Lastly, the “Additional Colors” features the “Login Overlay Color,” which is used on the login page. By default, it is a semi-transparent gray, but you can change it as you see fit using the color picker.

Modifying the Theme Layout

In addition to editing essential branding elements of your theme installation, you can also edit general layout settings to help make your install feel more unique! Let’s walk through the various options available to you.

Login Background Image: This background image will be used on the login template to invite users to log in or register. This image can be anything you like, so enter the URL or upload the background image you wish to use. I recommend changing the name or location if you do not want to have your image overwritten after each update.
Domain Background Image: On the homepage template for your WHMCS theme, you’ll see a hero section for registering a new domain name. The background image used here can be replaced in this field. Similar to the “Login Background Image” above, you will want to move this to a different location or rename the file if you change it at all.
Auto-Hide Sidebar in Cart: Enable this option to have the sidebar auto-hidden when your clients attempt to purchase one of your products. (Available in 1.0.7+)
Menu Location: By default, the menu navigation will be located on the side, but you can also select the top horizontal version.
Default Minified Menu: The side menu has two states, expanded or minified. By default, it will always be expanded unless your clients want to minify it for whatever reason. This option is only available for the side menu and does not impact the top menu. If you have disabled navigation menu icons in the later section, you will not select this option. It will break as no icons will appear when minified.
Login Style: This theme comes with two login screen styles that you can select. The default, the split-screen style, will show your “Login Background Image” on one side and your login/register form on the other. A classic style will have the background behind the login/register form in the middle.
Header Style: The header has two different style options, light or dark. The light version will be a white-style header using the “Color Logo” and “Color Icon Logo.” The dark version will be a dark gray-style header using the “White Logo” and “White Icon Logo.” These style changes are ignored in the dark version when you enable the “Dark Theme.”
Menu Style: Similarly to the “Header Style,” you can pick between two different menu styles, light or dark.
Ticket Style: When your customers view a ticket, you can pick between two different styles for them to use. The “Conversation” style will resemble a text-message form, while the “Classic” stays in line with the default WHMCS style.

Setting up your Favicon

The Allure WHMCS Theme features support for your favicon icon, powered by RealFaviconGenerator.com. Real Favicon Generator (RFG) will do most of the work for you; the only thing you’ll need is a large (min. 70×70) square version of your Favicon. To get started, you will head to the RFG site and click on the “Select Your Favicon Image.” Once your image has been uploaded to RFG, it might stop you to say your image is not square. If so, click to continue, but if you would like, you can cancel and make it square using your favorite image editor.

You will see several preview images to adjust and modify to your needs based on your image. I will not go through all of these, but you can use the sliders provided by RFG to make your adjustments as needed. Once you’re done and feel comfortable with your selected settings, you will click the “Generate your Favicons and HTML code” button to finalize everything.

It may take RFG a few minutes to prepare your download package, but once completed, you will see the “Favicon package” button next to “Download your package.” This will be all you need from this page, and you can download the favicon package to your local machine. Next, unzip the Favicon package on your local machine and upload the contents to the folder path presented in the “Favicon” tab of your Allure WHMCS Theme settings. You will replace the default files in the “favicon” folder with those you generated in the steps above. Once uploaded, you’ll be all set!

Changing the Favicon Folder (Recommended)

Introduced in version 1.2.0 of the Theme Installer, you can now set a custom favicon folder for the Allure WHMCS Theme. In the “Favicon” tab, enter a custom folder name for your favicon files and save your settings. The theme will automatically pull the favicon data from this new location. Before changing, make sure that the folder exists.

Notice: You do not have to utilize the Favicon support if you do not wish to. Simple disabling this option will remove all of the Favicon code from the theme files.

Editing your menu icons

The Allure WHMCS Theme comes with a menu icon manager to set FontAwesome 5 icons to your menu items. This functionality taps into the default WHMCS hooks for navigation manipulation but makes it easier for you with a simple UI.

Notice: The theme will be regularly updated with the most recent version of the FontAwesome icons. However, WHMCS does not provide any support for the Duo icons. Setting a Duo icon will result in an error on your website and break your installation. Please stick to the Solid, Regular, Light, and Branded icons.

You have the option, if you like, to altogether disable the menu icons if you wish. Please note that you will want to use the “Top” style “Menu Location” in “Layout” if that is the case. Without the icons, the minified version of the “Side” menu will be broken with no link indicator. Those who wish to continue using the menu icons can easily edit the icons for the default menu items present in WHMCS. The “Delete” button will remove the item from the list, so be careful not to delete a default menu item unless you’ve removed the navigation from your site.

The “Menu Name” section is not the actual text displayed for the menu item, but it is a unique attribute used by WHMCS to identify menu item names. So if you are looking to add a menu icon to this list, you’ll need to use your favorite browser and inspect the menu item. You’ll find the attribute “menuitemname” and the value assigned to it. Grab that value and set it as the “Menu Name.” You can then apply the FontAwesome icon code for the “Menu Icon.”

Inserting my own custom CSS/SCSS

For those that are a little more advanced and have a clear understanding of how to use CSS or SASS/SCSS syntax, you can use the “Custom CSS” tab to insert your CSS into the theme directly. This is especially helpful for areas of the theme I do not provide an easy way to edit. However, be careful; adding incorrect CSS or SCSS syntax can break the CSS compilation library and result in your changes not being saved.

The Theme Installer provides an easy-to-use syntax formatter that should help make the editing process simpler. However, if you make a mistake, your changes will give an error rather than save. Do not forget to consider any changes that impact the desktop and tablet, and mobile versions.

Notice: Due to the complex nature of this section, I cannot provide support for your custom CSS changes. If you have issues with your changes not applying, I’ll try my best to deduce them, but it may require you to seek help from the web development community. A great resource would be StackOverflow, as you can ask many questions about your CSS/SCSS code.

Congratulations, you’ve completed the guide on how to customize your Allure WHMCS Theme installation! I hope this was helpful and provides greater insight into just how powerful this theme can be. As always, if you have any issues during the installation process, please be sure to open a support ticket. You can also order the “Theme Customization” service via the Client Area if you would like us to customize your theme installation for you. To order, navigate to “Services”> “View Available Addons.” You will see the “Theme Customization” service listed as an option for your theme purchases.