Support Center

Theme requirements

Before purchasing or installing Control theme for WHMCS, please ensure that you have purchased and installed the latest version of the WHMCS software.

Installation instructions

Please follow the instructions below to download and install the latest version of Control theme.

Step 1: download Control theme

To download the latest version of Control Theme, please follow the steps below:

1. Log in to My Account
2. Select Account Overview from the My Account menu
3. Scroll down the Account Overview page to the My Products section and select Control WHMCS Theme from the list of available products
4. Scroll down the Control WHMCS Theme page to the Product Downloads section
5. Choose the version of the theme you would like to download (we would always recommend using the latest available version of Control Theme) and click the download button
6. Extract the contents of the downloaded zip file on your computer

Step 2: install Control theme

In order to install Control 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 Control Theme product zip file, you will find the following directories:

• control – contains the main Control WHMCS theme files
• orderforms – contains the matching Control order form / shopping cart templates:
  • control_alternative_compare – contains the matching Control order form template – alternative style comparison product selection version
  • control_alternative_slider – contains the matching Control order form template – alternative style slider product selection version
  • control_alternative_standard – contains the matching Control order form template – alternative style standard product selection version
  • control_compare – contains the matching Control order form template – original style comparison product selection version
  • control_outline_compare – contains the matching Control order form template – outline style comparison product selection version<
  • control_outline_slider – contains the matching Control order form template – outline style slider product selection version
  • control_outline_standard – contains the matching Control order form template – outline style standard product selection version
  • control_slider – contains the matching Control order form template – original style slider product selection version
  • control_standard – contains the matching Control order form template – original style standard product selection version
• third party addons – contains compatible themes / templates for various third party addons, including:
  • project management addon – contains the matching template for the official WHMCS Project Management addon

Step 2.1: install the main theme files

Using your FTP client, upload the control directory to the following location on your server:

/your-whmcs-install-location/templates/

Step 2.2: install the order form theme/template files

Using your FTP client, upload the control_alternative_compare, control_alternative_slider, control_alternative_standard, control_compare, control_outline_compare, control_outline_slider, control_outline_standard, control_standard and control_slider directories from the orderforms directory to the following location on your server:

/your-whmcs-install-location/templates/orderforms/

Step 2.3: install any relevant third party theme/template files

This step is only necessary if you are using any of the following third party addons/modules:

• Official WHMCS Project Management Addon
• Modules Garden DNS Manager

Official WHMCS Project Management Addon

To install the matching theme/template for the Official WHMCS Project Management Addon using your FTP client, upload the control 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/

Modules Garden DNS Manager

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 Control theme download zip file (in the third party addons folder) to the following location:

/your-whmcs-install-location/includes/hooks/

Step 3: activate Control theme

Please follow the instructions below to activate and begin using Control theme.

Step 3.1: activate the main client area theme

Log in to the WHMCS admin area and follow the instructions below to activate Control theme:

1. Navigate to Setup > General Settings
2. On the General tab, scroll down to the Template option
3. Select Control from the list of available themes
4. Click the Save Changes button at the bottom of the page

Step 3.2: activate the matching order form template(s)

Follow the steps below to activate the matching Control order form template:

1. Navigate to Setup > General Settings
2. Navigate to the Ordering tab, scroll down to the Default Order Form Template option
3. Select Control Standard, or your preferred Control order form template, from the list of available order form templates
4. Click the Save Changes button at the bottom of the page

Follow the additional optional steps below if you want to apply a specific order form template, such as Control Compare or Control Slider, to a particular product group:

1. Navigate to Setup > Products/Services > Products/Services
2. Click the edit button next to the product group you wish to apply a custom template to
3. Scroll down to the Order Form Template option and select Use Specific Template
4. Select the order form template you wish to use from the list of available order form templates
5. Click the Save Changes button at the bottom of the page

Upgrade instructions

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.

Step 1: download Control theme

To download the latest version of Control Theme, please follow the steps below:

1. Log in to My Account
2. Select Account Overview from the My Account menu
3. Scroll down the Account Overview page to the My Products section and select Control WHMCS Theme from the list of available products
4. Scroll down the Control WHMCS Theme page to the Product Downloads section
5. Choose the version of the theme you would like to download (we would always recommend using the latest available version of Control Theme) and click the download button
6. Extract the contents of the downloaded zip file on your computer

Step 2: check which files need updating

Please refer to the Control 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.

Step 3: update required files

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.

Configurable theme options

Control theme includes the following configurable theme options:

• Main navbar and brand display options – including breadcrumb display options
• Sidebar options
• Color scheme / style options
• Text / layout direction options
• Resource Minification options
• Theme debug options

These options can be configured by editing the theme-options.tpl file located within the includes directory, in the main control theme directory, in accordance with the instructions below.

Main navbar and brand display options

Control 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 Control theme within your own website template). Additional options also allow you to you enable or disable the display of the following elements:

• Breadcrumbs
• Shopping cart icon
• Notifications icon
• Language icon

Option 1.1: enable or disable navbar brand display

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.

Option 1.2: specify navbar brand type

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.

Option 1.3: specify the navbar brand logo url (if applicable)

In order to use an image based logo, after specifying the value logo on line 24 (as described above), please provide the url path to your logo image by specifying a value for the variable itBrandLogoUrl on line 31 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.

Option 1.4: specify navbar brand custom text (if applicable)

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.

Option 1.5: enable or disable breadcrumb display

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.

Option 1.6: enable or disable cart icon display on desktop view

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.

Option 1.7: enable or disable cart icon display on mobile view

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.

Option 1.8: enable or disable notifications icon display on desktop view

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.

Option 1.9: enable or disable notifications icon display on mobile view

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.

Option 1.10: enable or disable navbar language icon display on desktop view

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.

Option 1.11: enable or disable navbar language icon display on mobile view

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

Option 1.12: enable or disable footer language icon display

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

Option 1.13: enable or disable main nav display for guests (non-logged in users)

You can choose whether or not to display the primary WHMCS navigation (in the left sidebar) for non-logged in users. If this option is enabled, the WHMCS primary navigation for non-logged in users will be shown. If this option is disabled, no navigation menu will be shown, and the left sidebar and navigation toggle option will also not be displayed.

This option does not have any impact on primary WHMCS navigation display for logged in users, which will always be shown.

This option can be changed by editing line 61 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itGuestNavDisplay.

For example:

{assign var=itGuestNavDisplay value="enabled" scope="global"}

or:

{assign var=itGuestNavDisplay value="disabled" scope="global"}

If no value is specified, the default behaviour is enabled.

Option 1.14: specify the main navigation default state (full or minimized)

You can the define the default display state for the primary WHMCS navigation (in the left sidebar) to be either full (icon and text for each top level menu item) or minimised (icon only for each top level menu item).

This option can be changed by editing line 64 in the theme-options.tpl file, specifying a value of either full or mini for the variable itMainNavDefaultState.

For example:

{assign var=itMainNavDefaultState value="full" scope="global"}

or:

{assign var=itMainNavDefaultState value="mini" scope="global"}

If no value is specified, the default behaviour is full.

This option was introduced in version 1.3.0. Prior to 1.3.0, the default display state was always full.

Option 1.15: remember the main nav display state between pages

If enabled, the main nav display state, either full or mimimized – as set by the end user by clicking the toggle button in the main nav bar, will be remembered between pages. If this option is not enabled, the display state will return to the default state (as defined in option 1.14) with each page load.

This option can be changed by editing line 67 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itMainNavSaveState.

For example:

{assign var=itMainNavSaveState value="enabled" scope="global"}

or:

{assign var=itMainNavSaveState value="disabled" scope="global"}

If no value is specified, the default behaviour is enabled.

This option was introduced in version 1.3.0. Prior to 1.3.0, the display state was not remembered between pages.

Option 1.16: specify whether or not to automatically minimize the main nav on cart pages

You can choose whether or not to automatically minimize the primary WHMCS navigation (in the left sidebar) on cart pages. If this option is enabled, the main nav display state will automatically be set to minimized on all cart pages, regardless of the default state (defined in option 1.14) or the saved state (if option 1.15 is enabled). This will only impact cart pages (such as view products, view addons, register domain, configure domain, configure product, view cart and checkout). This is to minimize distraction during the ordering/checkout process.

This option can be changed by editing line 70 in the theme-options.tpl file, specifying a value of either enabled or disabled for the variable itMainNavAutoMiniCart.

For example:

{assign var=itMainNavAutoMiniCart value="enabled" scope="global"}

or:

{assign var=itMainNavAutoMiniCart value="disabled" scope="global"}

If no value is specified, the default behaviour is disabled.

This option was introduced in version 1.3.0. Prior to 1.3.0, there was no option to automatically minimize the main nav on cart pages.

Sidebar options

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

Option 2.1: enable or disable primary sidebar display

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

Option 2.2: enable or disable secondary sidebar display

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

Color scheme / style options

Control theme includes two main color schemes, with three different styles/variations for each color scheme.

Option 3.1: define color scheme / style to be used

You can select which color scheme / style to use on your website by editing line 60 in the theme-options.tpl file, choosing from one of the pre-defined color scheme / styles, or choosing custom to use your own customized color scheme / style.

This option can be changed by specifying one of the following values for the variable itColorScheme on line 83 in the theme-options.tpl file:

• green
• green-solid
• green-white
• blue
• blue-solid
• blue-white
• custom

For example:

{assign var=itColorScheme value="green" scope="global"}

or:

{assign var=itColorScheme value="green-solid" scope="global"}

or:

{assign var=itColorScheme value="custom" scope="global"}

If no value is specified, the default behaviour is green.

If the custom value is specified, you must provide the name of the custom style-sheet to use in option 3.2 (see below).

This option was originally introduced in Control theme version 1.1.0. The custom value was introduced in version 1.3.0.

Option 3.2: specify the custom style-sheet to use

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 86 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 control/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"}

Option 3.3: enable or disable maximum width for the main content

By default, the main content area is fluid, expanding to take up 100% of the available space on screen. You can optionally choose to specify a maximum width for the main content area, which will override the default behaviour. The main content area will then be shown up to the maximum width, and where the available width is greater than the maximum width, the main content area will be centrally aligned within the available space.

In order to enable this, you must specify the value enabled for the the variable itMainContentMaxWidth on line 89 in the theme-options.tpl file. You must also specify the maximum width you wish to set in option 3.4 (see below).

For example:

{assign var=itMainContentMaxWidth value="enabled" scope="global"}

If no value is specified, the default behaviour is disabled.

This option was introduced in Control theme version 1.3.0.

Option 3.4: specify the maximum width of the main content

If you have enabled the maximum width functionality, see option 3.3 above, you must specify the maximum width to apply here, by specifying a value for the variable itMainContentMaxWidthValue on line 92 in the theme-options.tpl file. You can specify either a length or a percentage.

For example:

{assign var=itMainContentMaxWidthValue value="800px" scope="global"}

or:

{assign var=itMainContentMaxWidthValue value="75%" scope="global"}

If no value is specified, the theme shall behave as though option 3.3 is set to disabled and the main content will be displayed at 100% width.

This option was introduced in Control theme version 1.3.0.

Text/layout direction options

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

Option 4.1: specify text direction – ltr / rtl / auto

This option allows you to specify the text direction (and subsequent layout) used by the theme. The majority of Western languages are written left-to-right, however a number of global languages (such as Arabic and Hebrew) are written right-to-left. For right-to-left languages, the layout of the theme also needs to change significantly, with many elements displayed on the opposite side of the page (for example the logo moves from top left to top right, the main navigation moves from the left side of the page to the right side of the page).

You can choose from three options, by specifying either ltr, rtl or auto for the variable itTextDirection on line 97 in the theme-options.tpl file. If you specify ltr, the text and layout direction will always be left-to-right regardless of the language. If you specify rtl, the text and layout direction will always be righ-to-left regardless of the language. If you specify auto, the text and layout direction will change dependent on the active language, including if the end user selects or changes language.

For example:

{assign var=itTextDirection value="ltr" scope="global"}

or:

{assign var=itTextDirection value="rtl" scope="global"}

or:

{assign var=itTextDirection value="auto" scope="global"}

If no value is specified, the default behaviour is ltr.

When auto mode is used, the following languages are configured to be shown as right-to-left:

• Arabic (ar_AR)
• Hebrew (he_IL)
• Farsi/Persian (fa_IR)

You can define additional languages to be shown as right-to-left by adding them to the query string on line 115 of the includes/theme-functions.tpl file.

This option was introduced in Control theme version 2.1.0.

Resource minification options

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 Control theme version 2.2.0.

Option 5.1: enable or disable use of minified CSS

You can enable to disable the use of minified CSS by editing line 102 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.

Option 5.2: enable or disable use of minified JS

You can enable to disable the use of minified JS by editing line 105 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.

Theme debug options

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

Option 6.1: enable or disable theme debug mode

Theme debug mode can be enabled or disabled by editing line 110 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.

Configurable order form template options

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.

Control Standard / Control Alternative Standard / Control Outline Standard order form template options

The Control Standard, Control Alternative Standard and Control Outline Standard order form templates have a number of configurable options which apply to all included order form pages, unless specified otherwise.

Option 1.1: enable or disable sidebar display on order form / cart pages

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.

Option 1.2: enable or disable mobile friendly sidebar display on order form / cart pages

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.

Option 1.3: select sidebar display mode

If you have enabled the sidebar on cart page (see cart option 1.1 above), you can use this option to specify whether or not the sidebar is shown permanently or hidden until called (by a user clicking the “Show Menu” button) on large screen sizes / desktop devices. This option can be changed by editing line 30 in the cart-options.tpl file, specifying a value of either permanent or showhide for the variable itCartSidebarDisplayMode.

For example:

{assign var=itCartSidebarDisplayMode value="permanent" scope="global"}

or:

{assign var=itCartSidebarDisplayMode value="showhide" scope="global"}

If no value is specified, the default behaviour is permanent.

This option was introduced in Control theme version 1.3.0.

Option 1.4: select sidebar show/hide method

If you have specified the showhide sidebar mode (see cart option 1.3 above), you can use this option to define the method used to reveal the sidebar when the “Show Menu” button is clicked. This option can be changed by editing line 32 in the cart-options.tpl file, specifying a value of either slide or squash for the variable itCartSidebarDisplayMethod. If the value slide is specified, the main content will retain the same size, but be moved to the left (and partially out of view) to reveal the sidebar when called. If the value squash is specified, the main content will shrink in size to make way for the sidebar when called.

For example:

{assign var=itCartSidebarDisplayMethod value="slide" scope="global"}

or:

{assign var=itCartSidebarDisplayMethod value="squash" scope="global"}

If no value is specified, the default behaviour is slide.

This option was introduced in Control theme version 1.3.0.

Option 2.1: select order summary display position for Configure Product page

This option allows you to choose where the order summary panel is shown on the configure product page, either at the bottom of the page (underneath any configurable product options) or at the righthand side of the page (alongside any configurable product options). This option can be changed by editing line 38 in the cart-options.tpl file, specifying a value of either bottom or side for the variable itCartConfProdOrderSummaryDisplayMethod.

For example:

{assign var=itCartConfProdOrderSummaryDisplayMethod value="bottom" scope="global"}

or:

{assign var=itCartConfProdOrderSummaryDisplayMethod value="side" scope="global"}

If no value is specified, the default behaviour is bottom.

This option was introduced in Control theme version 1.3.0.

Option 2.2: enable or disable autoscroll for the order summary panel on the Configure Product page

If you have chosen to display the order summary panel at the side of the main content (see cart option 2.1 above), you can use this option to specify whether or not the order summary panel should autoscroll, that is automatically move up and down the page (when you scroll the page) to remain in view. This option can be changed by editing line 41 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartConfProdOrderSummaryAutoScroll.

For example:

{assign var=itCartConfProdOrderSummaryAutoScroll value="enabled" scope="global"}

or:

{assign var=itCartConfProdOrderSummaryAutoScroll value="disabled" scope="global"}

If no value is specified, the default behaviour is enabled. This option will only be used if option 1.1 (see above) is set to side.

This option was introduced in Control theme version 1.3.0.

Option 3.1: select color scheme for iCheck checkbox and radio inputs

The Control 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 Control order form templates will use either blue 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 46 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.

Option 4.1: select view cart page style

This option allows you to choose between our updated view cart page style, introduced in Control theme v2.3.0 (with more obvious/visible promo code and estimate tax fields, based on customer feedback), or our original view cart page style (with more minimal links/fields).

This option can be changed by editing line 50 in the cart-options.tpl file, specifying a value of either updated or original for the variable itCartViewCartStyle.

For example:

{assign var=itCartViewCartStyle value="updated" scope="global"}

or:

{assign var=itCartViewCartStyle value="original scope="global"}

If no value is specified, the default behaviour is updated.

This option was introduced in Control theme version 2.3.0.

Option 5.1: Configure the number of products shown per row on the view products page

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 56 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 Control theme version 2.3.0.

Option 5.2: Configure the number of addons shown per row on the view available addons page

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 59 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 Control theme version 2.3.0.

Option 6.1: select order summary display position for Domain Renewals page

This option allows you to choose where the order summary panel is shown on the configure product page, either at the bottom of the page (underneath any configurable product options) or at the righthand side of the page (alongside any configurable product options). This option can be changed by editing line 64 in the cart-options.tpl file, specifying a value of either bottom or side for the variable itCartDomRenewOrderSummaryDisplayMethod.

For example:

{assign var=itCartDomRenewOrderSummaryDisplayMethod value="bottom" scope="global"}

or:

{assign var=itCartDomRenewOrderSummaryDisplayMethod value="side" scope="global"}

If no value is specified, the default behaviour is bottom.

This option was introduced in Control theme version 2.8.0.

Option 6.2: enable or disable autoscroll for the order summary panel on the Domain Renewals page

If you have chosen to display the order summary panel at the side of the main content (see cart option 2.1 above), you can use this option to specify whether or not the order summary panel should autoscroll, that is automatically move up and down the page (when you scroll the page) to remain in view. This option can be changed by editing line 67 in the cart-options.tpl file, specifying a value of either enabled or disabled for the variable itCartDomRenewOrderSummaryAutoScroll.

For example:

{assign var=itCartDomRenewOrderSummaryAutoScroll value="enabled" scope="global"}

or:

{assign var=itCartDomRenewOrderSummaryAutoScroll value="disabled" scope="global"}

If no value is specified, the default behaviour is enabled. This option will only be used if option 1.1 (see above) is set to side.

This option was introduced in Control theme version 2.8.0.

Control Compare / Control Alternative Compare / Control Outline Compare order form template options

The Control Compare, Control Alternative Compare and Control Outline Compare order form templates each have their own cart-options.tpl file, however these options will only apply to the relevant view products page. This is because Control Compare is a child template of the Control Standard order form template, Control Alternative Compare is a child template of the Control Alternative Standard order form template, and Control Outline Compare is a child template of the Control Outline Standard order form template. All other cart pages are handled by the relevant parent template.

Option 1.1: enable or disable sidebar display on order form / cart pages

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.

Option 1.2: enable or disable mobile friendly sidebar display on order form / cart pages

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.

Option 1.3: select sidebar display mode

If you have enabled the sidebar on cart page (see cart option 1.1 above), you can use this option to specify whether or not the sidebar is shown permanently or hidden until called (by a user clicking the “Show Menu” button) on large screen sizes / desktop devices. This option can be changed by editing line 30 in the cart-options.tpl file, specifying a value of either permanent or showhide for the variable itCartSidebarDisplayMode.

For example:

{assign var=itCartSidebarDisplayMode value="permanent" scope="global"}

or:

{assign var=itCartSidebarDisplayMode value="showhide" scope="global"}

If no value is specified, the default behaviour is permanent.

This option was introduced in Control theme version 1.3.0.

Option 1.4: select sidebar show/hide method

If you have specified the showhide sidebar mode (see cart option 1.3 above), you can use this option to define the method used to reveal the sidebar when the “Show Menu” button is clicked. This option can be changed by editing line 33 in the cart-options.tpl file, specifying a value of either slide or squash for the variable itCartSidebarDisplayMethod. If the value slide is specified, the main content will retain the same size, but be moved to the left (and partially out of view) to reveal the sidebar when called. If the value squash is specified, the main content will shrink in size to make way for the sidebar when called.

For example:

{assign var=itCartSidebarDisplayMethod value="slide" scope="global"}

or:

{assign var=itCartSidebarDisplayMethod value="squash" scope="global"}

If no value is specified, the default behaviour is slide.

This option was introduced in Control theme version 1.3.0.

Option 2.1: Configure the number of products shown per row on the view products page

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 38 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 Control theme version 2.3.0.

Control Slider / Control Alternative Slider / Control Outline Slider order form template options

The Control Slider, Control Alternative Slider and Control Outline Slider order form templates each have their own cart-options.tpl file, however these options will only apply to the relevant view products page. This is because Control Slider is a child template of the Control Standard order form template, Control Alternative Slider is a child template of the Control Alternative Standard order form template, and Control Outline Slider is a child template of the Control Outline Standard order form template. All other cart pages are handled by the relevant parent template.

Option 1.1: enable or disable sidebar display on order form / cart pages

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.

Option 1.2: enable or disable mobile friendly sidebar display on order form / cart pages

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.

Option 1.3: select sidebar display mode

If you have enabled the sidebar on cart page (see cart option 1.1 above), you can use this option to specify whether or not the sidebar is shown permanently or hidden until called (by a user clicking the “Show Menu” button) on large screen sizes / desktop devices. This option can be changed by editing line 30 in the cart-options.tpl file, specifying a value of either permanent or showhide for the variable itCartSidebarDisplayMode.

For example:

{assign var=itCartSidebarDisplayMode value="permanent" scope="global"}

or:

{assign var=itCartSidebarDisplayMode value="showhide" scope="global"}

If no value is specified, the default behaviour is permanent.

This option was introduced in Control theme version 1.3.0.

Option 1.4: select sidebar show/hide method

If you have specified the showhide sidebar mode (see cart option 1.3 above), you can use this option to define the method used to reveal the sidebar when the “Show Menu” button is clicked. This option can be changed by editing line 33 in the cart-options.tpl file, specifying a value of either slide or squash for the variable itCartSidebarDisplayMethod. If the value slide is specified, the main content will retain the same size, but be moved to the left (and partially out of view) to reveal the sidebar when called. If the value squash is specified, the main content will shrink in size to make way for the sidebar when called.

For example:

{assign var=itCartSidebarDisplayMethod value="slide" scope="global"}

or:

{assign var=itCartSidebarDisplayMethod value="squash" scope="global"}

If no value is specified, the default behaviour is slide.

This option was introduced in Control theme version 1.3.0.

Customizing Control theme

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.

Customizing the themes CSS

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.

Method 1 – minor edits

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 control/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.

Method 2 – major edits

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 main.css or main-blue.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.

Trouble-shooting and support

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.

Changelog and release history