One of the best features of the Allure WHMCS Theme is the add-on module that accompanies it. This module allows you to customize the theme without editing any TPL, CSS or JS files. In this tutorial, I’ll walk through all of the options you have at your disposal when it comes to customizing the theme for your needs.
Accessing the addon module
If you have used other WHMCS addon modules before then, this process will be very similar. One of the first steps would be to load up your favorite browser and navigate to your WHMCS admin panel. Once loaded you will log in and be brought to the admin dashboard. You should see a navigation item called “Addons” which will list all of the add-ons you have installed. If you do not see this option, this is due to your permissions. Your staff account must have permissions to view and edit addons.
In the navigation for “Addons,” you will see “Allure Theme” as an option. Click on that link, and you have access to the add-on module!
Accessing theme settings
Once the module page loads it will present you with a landing page that gives you basic information about your theme license:
- License Key Information: You can edit your license key
- Version: This is the current version you have installed. If outdated you will see an icon next to it informing you.
- Support & Updates: You can see when your license will expire for support and upgrades.
To start editing your theme installation, simply click on the “Edit Settings” button. If you wish to preview the theme with the current settings, please click the “Preview Theme” button.
Editing general settings
The “General” tab contains more global changes that do not fit in the other tabs. Here you can make standard changes like the font CDN, font family, and other theme-specific adjustments. Below is a list of all options and what they do:
- Font CDN: This is the URL to the CDN for whatever font service you use. Some typical font services would be Google Fonts and Fonts.com. By default, this is enabled, but emptying this field will remove the CDN call entirely. Be sure to change your “Font Family” to a standard web font if disabling the Font CDN.
- Font Family: This is the font family stack you wish to use for the theme. Be sure to avoid using quotes in this field as it may break the compiler.
- Header Date Format: In the header of the client theme displays the current date. You can adjust the format of the date as needed.
- RTL Support: Enabling this option will compile two specific CSS files for RTL languages only. If you do not support multi-lingual in your WHMCS installation, I would disable this option.
- Dark Theme: The Allure Theme offers not one, but TWO different styles for your customers. You can enable the ability for them to “turn off the lights” by turning this option on. It will render a dark version of the theme with your customizations for them.
- Default Dark Theme: If you want the dark theme to be the default theme for new customers you should enable this option.
- Gravatar Support: This will allow you to disable Gravatar usage that’s added by the theme. By default, WHMCS supports Gravatar, and this will not disable that capability. If you need to disable Gravatar entirely, then you will need to set this option to “No” and contact WHMCS on steps to remove Gravatar.
- SwiftModders Footer Copyright: I would love it if you would keep this option set to “On,” but I completely understand if you do not. This option will remove “SwiftModders” branding callout in the footer of the theme.
Editing logo settings
The “Logo” tab will allow you to enable the logo capabilities of the theme and change the logo URL paths for both the light and dark headers. You must set both URLs if you have the logo enabled. Disabling logo support will replace the logo images with text of your Company Name. This option is for those who have issues with their logo not displaying how they want.
Editing the theme colors
The “Colors” tab is always fun to play around with. This will give you control to set up your brand colors and adjust some of the more basic colors that come with the theme framework. Each option is relatively straight-forward and easy to edit. By just clicking on the field you will be given the color picker to choose whatever color you like.
Editing layout settings
The “Layout” tab will allow you to change the structure of the client theme. Below is a list of all options and what they do:
- Menu Location: By default the theme with a left-side (right-side in RTL) navigation. Use this option to switch to the horizontal style top menu.
- Login Style: By default, the theme will have a split-style login screen. You can also switch to a more “classic” look with a background image and the login form in the middle.
- Header Style: You can choose between a dark or light-style header.
- Menu Style: You can choose between a dark or light-style menu.
- Ticket Style: By default, the theme will have a conversation-style. You can also go with a more “classic” style ticket view as well.
Editing the favicon
The “Favicon” tab will give you the option to enable favicon support for your theme installation. This support is powered by RealFaviconGenerator.net and is very easy to adjust. Simply head to their website and run through the favicon wizard using your favicon file. Once you’ve run through the widget you will be able to download the favicon files and upload them to your favicon folder. This folder should be located in /templates/allure/favicon/
You can also disable favicon support if you like.
Editing the menu icons
The “Menu Icons” tab will allow you to edit the icons for any of your WHMCS menu items. If you have a custom module that adds a new navigation item, you can simply grab the menu name and add it to the list in this tab. These icons are generated by FontAwesome 5 and you can utilize any of the icons in their gallery. The Allure Theme utilizes the “light” style FontAwesome icons, however, you can use any style icon you like.
To find out the menu name of a new menu item you will need to do some detective work. You can either ask the module developer or you can do a quick code inspection in Google Chrome. With your Client Area loaded in Chrome, right click on any menu item and click the “Inspect” option. Once the DevTools inspector is loaded, you will see the HTML code that makes up your primary navigation. Each nav item is in an LI element and has a custom attribute called “menuitemname”. Simply copy that value and put into the “Menu Name” input field.
Once you have the menu name, you can select the FontAwesome icon code you require. Keep in mind that this feature is only for the primary WHMCS navigation and will not work on sub-navigation items. In addition, it is possible that some icons may not be supported. FontAwesome is regularly updated with new releases to the theme, but during times where the theme has not been updated, you may find newer icons that the theme does not support.
Lastly, if the idea of managing these icons is too much…you can disable it altogether!
Adding custom CSS to your theme
The “Custom CSS” tab is for more advanced users who are not afraid of potentially breaking things. This tab pulls in a custom CSS file that will be compiled into the theme. This is a great way to override the look of certain areas in the theme that do not have options. This field will support both standard CSS and SASS/SCSS.
Compiling your customizations
Once you’re done making your changes to the theme settings you will be ready to apply them to your client area! This can be easily done by clicking on the large “Save” button. The theme addon module is smart enough to know when it needs to recompile your changes and when it doesn’t. However, if for some reason it’s not recompiling then you can always manually force it by clicking on the “Actions” button and selecting the “Recompile Settings” option. After your changes have been compiled the addon module will automatically clear your WHMCS template cache for you.
Keep in mind that it will not clear any third-party caching systems you use. For example, if you use services like Cloudflare, Sucuri, etc. then you will need to manually clear the cache from those services to sometimes see your changes.
Did you find this answer helpful?
2 out of 2 people (100%) found this helpful.