ModulesGarden Documentation
Back Home Home

How To Change WHMCS Module Design

  • Navigation
    • Main Page
    • ModulesGarden Website
    • Help
  • WHMCS Modules
    • Abandoned Cart
    • Account Synchronization
    • AdminBolt Licenses
    • Advanced Billing
    • Alibaba Cloud Virtual Machines
    • Amazon EC2
    • Amazon Lightsail
    • Anti-Fraud And Email Verification
    • Client Area Designer
    • Client Area Popup
    • Client Profile Viewer
    • Cloud Billing
    • cPanel Extended
    • cPanel Manage2
    • CRM
    • DigitalOcean Droplets
    • DirectAdmin Extended
    • DirectAdmin Licenses
    • Discount Center
    • DNS Manager
    • Domain Allocator
    • Domain & Email Forwarding
    • Domain Orders Extended
    • Domains Reseller
    • EasyDCIM Colocation
    • EasyDCIM Dedicated Servers
    • Email Notifications Organizer
    • Emoji Picker
    • EURid Registrar
    • Expense Tracker
    • Freshdesk
    • Freshservice
    • Geolocation Hook
    • GoDaddy Domain Registrar
    • GoGetSSL
    • Google Analytics
    • Google Cloud Virtual Machines
    • Google Workspace
    • Hetzner Cloud Servers
    • Hosting Quota Notifications
    • Hosting Renewals
    • IBM Cloud Virtual Servers
    • IP Manager
    • Lagom Smart Order Form
    • Login-Free Payments
    • Marketing Triggers Automation
    • MetricsCube Business Analytics
    • MikroTik WireGuard VPN
    • Multibrand
    • NIC IT Registrar
    • Office 365
    • OpenStack Projects
    • OpenStack VPS & Cloud
    • OVHcloud VPS & Dedicated Servers
    • Password Manager
    • Payment Gateway Allocator
    • Payment Gateway Charges
    • Plesk Extended
    • Plesk Key Administrator
    • Portainer Docker Containers
    • Premium Support Tickets
    • Product Cross-Selling
    • Product Feedback Center
    • Product Free Trial Manager
    • Product Linker
    • Products Reseller
    • Proxmox Mail Gateway
    • Proxmox VE Cloud VPS (Legacy)
    • Proxmox VE VPS & Cloud
    • QuickBooks Desktop
    • QuickBooks Online
    • QuickBooks Online Survey
    • Quotes Automation
    • R1Soft Backups
    • Rackspace Email Extended
    • Recurring Contract Billing
    • Report Generator
    • Resellers Center
    • Server Allocator
    • Secure Support Messages
    • Server Monitoring
    • SMS Center
    • Social Media Login
    • SolusVM 2 VPS & Cloud
    • SolusVM Extended VPS
    • SolusVM Extended Cloud
    • SolusVM Extended Reseller
    • Stripe SEPA Payments
    • Support PIN
    • Support Tickets Allocator
    • Time & Task Manager
    • Unban Center
    • Virtuozzo Hybrid Infrastructure S3
    • Virtuozzo Hybrid Server
    • Vultr VPS
    • WithoutDNS
    • WordPress Manager
    • Zendesk
    • Zimbra & Carbonio Email
  • Legacy Versions
    • Advanced Billing 3.X
    • Domain Orders Extended 2.X
    • Domains Reseller 1.X
    • EasyDCIM Colocation V1.X
    • EasyDCIM Dedicated Servers V1.X
    • EasyDCIM Dedicated Servers V2.X
    • Hosting Quota Notifications 1.X
    • Hosting Renewals 2.X
    • IP Manager 2.5.X
    • Lagom One Step Order Form 1.2.X
    • Multibrand 1.X
    • Office 365 1.0.0
    • Payment Gateway Charges 1.X
    • Proxmox Cloud 2.X
    • Proxmox VPS 2.X
    • Quotes Automation 1.X
    • Recurring Contract Billing 1.5.X
    • Report Generator 3.X
    • Resellers Center 2.X
    • SMS Center 2.X
    • Unban Center 1.X
    • Zimbra Email For WHMCS
    • Zimbra Email 1.X
  • WHMCS Module Bundles
    • Accounting
    • Commerce
    • CRM
    • Customer Experience
    • Domain Reseller
    • Hosting Accounts Provisioning
    • IaaS VPS And Cloud Provisioning
    • On-Premises VPS And Cloud Provisioning
  • WHMCS Widgets
    • Freshdesk Customer Widget
    • ModulesGarden Widget
    • WHMCS Widget For Zendesk
  • Tools And Applications
    • Access Control Tool
    • App Templates Tool
    • Automations Tool
    • Logs
    • Proxmox Proxy Application
    • Task Queue Tool
    • Theme Management Tool
  • Translations
    • Translations Tool
    • Translations
    • Polish Language Translation
    • Polska Wersja JÄ™zykowa (PL)
  • General
    • 7-Day Free Access
    • How To Change WHMCS Module Language
    • How To Debug Module
    • How To Solve Problems With Module License
    • How To Change WHMCS Module Design
    • How To Update WHMCS Module
    • How To Upgrade WHMCS Module
    • How To Use Configurable Options
  • FAQ
    • Common Questions
    • WHMCS Module Bundles
  • Community
    • Forums
    • Blog
    • Facebook
    • X
    • LinkedIn
    • Instagram
    • Reddit

    # How To Change WHMCS Module Design

    • Change Module Design
    • Template Integration

    The following article contains all the information on how to adjust the module look and feel to your needs and preferences.
    Take a quick look to learn when and how to do any changes by yourself or order the template integration service by professionals.

    # Change Module Design

    Frequently our clients use customized templates in their system, which our modules might not integrate with, and additional adjustments to their code may be required.
    In order to meet your expectations, we allow establishing such compatibility by yourself. All you need to do is perform necessary modifications to the unencrypted files responsible for the user interface included in the product's package.
    The .tpl files can be found in the 'templates' folder in the module directory. Mentioned files are not coded and are available for you to freely adjust their content, no matter what type of a license you own.
    There are only two requirements that you have to meet, these are:

    1. You must be familiar with CSS on the basic level at least.
    2. The currently used template in the client area should be close to the themes provided by WHMCS, that is 'Six' based or 'Twenty-One' based, as only these two are officially supported by ModulesGarden modules.
      In case of the admin area template that is 'Blend' and 'Blend-Preview'.
      If you fulfill these two conditions, there is nothing on your way that can stop you from introducing any changes in the modules' look and feel on your own.

    # Template Integration

    There is one more situation when you might want to introduce some changes in the module look, yet the theme you are currently using is already strongly customized and your basic knowledge of CSS turns out insufficient.

    We are always here to help you!
    Every module in ModulesGarden offer (opens new window), among many other features, has one that, in this situation, will prove extremely beneficial. That feature is "Support For Template Customization".
    A team of professional designers and web developers at the ModulesGarden partner company can perform all claimed modifications required to smoothly integrate the user interface of a single product with your customized template.
    The template integration service is always charged individually; you may order it both at the checkout and in the 'Setup Services' tab located on the product's page.
    Additionally, for your convenience, this service is completed within 5 business days from the moment of the payment.
    All you have to do is contact ModulesGarden Support (opens new window) team and ask for details of the 'Template Integration' offer. You will immediately get any information on the offer and a fully customized and prepared quotation individually.