# Includes & Overwrites

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 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 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 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's 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(../img/flags/[flag_name].svg);
}
  1. Replace [flag_name] with filename, which has been uploaded in step 3.
  2. 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.

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 "Roboto" from Font Squirrel, and include this font and its files manually to Lagom WHMCS Client Theme.

  1. Go to "Font Squirrel (opens new window) and open "Roboto" (opens new window) font.
  2. Click "Webfont Kit" tab, and click on "Download @font-face kit" .
  3. Exctract roboto-fontfacekit.zip file, which has been downloaded on your computer.
  4. Choose styles which you want to use, by default Lagom use Light, Regular, Medium, Bold and Black.
  5. Upload each .woff file to /templates/lagom2/assets/fonts/roboto on your WHMCS server.
  1. Create theme-custom.css file based on this article.
  2. Add below code for each of the Roboto style to theme-custom.css file:
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../../../../assets/fonts/roboto/Roboto-Light-webfont.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../../../assets/fonts/roboto/Roboto-Regular-webfont.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../../../../../assets/fonts/roboto/Roboto-Medium-webfont.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../../../../assets/fonts/roboto/Roboto-Bold-webfont.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../../../../../assets/fonts/roboto/Roboto-Black-webfont.woff) format('woff');
}
  1. Now you need to apply the new fotn face into the theme, add below code at the end of theme-custom.css file. Remember that the Roboto font name need to be replaced if you're using different font family.
--font-family-base:                             Roboto;

# Overwrites

The Lagom 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
  • /templates/lagom2/whois.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.
  1. 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 fallow below docmentation 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 overwirte 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: