Includes & Overwrites

• Includes
  • Custom CSS File
  • Custom Payment Icons
  • Custom Language Flag Image
  • Custom Code in Navigation
  • Custom Code in Footer
  • Custom (Local) Font Face
  • Custom Checkout Checkboxes in View Cart
• Overwrites
  • Overwrite Theme Elements
  • Overwrite Theme Pages
  • Overwrite Navigation Layout
  • Overwrite SVG Graphic
• 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. This option is completely safe and will not be overwritten by future Lagom WHMCS Client Theme updates.

Style Manager is equipped with the functionality to add Custom CSS rules via the RS Themes addon without the necessity to create a CSS file manually.

1. Log in to FTP/SFTP of your WHMCS server.
2. 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.
3. 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:

1. Log in to FTP/SFTP of your WHMCS server.
2. Proceed to /templates/lagom2/assets/img/ and create the gateways folder.
3. 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.
4. 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).

In order to assign your new language flag to a custom language, refer to the following steps:

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

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

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

Custom Code in Navigation

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.

1. Log in to FTP/SFTP of your WHMCS server.
2. 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.
3. Create a new file header.tpl and insert the needed code.

Custom Code in Footer

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.

1. Log in to FTP/SFTP of your WHMCS server.
2. 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.
3. 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 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.

1. Find your font and click "Download Family" button.
2. Visit Transfonter (opens new window), upload previously downloaded fonts, and click "Convert" button.
3. Extract zip file, which has been downloaded on your computer.
4. Upload each .woff file to /templates/lagom2/assets/fonts/open-sans on your WHMCS server.
5. Create theme-custom.css file based on this article.
6. Copy the CSS code from stylesheet.css file available in the fonts folder, but remember to correct the URLs to the font files by addin ../../../../../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;
}

7. Enter Open Sans name in "Use Custom Font" 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

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

Create Confirmation Box Code

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

1. 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>

2. 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>

3. 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>

4. 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:

1. Log in to FTP/SFTP of your WHMCS server.
2. Find a file that you want to overwrite and create the overwrites folder in its location.
3. 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.
4. Open a file that you wish to modify and copy its code between {else} and {/if} tags.

5. 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.

Overwrite Navigation Layout

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

• Create Menu Layout
• Create Footer Layout

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).