Before purchasing or installing Flare theme for WHMCS, please ensure that you have purchased and installed the latest version of the WHMCS software.
Please follow the instructions below to download and install the latest version of Flare theme.
To download the latest version of Flare Theme, please follow the steps below:
In order to install Flare Theme on your server, you will need to use an FTP client (such as FileZilla) to connect to your server.
After downloading and extracting the Flare Theme product zip file, you will find the following directories:
Using your FTP client, upload the flare directory to the following location on your server:
/your-whmcs-install-location/templates/
&nsbp;
Using your FTP client, upload the flare_compare, flare_standard and flare_slider directories from the orderforms directory to the following location on your server:
/your-whmcs-install-location/templates/orderforms/
This step is only necessary if you are using any of the following third party addons/modules:
To install the matching theme/template for the Official WHMCS Project Management Addon using your FTP client, upload the flare directory from the third party addons / project management addon directory to the following location on your server:
/your-whmcs-install-location/modules/addons/project_management/templates/
To add the DNS Manager link the primary navigation, you need to upload the included hook file (hook_primary_nav_add_manage_dns.php) which can be found in the Flare theme download zip file (in the third party addons folder) to the following location:
/your-whmcs-install-location/includes/hooks/
Flare theme folder. Find the template files in the Domain Orders Extended download zip in the following folder:
…your php version…/templates/six/
Upload them to:
/your-whmcs-install-location/templates/flare/
Please follow the instructions below to activate and begin using Flare theme.
Log in to the WHMCS admin area and follow the instructions below to activate Flare theme:
Follow the steps below to activate the matching Flare order form template:
Follow the additional optional steps below if you want to apply a specific order form template, such as Flare Compare or Flare Slider, to a particular product group:
The upgrade process varies depending on whether or not you have made any changes or customisations to any of the theme files (including theme-options.tpl, custom.css or any other theme files).
If you have not changed or customized any of the theme files, you can simply download the latest version of the theme files from our website and upload them to your web server, overwriting the previous version of the theme files.
For details of how to download and install the theme files, please follow steps 1 and 2 of the installation instructions section above.
If you have made changes or customizations to any of the theme files, the following upgrade process is recommended.
To download the latest version of Flare Theme, please follow the steps below:
Please refer to the Flare theme release notes and changelog to identify which theme files have been changed/updated since your installed version. If more than one new version has been released since you last installed or updated your current version, you will need to check the release notes and changelog for each subsequent version to identify all the files that need updating.
After you have identified which files need updating, you will then need to update each file individually.
For each file that needs updating, check whether or not you have edited or customized the installed version of that particular file. If you’re not sure, you can use an online tool such as diffchecker.com to compare the original version and the version on your server to check for any differences.
If you haven’t edited/customized the file in question, you can simply upload the new version of the file to the relevant location on your server, overwriting the existing file.
If you have edited/customized the file in question, you will need to either upload the new version of the file and re-apply any edits/customizations, or manually apply any changes in the new version to your existing edited/customized version of the file (see the release notes and changelog for details of file changes in the new version). Which method you choose will depend on the amount of changes in the new version of the file and how extensively you have edited/customized the original file. You will most likely want to choose the method which results in the least required work.
Flare theme includes the following configurable theme options:
These options can be configured by editing the theme-options.tpl file located within the includes directory, in the main flare theme directory, in accordance with the instructions below.
Flare theme can be configured to display either an image logo or brand text in the main nav bar, or neither (a useful option if you are including Flare theme within your own website template). Additional options also allow you to you enable or disable the display of the following elements:
This option allows you to specify whether or not the brand (either text or image based logo can be configured by subsequent options) is displayed in the main navbar and can be changed by editing line 25 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itBrandDisplay.
For example:
{assign var=itBrandDisplay value="enabled" scope="global"}
or:
{assign var=itBrandDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to specify the type of brand to be displayed in the navbar, either text or an image based logo. This option can be changed by editing line 28 in the theme-options.tpl file, specifying a value of either text or logo for the variable itBrandType.
For example:
{assign var=itBrandType value="text" scope="global"}
or:
{assign var=itBrandType value="logo" scope="global"}
If no value is specified, the default behaviour is text.
In order to use an image based logo, after specifying the value logo on line 31 (as described above), please provide the url path to your logo image by specifying a value for the variable itBrandLogoUrl on line 26 in the theme-options.tpl file.
For example:
{assign var=itBrandLogoUrl value="http://www.yoursite.com/logo.png" scope="global"}
Please note: the maximum recommended image height is 30px.
If you choose to use brand text rather than an image based logo, you can also provide optional custom text by specifying a value for the variable itBrandText on line 34 in the theme-options.tpl file.
For example:
{assign var=itBrandText value="My Company Name" scope="global"}
Please note: if you choose to use brand text, but do not specify a value for the variable itBrandText the company name, as specified in the WHMCS admin area, will be used.
This option allows you to specify whether or not the breadcrumb trail (showing the navigational path to the current page) is displayed below the main navbar. This option can be changed by editing line 37 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itBreadcrumbDisplay.
For example:
{assign var=itBreadcrumbDisplay value="enabled" scope="global"}
or:
{assign var=itBreadcrumbDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to specify whether or not the shopping cart icon (along with a label showing the current number if items in the shopping cart) is displayed in the main navbar on larger screen sizes (such as desktop or laptop computers). This option can be changed by editing line 40 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itCartIconDisplayDesktop.
For example:
{assign var=itCartIconDisplayDesktop value="enabled" scope="global"}
or:
{assign var=itBreadcrumbDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
You can also specify whether or not the shopping cart icon is displayed in the main navbar on smaller screen sizes (such as mobile or tablet devices). This option can be changed by editing line 43 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itCartIconDisplayMobile.
For example:
{assign var=itCartIconDisplayMobile value="enabled" scope="global"}
or:
{assign var=itCartIconDisplayMobile value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to specify whether or not the notifications icon (along with popover notifications list) is displayed to logged-in users in the main navbar on larger screen sizes (such as desktop or laptop computers). This option can be changed by editing line 46 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itNotificationsIconDisplayDesktop.
For example:
{assign var=itNotificationsIconDisplayDesktop value="enabled" scope="global"}
or:
{assign var=itNotificationsIconDisplayDesktop value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
You can also specify whether or not the notifications icon (along with popover notifications list) is displayed to logged-in users in the main navbar on smaller screen sizes (such as mobile or tablet devices). This option can be changed by editing line 49 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itNotificationsIconDisplayMobile.
For example:
{assign var=itNotificationsIconDisplayMobile value="enabled" scope="global"}
or:
{assign var=itNotificationsIconDisplayMobile value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to specify whether or not the language icon (along with popover language list) is displayed (when language change is enabled) in the main navbar on larger screen sizes (such as desktop or laptop computers). This option can be changed by editing line 52 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itLanguageIconDisplayDesktop.
For example:
{assign var=itLanguageIconDisplayDesktop value="enabled" scope="global"}
or:
{assign var=itLanguageIconDisplayDesktop value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
You can also specify whether or not the language icon (along with popover languages list) is displayed (when language change is enabled) in the main navbar on smaller screen sizes (such as mobile or tablet devices). This option can be changed by editing line 55 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itLanguageIconDisplayMobile.
For example:
{assign var=itLanguageIconDisplayMobile value="enabled" scope="global"}
or:
{assign var=itLanguageIconDisplayMobile value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
You can also choose to display the language icon (along with popover languages list) in the footer, either instead of or in addition to the navbar language icon. This can be a useful way to create more space in the main nabber if you have a large company name / logo, or additional navbar menu options, or if you simply want a less cluttered navbar. When this option is enabled the language icon will be displayed in the bottom right hand corner of the website footer, and applies to all screen sizes / devices.
This option can be changed by editing line 58 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itLanguageIconDisplayFooter.
For example:
{assign var=itLanguageIconDisplayFooter value="enabled" scope="global"}
or:
{assign var=itLanguageIconDisplayFooter value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
Flare theme allows you to specify whether or not the client area sidebar menus are displayed using the following options.
More information on client area sidebar menus (introduced in WHMCS version 6.0), including how to edit the menu content, can be found in the WHMCS documentation on the WHMCS website here.
If neither the primary or secondary sidebar is shown, the main content panel will automatically increase in size to use up the empty space.
This option allows you to choose whether or not the client area primary sidebar is displayed throughout your website. This option applies to all screen sizes / devices and can be changed by editing line 63 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itPrimarySidebar.
For example:
{assign var=itPrimarySidebar value="enabled" scope="global"}
or:
{assign var=itPrimarySidebar value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the client area secondary sidebar is displayed throughout your website. This option applies to all screen sizes / devices and can be changed by editing line 66 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itSecondarySidebar.
For example:
{assign var=itSecondarySidebar value="enabled" scope="global"}
or:
{assign var=itSecondarySidebar value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
Flare Theme includes five pre-defined color schemes: blue; cyan; orange; red; and green. You can also specify your own custom color scheme, and choose between a fixed width or fluid width layout
The color scheme and layout method can be specified using the options below.
A color scheme can be selected by specifying a value for the variable itColorScheme on line 71 in the theme-options.tpl file.
Acceptable values are: blue; cyan; orange; red; and green.
For example:
{assign var=itColorScheme value="blue" scope="global"}
or:
{assign var=itColorScheme value="cyan" scope="global"}
or:
{assign var=itColorScheme value="orange" scope="global"}
or:
{assign var=itColorScheme value="red" scope="global"}
or:
{assign var=itColorScheme value="green" scope="global"}
or:
{assign var=itColorScheme value="custom" scope="global"}
Please note: if you do not specify a color scheme, the default blue color scheme will be used.
If the custom value is specified, you must provide the name of the custom style-sheet to use in option 3.2 (see below).
The custom value was introduced in version 1.1.0.
If you have entered the value custom for option 3.1 (see above), you can use this option to define the name of your custom style-sheet, by entering the name as the value for the variable itColorSchemeCustomName on line 74 in the theme-options.tpl file.
You should enter the name of your custom style-sheet without the file extension (.css), for example if you custom style-sheet is called my-custom-style-sheet.css / my-custom-style-sheet.min.css you should enter my-custom-style-sheet.
Your custom style-sheet must be uploaded to the flare/css/ directory. You must upload both a minified and non minified version of your style-sheet, both should have the same name, but the minified version should finish with .min.css (eg. em>my-custom-style-sheet.css / my-custom-style-sheet.min.css).
For example:
{assign var=itColorSchemeCustomName value="my-custom-style-sheet" scope="global"}
You can specify whether the inner navbar content has a fluid width (expands automatically to take up the available browser space) or fixed width (boxed) by specifying a value for itLayoutNav on line 77 in the theme-options.tpl file.
Acceptable values are: fluid; and fixed.
For example:
{assign var=itLayoutNav value="fluid" scope="global"}
or:
{assign var=itLayoutNav value="fixed" scope="global"}
Please note: if you do not specify a layout method, the default fluid width will be used.
This option was introduced in Flare WHMCS Theme version 1.0.2. Prior to version 1.0.2, the default fluid width layout was used.
You can specify whether the main content has a fluid width (expands automatically to take up the available browser space) or fixed width (boxed) by specifying a value for itLayoutBody on line 80 in the theme-options.tpl file.
Acceptable values are: fluid; and fixed.
For example:
{assign var=itLayoutBody value="fluid" scope="global"}
or:
{assign var=itLayoutBody value="fixed" scope="global"}
Please note: if you do not specify a layout method, the default fluid width will be used.
This option was introduced in Flare WHMCS Theme version 1.0.2. Prior to version 1.0.2, the default fluid width layout was used.
The following options allow you to define whether minified or full versions of the main theme and order form template JavaScript and CSS files are loaded. We would always recommend using minified versions for day to day use, but it can be useful to useful to load the full versions for customization/testing purposes.
These options were introduced in Flare theme version 2.1.0.
You can enable to disable the use of minified CSS by editing line 85 of the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itCSSMin.
For example:
{assign var=itCSSMin value="enabled" scope="global"}
or:
{assign var=itCSSMin value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
You can enable to disable the use of minified JS by editing line 88 of the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itJSMin.
For example:
{assign var=itJSMin value="enabled" scope="global"}
or:
{assign var=itJSMin value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
Flare theme also includes a debug option which can be used to provide useful information on theme options and function variables for development and trouble-shooting purposes.
Theme debug mode can be enabled or disabled by editing line 93 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itThemeDebug.
For example:
{assign var=itThemeDebug value="enabled" scope="global"}
or:
{assign var=itThemeDebug value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
Each order form / shopping cart template also has a number of configurable options.
These can be configured by editing the cart-options.tpl file in the relevant order form template folder.
The Flare Standard order form template has a number of configurable options which apply to all included order form pages, unless specified otherwise.
This option allows you to choose whether or not the sidebar is displayed on all order form / cart pages. This option applies to large screen sizes / desktop devices and can be changed by editing line 24 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarDisplay.
For example:
{assign var=itCartSidebarDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the sidebar is displayed on all order form / cart pages. This option applies to small screen sizes / mobile devices and can be changed by editing line 27 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarMobileDisplay.
For example:
{assign var=itCartSidebarMobileDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarMobileDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the product categories dropdown menu and view cart button are shown at the top of the view products and view addons pages. This is a useful alternative way of linking to the various product categories and view cart page if you decide to disable the cart sidebar. This option can be configured by editing line 32 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartProductsButton.
For example:
{assign var=itCartProductsButton value="enabled" scope="global"}
or:
{assign var=itCartProductsButton value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not to enable auto scrolling for the order summary panel on the configure product page (i.e. the order summary panel scrolls along with the page). This option can be configured by editing line 37 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartScrollProductSummary.
For example:
{assign var=itCartScrollProductSummary value="enabled" scope="global"}
or:
{assign var=itCartScrollProductSummary value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the currency chooser button is shown at the bottom of relevant pages (when applicable). This is a useful alternative way of allowing users to change currency if you decide to disable the cart sidebar. This option can be configured by editing line 42 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartCurrencyChooser.
For example:
{assign var=itCartCurrencyChooser value="enabled" scope="global"}
or:
{assign var=itCartCurrencyChooser value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
The Flare order form templates make use of the iCheck plugin to customise the display of checkbox and radio inputs, using the iCheck Flat skin. The plugin allows you to choose from a number of predefined color schemes. By default, the Flare order form templates will use either blue, red, orange, cyan or green, depending on which overall color scheme you have chosen in the main theme options, however you may wish to choose a different color scheme, for example if you have customised the theme to use your own color scheme.
This option can be changed by editing line 47 in the cart-options.tpl file, specifying a value of either default, black, grey, red, orange, green, yellow, blue, pink, aero or purple for the variable itCartiCheckColor.
For example:
{assign var=itCartiCheckColor value="default" scope="global"}
or:
{assign var=itCartiCheckColor value="grey" scope="global"}
If no value is specified, the default behaviour is default.
This option allows you to choose the number of products shown per row on the view products page, choosing between 1 and 4 products per row.
This option can be changed by editing line 52 in the cart-options.tpl file, specifying a value of either 1, 2, 3 or 4 for the variable itCartNumberProductsPerRow.
For example:
{assign var=itCartNumberProductsPerRow value="1" scope="global"}
or:
{assign var=itCartNumberProductsPerRow value="2" scope="global"}
If no value is specified, the default behaviour is 1.
This option was introduced in Flare theme version 2.2.0.
This option allows you to choose the number of addons shown per row on the view available addons page, choosing between 1 and 4 addons per row.
This option can be changed by editing line 55 in the cart-options.tpl file, specifying a value of either 1, 2, 3 or 4 for the variable itCartNumberAddonsPerRow.
For example:
{assign var=itCartNumberAddonsPerRow value="1" scope="global"}
or:
{assign var=itCartNumberAddonsPerRow value="2" scope="global"}
If no value is specified, the default behaviour is 1.
This option was introduced in Flare theme version 2.2.0.
This option allows you to choose whether or not to enable auto scrolling for the order summary panel on the domain renewal page (i.e. the order summary panel scrolls along with the page). This option can be configured by editing line 60 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartScrollRenewalSummary .
For example:
{assign var=itCartScrollRenewalSummary value="enabled" scope="global"}
or:
{assign var=itCartScrollRenewalSummary value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option was introduced in Flare theme version 2.6.0.
The Flare Compare order form template has its own cart-options.tpl file, however these options will only apply to the Flare Compare view products page. This is because Flare Compare is a child template of the Flare Standard order form template, and all other cart pages are handled by the Flare Standard template.
This option allows you to choose whether or not the sidebar is displayed. This option applies to large screen sizes / desktop devices and can be changed by editing line 24 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarDisplay.
For example:
{assign var=itCartSidebarDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the sidebar is displayed. This option applies to small screen sizes / mobile devices and can be changed by editing line 27 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarMobileDisplay.
For example:
{assign var=itCartSidebarMobileDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarMobileDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the product categories dropdown menu and view cart button are shown at the top of the view products page. This is a useful alternative way of linking to the various product categories and view cart page if you decide to disable the cart sidebar. This option can be configured by editing line 32 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartProductsButton.
For example:
{assign var=itCartProductsButton value="enabled" scope="global"}
or:
{assign var=itCartProductsButton value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the currency chooser button is shown at the bottom of the page (when applicable). This is a useful alternative way of allowing users to change currency if you decide to disable the cart sidebar. This option can be configured by editing line 37 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartCurrencyChooser.
For example:
{assign var=itCartCurrencyChooser value="enabled" scope="global"}
or:
{assign var=itCartCurrencyChooser value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose the number of products shown per row on the view products page, choosing between 1 and 6 products per row.
This option can be changed by editing line 42 in the cart-options.tpl file, specifying a value of either 1, 2, 3, 4, 5 or 6 for the variable itCartNumberProductsPerRow.
For example:
{assign var=itCartNumberProductsPerRow value="1" scope="global"}
or:
{assign var=itCartNumberProductsPerRow value="2" scope="global"}
If no value is specified, the default behaviour is 1.
This option was introduced in Flare theme version 2.2.0.
The Flare Slider order form template has its own cart-options.tpl file, however these options will only apply to the Flare Slider view products page. This is because Flare Slider is a child template of the Flare Standard order form template, and all other cart pages are handled by the Flare Standard template.
This option allows you to choose whether or not the sidebar is displayed. This option applies to large screen sizes / desktop devices and can be changed by editing line 24 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarDisplay.
For example:
{assign var=itCartSidebarDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the sidebar is displayed. This option applies to small screen sizes / mobile devices and can be changed by editing line 27 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartSidebarMobileDisplay.
For example:
{assign var=itCartSidebarMobileDisplay value="enabled" scope="global"}
or:
{assign var=itCartSidebarMobileDisplay value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the product categories dropdown menu and view cart button are shown at the top of the view products page. This is a useful alternative way of linking to the various product categories and view cart page if you decide to disable the cart sidebar. This option can be configured by editing line 32 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartProductsButton.
For example:
{assign var=itCartProductsButton value="enabled" scope="global"}
or:
{assign var=itCartProductsButton value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
This option allows you to choose whether or not the currency chooser button is shown at the bottom of the page (when applicable). This is a useful alternative way of allowing users to change currency if you decide to disable the cart sidebar. This option can be configured by editing line 37 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartCurrencyChooser.
For example:
{assign var=itCartCurrencyChooser value="enabled" scope="global"}
or:
{assign var=itCartCurrencyChooser value="disabled" scope="global"}
If no value is specified, the default behaviour is disabled.
All of our code is fully open, unencrypted and editable, meaning that should for any reason our products provided as are do not suit your exact requirements, you are free to customise the code as necessary. Whilst you are perfectly welcome to do this, please note that our support team is unable to provide support or assistance with this process. We are only able to provide assistance with the installation, configuration and use of our products as provided in accordance with our theme documentation.
There are two recommended methods for applying CSS customizations. By following one of these methods, it will be easier to upgrade to future versions of the theme.
If you are only making minor changes/edits to the theme CSS, the easiest method is to add these to the custom.css file, located at flare/css/custom.css. The custom.css file is loaded after the main theme CSS files, so any styles defined in this file will override the styles defined in the main theme files.
By defining your custom styles in the custom.css file, rather than directly editing any of the main theme stylesheets, when you next apply a theme update which includes updated versions of the main CSS file, you can simply upload these updated files without worrying about overwriting any changes/edits you have made.
If you are making major changes/edits to the theme CSS, it is recommended to duplicate one of the existing main theme CSS files, such as flare-default.css or flare-green.css and make your changes in the duplicated file. You can then use options 3.1 and 3.2 in the theme-options.tpl file to load your customized style-sheet rather than any of the pre-defined styles.
Please note that when using this method, you will need to manually apply any style-sheet updates included in future theme upgrades to your custom style-sheet, if appplicable.
If you can’t find a solution to your problem in this theme documentation or our frequently asked questions, please open a support ticket to request technical support.
Theme Version | Release Date | WHMCS Version Compatibility | Release Notes |
---|---|---|---|
2.23.0 | 23 September 2024 | 8.11.0-8.11.1 | Release Notes
|
2.22.0 | 27 April 2024 | 8.10.0-8.10.1 | Release Notes
|
2.21.0 | 13 March 2024 | 8.9.0 | Release Notes
|
2.20.1 | 24 October 2023 | 8.8.0 | Release Notes
|
2.20.0 | 26 September 2023 | 8.8.0 | Release Notes
|
2.19.1 | 4 May 2023 | 8.7.2 | Release Notes
|
2.19.0 | 26 March 2023 | 8.7.0-8.7.1 | Release Notes
|
2.18.0 | 6 November 2022 | 8.6.0 | Release Notes
|
2.17.1 | 14 September 2022 | 8.5.0-8.5.1 | Release Notes
|
2.17.0 | 13 June 2022 | 8.5.0-8.5.1 | Release Notes
|
2.16.0 | 20 January 2022 | 8.4.0 | Release Notes
|
2.15.1 | 31 October 2021 | 8.3.1-8.3.2 | Release Notes
|
2.15.0 | 18 October 2021 | 8.3.0 | Release Notes
|
2.14.1 | 14 July 2021 | 8.2.1 | Release Notes
|
2.14.0 | 23 June 2021 | 8.2.0 | Release Notes
|
2.13.4 | 19 April 2021 | 8.1.2-8.1.3 | Release Notes
|
2.13.3 | 25 February 2021 | 8.1.2-8.1.3 | Release Notes
|
2.13.2 | 11 February 2021 | 8.1.1 | Release Notes
|
2.13.1 | 23 January 2021 | 8.1.0 | Release Notes
|
2.13.0 | 5 January 2021 | 8.1.0 | Release Notes
|
2.12.4 | 20 November 2020 | 8.0.1-8.0.4 | Release Notes
|
2.12.3 | 24 October 2020 | 8.0.0-8.0.1 | Release Notes
|
2.12.2 | 17 October 2020 | 8.0.1-8.0.3 | Release Notes
|
2.12.1 | 7 October 2020 | 8.0.1-8.0.3 | Release Notes
|
2.12.0 | 29 September 2020 | 8.0.0 | Release Notes
|
2.11.0 | 7 April 2020 | 7.10.0 - 7.10.2 | Release Notes
|
2.10.1 | 20 February 2020 | 7.9.2 | Release Notes
|
2.10.0 | 9 January 2020 | 7.9.0 | Release Notes
|
2.9.2 | 5 October 2019 | 7.8.0 - 7.8.3 | Release Notes
|
2.9.1 | 6 September 2019 | 7.8.0 - 7.8.3 | Release Notes
|
2.9.0 | 1 September 2019 | 7.8.0 - 7.8.1 | Release Notes
|
2.8.0 | 23 January 2019 | 7.7.0 - 7.7.1 | Release Notes
|
2.7.1 | 2 September 2018 | 7.6.0 - 7.6.1 | Release Notes
|
2.7.0 | 6 August 2018 | 7.6.0 - 7.6.1 | Release Notes
|
2.6.2 | 23 July 2018 | 7.5.0 - 7.5.2 | Release Notes
|
2.6.1 | 8 April 2018 | 7.5.0 - 7.5.2 | Release Notes
|
2.6.0 | 4 April 2018 | 7.5.0 - 7.5.2 | Release Notes
|
2.5.1 | 10 January 2018 | 7.4.0 - 7.4.3 | Release Notes
|
2.5.0 | 18 November 2017 | 7.4.0 - 7.4.3 | Release Notes
|
2.4.0 | 5 October 2017 | 7.3.0 - 7.3.1 | Release Notes
|
2.3.3 | 3 September 2017 | 7.2.2 - 7.2.3 | Release Notes
|
2.3.2 | 4 June 2017 | 7.2.2 - 7.2.3 | Release Notes
|
2.3.1 | 16 May 2017 | 7.2.0 - 7.2.1 | Release Notes
|
2.3.0 | 16 May 2017 | 7.2.0 - 7.2.1 | Release Notes
|
2.2.0 | 19 April 2017 | 7.1.0 - 7.1.2 | Release Notes
|
2.1.2 | 15 January 2017 | 7.1.0 - 7.1.2 | Release Notes
|
2.1.1 | 19 December 2016 | 7.1.0 - 7.1.2 | Release Notes
|
2.1.0 | 17 December 2016 | 7.1.0 - 7.1.2 | Release Notes
|
2.0.2 | 16 November 2016 | 7.0.1 - 7.0.2 | Release Notes
|
2.0.1 | 17 October 2017 | 7.0.1 - 7.0.2 | Release Notes
|
2.0.0 | 3 October 2016 | 7.0.0 | Release Notes
|
1.1.0 | 25 September 2016 | 6.3.1 | Release Notes
|
1.0.6 | 3 August 2016 | 6.3.1 | Release Notes
|
1.0.5 | 18 July 2016 | 6.3.1 | Release Notes
|
1.0.4 | 14 July 2016 | 6.3.1 | Release Notes
|
1.0.3 | 25 May 2016 | 6.3.1 | Release Notes
|
1.0.2 | 24 May 2016 | 6.3.1 | Release Notes
|
1.0.1 | 21 April 2016 | 6.3.1 | Release Notes
|
1.0.0 | 8 April 2016 | 6.3.0 | Release Notes
|