Customising

Customising Themes

For information on customising Order Forms, see Order Form Templates.

The header and footer system theme template files are commonly used to every page and act as a wrapper around the primary body content. They can be used as the best initiative for customising a theme. -The default template files in your custom header and footer are strongly recommended for maintenance of template includes and output variables. This will surely help ensure compatibility with addons and extensions that you install later.

  • Navigation bar and sidebar content is also defined within WHASOLS and passed to the templates for output. These areas allow modules and addons to interact with and manipulate these areas of client dynamically. The output styling of these is controlled by include files which are explained in more detail below.
  • The footer template file includes a number of lines of JavaScript code immediately prior to the closing tag. These are essential to the correct operation of the client area. Do not remove these lines.
  • You may also wish to consider creating child themes, which have simpler development and maintenance requirements.

Custom Logo

The Whmsols themes exhibit either your company name or logo in the top-left corner of the Client Area. If you supply a logo, the $assetLogoPath variable contains the relative path to the logo file.

To set a custom logo, you can simply upload the logo in the Setup Wizard or at Configuration >  General Settings in the General tab. A logo can be manually uploaded to the /assets/img directory, but the logo must also be saved as either logo.png or logo.jpg.

Include Files

Include templates are those templates that are shared and used by multiple pages. They are placed within the /includes/ subdirectory. The following list of include files is accurate for WHASOLS 1.0 and later:

Common to All Pages

  • confirmation.tpl — Controls the display of a confirmation modal.
  • flashmessage.tpl — Controls the display of flash messages (messages that the interface shows once).
  • head.tpl — Defines the CSS and Javascript files included within the section of a page.
  • modal.tpl — Controls the display of all Client Area modals.
  • navbar.tpl — Regulate the rendering of the primary navigation bar menu items.
  • social-accounts.tpl — Controls the display of any configured social media icons in the footer. This include file is specific to Twenty-One.
  • verifyemail.tpl — operate and display of the email verification notice below the header.

Used as Required

  • alert.tpl — overlook the rendering of a single alert (for example, a success message or warning).
  • breadcrumb.tpl — Controls the display of the breadcrumbs in the page header.
  • captcha.tpl — Renders the CAPTCHA verification image.
  • domain-search.tpl — Controls the display of the domain search.
  • generate-password.tpl — Controls the display of the password generation modal when a user opens it.
  • index.tpl — Controls the display of store landing pages.
  • linkedaccounts.tpl — Overlook the display of the page for configuring third-party services like Facebook and Google.
  • network-issues-notifications.tpl — Controls the display of the network status alert bar under the header. This include file is specific to Hostim.
  • panel.tpl — Controls the display of a card-style display panel.
  • pwstrength.tpl — Controls the display of the password strength meter and tooltip.
  • sidebar.tpl — Controls the display of the sidebar menu items.
  • tablelist.tpl — Controls the display of all filterable data list tables.

Editing or adapting any changes in these template files will affect everywhere that the respective elements are used. One place to edit and other to maintain during upgrades will help make applying and preserving your customisations easier.