/ /website-builder/ /leased-bundle/ /extensions/ /module-integration/ /order-form/

# Includes & Overwrites

Includes
Overwrites
Output Hooks

Lagom WHMCS Client Theme offers all the tools you need to overwrite specific theme elements as well as include custom graphics and custom code in theme page files. Take advantage of our ready-made solution and enjoy preparing a collection of customizations that will not be overwritten by future theme updates.

# Includes

In this part, you will learn how to safely include custom files or graphics in the Lagom WHMCS Client Theme files.

# Custom CSS File

The “Custom CSS File” feature allows you to create your own CSS rules by adding a new file to the existing Lagom Style (opens new window). This option is completely safe and will not be overwritten by future Lagom WHMCS Client Theme updates.

Log in to FTP/SFTP of your WHMCS server.
Navigate to the proper style directory. A file needs to be added in the “active” style in your “RS Themes” addon. For example, if you are using the “Default” style, go to the /templates/lagom2/core/styles/default/assets/css/ directory located on your WHMCS server.
Create the theme-custom.css file and add necessary custom CSS rules.

# Custom Payment Icons

By default, the Lagom WHMCS Client Theme provides logos for these payment gateways: "Credit Card", "Stripe", "PayPal", "TCO", "Bank Transfer". If you are using a different payment gateway in your system, you can assign a custom icon to this gateway.

Payment Gateway logos are displayed on the checkout page of your ordering process.

In order to assign your new icons, refer to the following steps:

Log in to FTP/SFTP of your WHMCS server.
Proceed to /templates/lagom2/assets/img/ and create the gateways folder.
Graphics added to the gateways folder need to have the correct names. To find out what is the correct name for your graphic, navigate to your client area and add a product to your shopping cart.
Scroll down to the “Payment Method” section and inspect the code of your custom gateway. The name of your gateway file is located in data-gateway-icon-name, so for the example presented below, the file should be named authorize.svg. We only support the .svg and .png file formats.

# Custom Language Flag Image

By default Lagom contains flags for all WHMCS default languages (opens new window).

There are two ways to customize the flag images - by adding a new language with a new flag, or by replacing the flag for an existing language. Below you will find instructions for both scenarios.

# Adding a Flag Image for a New Language

To assign a custom flag to a new language you have added, follow these steps:

Log in to FTP/SFTP of your WHMCS server.
Proceed to /templates/lagom2/assets/img/flags/.
Upload flag graphic, which should have 20x15 px size, it is suggested to use svg graphics.
Create theme-custom.css file as described in this article.
Add custom CSS code to assign flag graphic into specific dropdown element:

.language-flag.[language_name] {
    background: url(../../../../../assets/img/flags/[flag_name].svg);
}

Replace [flag_name] with filename, which has been uploaded in step 3.
Replace [language_name] with the class assigned to language-flag class:

# Replacing the Flag Image for Existing Languages

If you wish to change the flag image for an existing language, follow these instructions:

Upload your desired SVG flag image to the following directory on your server templates/lagom2/assets/img/flags/custom.
Navigate to templates/lagom2/core/styles/[your_active_style]/assets/css/ directory on your server and open the theme-custom.css file.
Locate following line language-flag.flag-[language_name] and modify file name in the presented URL to align it with name of the file that you have just uploaded:

.language-flag.flag-spanish
.language-flag.spanish
{ 
background: url(../../../../../assets/img/flags/custom/[file_name].svg);
}

You can also display your own HTML code above the default Lagom navigation. In case you need to add your additional CSS code to style a new HTML code, you can create the custom CSS file.

Log in to FTP/SFTP of your WHMCS server.
Navigate to the proper navigation layout directory. For example, if you want the code to be shown for the “Default” layout, proceed to the /templates/lagom2/core/layouts/main-menu/default directory on your WHMCS server.
Create a new file header.tpl and insert the needed code.

Another option is to display your own HTML code above the default Lagom footer. If you need to add the additional CSS code to design the new HTML code, you can add the custom CSS file.

Log in to FTP/SFTP of your WHMCS server.
Go to the correct footer layout directory. For example, if you would like to display the code for “Extended” footer layout, navigate to the /templates/lagom2/core/layouts/footer/extended directory on your WHMCS server.
Create a new footer.tpl file and insert the needed code.

# Custom (Local) Font Face

Read this article, if for some reason you can't use Google Fonts, which are used by default in our theme in Style Manager (opens new window) and want to load fonts locally from your own server.

Below example will show how to download "Open Sans" from Google Fonts, and include this font and its files manually to Lagom WHMCS Client Theme.

Find your font and click "Download Family" button.
Visit Transfonter (opens new window), upload previously downloaded fonts, and click "Convert" button.
Extract zip file, which has been downloaded on your computer.
Upload each .woff and .woff2 files to /templates/lagom2/assets/fonts/open-sans on your WHMCS server.
Create theme-custom.css file based on this article.
Copy the CSS code from stylesheet.css file available in the extracted ZIP archive folder, but remember to correct the URLs to the font files by adding ../../../../../assets/fonts/open-sans/.

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-BoldItalic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-LightItalic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
        url('../../../../../assets/fonts/open-sans/OpenSans-SemiBold.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Bold.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
        url('../../../../../assets/fonts/open-sans/OpenSans-ExtraBold.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Regular.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Medium'), local('OpenSans-Medium'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Medium.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Light'), local('OpenSans-Light'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Light.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Italic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Medium Italic'), local('OpenSans-MediumItalic'),
        url('../../../../../assets/fonts/open-sans/OpenSans-MediumItalic.woff2') format('woff2'),
        url('../../../../../assets/fonts/open-sans/OpenSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

Enter Open Sans name in "Use Custom Font" (opens new window) field, available in Style Manager settings.

# Custom Checkout Checkboxes in View Cart

If your country requires extra checkboxes to be selected during the ordering process, we've provided a solution for this. You can now create checkboxes for GDPR, Privacy Policy, or other confirmations. These will appear below the standard WHMCS "Terms of Service" checkbox, as detailed in the following instructions.

# Create New File

Log in to FTP/SFTP of your WHMCS server.
Go to the templates/orderforms/lagom2/includes/viewcart/ directory on your server.
Create new file named custom-tos.tpl.

# Create Confirmation Box Code

Create necessary code to newly created file, by following below example.

Create a wrapper, where you need to place your custom input name in the data-form-input attribute. In our exmple we'll use #custom-accept-tos name, as shown below:

<div class="order-checkbox" data-form-input="#custom-accept-tos">

</div>

Insert the code snippet for the checkbox field. Replace the ID attribute with your custom name, created in first step. In our example ID attribute will be custom-accept-tos. Do not change anything else in below code:

<div class="order-checkbox" data-form-input="#custom-accept-tos">
    <div class="checkbox m-t-0 m-b-1x">
        <label>
            <input class="icheck-control" type="checkbox" data-custom-tos id="custom-accept-tos" />
        </label>
    </div>
</div>

Include a label and, if required, a hyperlink in the previously added label code, as demonstrated in the example below:

<div class="order-checkbox" data-form-input="#custom-accept-tos">
    <div class="checkbox m-t-0 m-b-1x">
        <label>
            <input class="icheck-control" type="checkbox" data-custom-tos id="custom-accept-tos" />
            <span>[Custom checkbox label text] <a href="https://customcheckbox.com" target="_blank">[link]</a></span>
        </label>
    </div>
</div>

Insert the code for an alert that will appear beneath the checkbox if unselected, indicating an error message stating the field is required.

<div class="order-checkbox" data-form-input="#custom-accept-tos">
    <div class="checkbox m-t-0 m-b-1x">
        <label>
            <input class="icheck-control" type="checkbox" data-custom-tos id="custom-accept-tos" />
            <span>[Custom checkbox label text] <a href="https://customcheckbox.com" target="_blank">[link]</a></span>
        </label>
    </div>
    <div class="alert alert-lagom alert-xs alert-danger m-b-2x hidden">
        <div class="alert-body">
            [Alert Message]
        </div>
    </div> 
</div>

# Overwrites

The Lagom WHMCS Client Theme is made up of small elements that can be easily overwritten using the functions described below. The following functionality is completely safe and your changes will not be overwritten by future Lagom product updates. However you need to remember to compare and merge changes from latest Lagom release as described in "Customization Compatibility"

# Overwrite Theme Elements

You can find a list of files that can be overwritten below.

all files located in /templates/lagom2/includes/
all files located in /templates/lagom2/store/
/templates/lagom2/markdown-guide.tpl
/templates/lagom2/supportticketsubmit-customfields.tpl
/templates/lagom2/supportticketsubmit-kbsuggestions.tpl
/templates/lagom2/twitterfeed.tpl
/templates/lagom2/viewemail.tpl

To overwrite any other file located in /templates/lagom2/ and /templates/orderforms/lagom2/ , you need to create Page Template.

In order to overwrite one of the above files, refer to the following instruction:

Log in to FTP/SFTP of your WHMCS server.
Find a file that you want to overwrite and create the overwrites folder in its location.
Go to the newly added folder and create a new file with the same name as the original file that should be overwritten. For example, if you want to overwrite the /templates/lagom2/viewemail.tpl file, then the location of the overwritten file should be /templates/lagom2/overwrites/viewemail.tpl.
Open a file that you wish to modify and copy its code between {else} and {/if} tags.

Paste this code to your overwritten file and make all needed modifications.

# Overwrite Theme Pages

To overwrite any other file located in /templates/lagom2/ and /templates/orderforms/lagom2/ , you need to create Page Template.

To overwrite any layout, you ned to follow below documentation articles:

# Overwrite SVG Graphic

If you decide to overwrite any of existing Lagom WHMCS Client theme SVG icon or illustration, you have the ability to do so. You can overwrite these files, by creating custom folder in one of these locations:

/templates/lagom2/assets/svg-icon
/templates/lagom2/assets/svg-illustrations

For example if you'd like to overwrite /templates/lagom2/assets/svg-icon/article.tpl file, you need to create /templates/lagom2/assets/svg-icon/custom/article.tpl file. Remember that all Lagom icons and illustrations are included in our theme as "SVG Code", that's why created file need to have .tpl extension.

# Output Hooks

WHMCS delivers the possibility to include the custom code in different locations using WHMCS hooks (opens new window), for example:

Client Area Head Output (opens new window) - executes when the client area page is being output. Click on the link to see a list of template variables common to all pages. Additional variables will vary depending on the page being rendered.
Client Area Header Output (opens new window) - executes when the client area page is being output. Click on the link to see a list of template variables common to all pages. Additional variables will vary depending on the page being rendered.
Client Area Footer Output (opens new window) - executes when the client area page is being output. Click on the link to see a list of template variables common to all pages. Additional variables will vary depending on the page being rendered.
Shopping Cart Checkout Output (opens new window) - allows you to return the output for display on the Shopping Cart Checkout page.
Shopping Cart View Cart Output (opens new window) - allows you to return the output for display on the Shopping Cart View Cart page.
See full output hooks list in WHMCS documentation (opens new window).

← How To Start Customize Existing Page →