How to fix layout after enabling SEO friendly URLs in WHMCS
In this tutorial I’ll show you how to fix the common broken WHMCS template issue when enabling SEO friendly URLs in WHMCS. This tutorial is specific to our WHMCS themes but will be similar for any templates.
Why does the error occur?
The error occours because when you enable SEO friendly URLs there is a automatically folder structure applied to all knowledgebase articles & announcements. e.g /announcement.php/keyword/keyword-keywords.html. What this does is make the lines of code that calls the Javascript and CSS invalid which is why when you load your website the content is still there but the style is missing.
Why don’t you include a fix by default?
The reason for this is because the correct file location to use will depend on whether you have WHMCS installed in root or in a directory. Also 90% of users do not enable this feature so we decided it’s best to create this article to cater for those that do.
How to fix it
Follow the guide based on your install location:
WHMCS installed in root
Open the following file:
/templates/YOUR_TEMPLATE/header.tpl
find the following code:
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/whmcs.css" />
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/template.css" />
and add a / to the beginning of each file location as so:
<link rel="stylesheet" type="text/css" href="/templates/{$template}/css/whmcs.css" />
<link rel="stylesheet" type="text/css" href="/templates/{$template}/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/templates/{$template}/css/template.css" />
The / represents the public_html folder so no matter which URL structure is used the file location will always be correct.
WHMCS installed in sub-directory
I’ll this guide we’ll assume that WHMCS is installed in /public_html/clients/ (could represent clients.domain.com or domain.com/clients/)
Open the following file:
/templates/YOUR_TEMPLATE/header.tpl
find the following code:
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/whmcs.css" />
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="templates/{$template}/css/template.css" />
and add a / to the beginning of each file location as so:
<link rel="stylesheet" type="text/css" href="/clients/templates/{$template}/css/whmcs.css" />
<link rel="stylesheet" type="text/css" href="/clients/templates/{$template}/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/clients/templates/{$template}/css/template.css" />
The / represents the public_html & together with clients represents the /public_html/clients/ folder so no matter which URL structure is used the file location will always be correct.
