Take advantage of our latest Fall savings with 45% OFF all SwiftModders products! No promotional code required.

Choose Your Product
Menu

How do I customize the SwiftModders WHMCS Client Theme?

One of the most powerful features of any SwiftModders WHMCS Theme is that you can customize many different aspects of your theme. The SwiftModders WHMCS Client Theme is no different and offers a multitude of ways you can 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. Some will have more impact than others, but this is the first step in making your theme unique.

SwiftModders WHMCS Client Theme - General Settings

  • Font CDN URL: By default, this field will utilize the Montserrat font family call via Google Fonts. 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 that is 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, 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 footer of the theme. If disabled, it will be removed.

Adding Your Company Logo

Most organizations will want to use their company branding on the theme as opposed to the default SwiftModders logo. I highly recommend that you do this as it will 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.

SwiftModders WHMCS Client Theme - Logos

  • Logo: A knockout white version of your logo
  • Login Logo: A full-color version of your logo

*Notice: The recommended logo size is 518×78. It would be best to use your favorite photo manipulation tool to adjust your logo to fit these specifications. If your logo looks too small with this format, it might be best to make a custom logo for your theme.

Adjusting the Theme Colors

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

SwiftModders WHMCS Client Theme - Colors

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 used by Bootstrap 3. 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 white, 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.

SwiftModders WHMCS Client Theme - Layout

  • Menu Location: By default, the menu navigation will be located on the side, but you also can select the top horizontal version as well.
  • 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 different style options, light or dark.
  • Menu Style: Similarly to the “Header Style”, you can pick between two different menu styles, light or dark.
  • Ticket Style: When your customers are viewing a ticket, you can pick between two different styles for them to use. The “Conversation” style will resemble more of a text-message form while the “Classic” stays in-line with the default WHMCS style.

Changing the default background images

The SwiftModders WHMCS Client 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:

  • /**yourwhmcsinstall**/templates/swiftmodders/img/

*Notice: It is recommended that you keep a backup version of both images when you update your SwiftModders WHMCS Client Theme as the upload will overwrite these files. After updating, you can simply replace the files with your previous customizations.

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. Be careful, adding incorrect CSS or SCSS syntax can break the CSS compilation library and result in your changes not being saved.

Allure WHMCS Theme - Custom CSS

The Theme Installer provides an easy to use syntax formatter that should help make the editing process simpler. If you make a mistake, your changes will give an error rather than save. Do not forget to take into account any changes that impact not only the desktop but tablet and mobile versions as well.

*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, 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 SwiftModders WHMCS Client 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, simply navigate to “Services”> “View Available Addons.” You will see the “Theme Customization” service listed as an option for your theme purchases.


Did you find this answer helpful?

4 out of 4 people (100%) found this helpful.

Introducing the WordPress Website Design Package

SwiftModders has specialized in WordPress web design and development for over 10 years and is now offering a heavily-discounted website design package to help small businesses build a powerful and highly customizable website that caters to the needs of you and your customers.

Let's Talk
Back to Top

Before You Go!

Signing up for the newsletter will unlock a 15% OFF promo code that you can use on any theme purchase. Just fill out the form below!

  • This field is for validation purposes and should be left unchanged.
Close