LIMITED TIME OFFER: Use the promo code “SUMMERHEAT24” during checkout to save 30% on all SwiftModders products! Activate Discount

How do I customize the SwiftModders WHMCS Client Theme?

One of the most powerful features of any of our WHMCS Themes is that you can customize many different aspects of your theme. The SwiftModders WHMCS Client Theme is no different and offers many ways to make your installation unique to your brand. This guide will 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.

General settings for the SwiftModders WHMCS Client Theme
  • Font CDN URL: This field will utilize the Open Sans font family call via Google Fonts by default. Of course, any font CDN can be used, so you can change this CDN URL to anything you would like. If you’re not interested in using a custom font, 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/
  • 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, 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.

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

Logo settings for the SwiftModders WHMCS Client Theme

If you want to avoid using a logo, you can completely disable its use. Disabling “Logo Support” will replace your logo with a text version of your Company Name. If your company name is quite long, it will automatically be truncated in the header utilizing CSS. For those who wish to use logos, you can replace the following fields with your logo URL:

  • Logo: A knockout white version of your logo
  • Login Logo: A full-color version of your logo
Tip: 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 theme will use the SwiftModders website’s branding colors. 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.

Color settings in the SwiftModders WHMCS Client Theme

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 site areas. We would always keep these colors in the same family as described. The “Gray Colors” are shades of gray that scale from lightest to darkest. You should 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” used on the login page. It is a semi-transparent gray by default, 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 installation feel more unique! Let’s walk through the various options available to you.

Layout settings for the SwiftModders WHMCS Client Theme
  • Menu Location: By default, the menu navigation will be on the side, but you can also select the top horizontal version.
  • Layout Style: This theme has two distinct layout styles you can choose from. The default is the fluid “Full-Width” style, and the other option is the “Boxed” layout which will define clear constraints for your content areas.
  • Header Style: The header has two styles: light and 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 choose between two 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.

Changing the default background images

The theme comes with two default background images that you can replace if you would like:

  • “domains-background.jpg”: This background image is used on the client theme homepage behind the domain registrar hero image.
  • “login-background.jpg”: This background image is used on the login/register template behind the form in the center of the page.

You can find both images in the following path:

/whmcsroot/templates/swiftmodders/img/

Tip: It is recommended that you keep a backup version of both images when you update your theme, as the upload will overwrite these files. After updating, you can replace the files with your previous customizations.

Inserting my own custom CSS/SCSS

For those who are a little more advanced and clearly understand 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.

Custom CSS in the Allure WHMCS Client Theme

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 impacting the desktop, tablet, and mobile versions.

Warning: Due to the complex nature of this section, we cannot provide support for your custom CSS changes.

Congratulations, you’ve completed the guide on customizing your theme! We hope this was helpful and provides greater insight into this theme’s power. As always, if you have any issues during the installation process, please be sure to open a support request.

Looking for something a little more custom?

Since 2007 we have been offering tech-focused businesses quality web development services catered to meet the needs of your business and customers. We offer a wide range of project options, flexible budgets, and quality coding standards. Hire us to take care of your web project needs.

Our services
Back to top

Get 15% OFF Your Next Order

Join the SwiftModders newsletter by entering your information below and get an exclusive discount code for your next order!

You can opt-out of our newsletter at any time by visiting our Privacy Policy page.
Close