How do I brand my Whitelabel products to look like my business website?

TPP Wholesale offers different levels of whitelabelled products to help you to sell domains and hosting
online and to allow your customers to manage their domains and web hosting.

The whitelabelled products are:

  • - Whitelabel Console and Whitelabel Shopfront (basic)
  • - Whitelabel Website (intermediate)
  • - Custom Shop (advanced)

The Whitelabel Console is where your clients will manage their accounts and domains.  The Whitelabel
Shopfront is where your customers can purchase and upgrade domains and hosting.  The Whitelabel
Website is a pre-designed template that we have developed to create an online presence to sell domains and
hosting (and provide support).

This article will focus on the Custom Shop product; however, if you would like to know more about the
Whitelabel Console, Whitelabel Shopfront or the Whitelabel Website, you should refer to the above
linked articles.

Our Custom Shop is essentially a set of tools to assist you in customising your Whitelabel Console,
Whitelabel Shopfront and Whitelabel Website to match your current website style.  You will need a strong
understanding of HTML and CSS in order to get the most out of our Custom Shop.  

Please note the support scope for this product. You should familiarise yourself with it before undertaking
this project.

How do I modify the default Whitelabel Console and Whitelabel Shopfront theme
(Whitelabel Theme)?


Both the Whitelabel Console and Whitelabel Shopfront products sit under a sub-domain of our partnerconsole.net
domain. You must have a partnerconsole.net SSL hostname set-up in order to successfully use these Whitelabel products.

Because these Whitelabel products are set up under a partnerconsole.net subdomain, we have provided FTP access to the files
you will need in order to customise the overall theme (Whitelabel Theme) of these products.  At the bottom of the Whitelabel page
in your Admin Panel, you will find your FTP log in details. These will allow you to access the files that apply to the default
Whitelabel theme.  From there, you can make changes to the theme’s HTML and CSS, styling them to look like your own website.

In order to customise the Whitelabel Theme, there are three main files that you need to be aware of:

The first main file is: main.html. This is the default file that loads when you access any of the seven components that make up
the Whitelabel theme ordering system. The other components are:

  1. Domain Search - http://hostname.partnerconsole.net/execute2/store/domain-search. The main order page for domains. 
  2. Multi Domain Search -http://hostname.partnerconsole.net/execute2/store/multi-domain-search. The page where you can search for multiple domains to order. 
  3. Transfer Domain - http://hostname.partnerconsole.net/execute2/store/multi-domain-transfer. The page where you can start a domain transfer.
  4. Renew Domain - http://hostname.partnerconsole.net/execute2/store/external-domain-renewal. The page where a domain can be renewed.
  5. SSL Order - http://hostname.partnerconsole.net/execute2/store/ssl-order?start=. The Page where you can order an SSL for a cPanel account or external hosting (does not include cloud).
  6. VPS Order - http://hostname.partnerconsole.net/execute2/store/select-vps?start=. The page where you can order Virtual Private servers.

The second main file is: newmain.html. This is the page that loads when your clients access the Whitelabel Console login page.

 Login Page @ http://hostname.partnerconsole.net/ -

This page is loaded from the main.html file. 

Example default client account. 

The third main file is: custom-styles.css. This is a blank CSS file that loads both the main.html and newmain.html files. Any
custom CSS changes you make to this file will override the default CSS already applied to the theme.

What am I able to modify in the two html files?

You can modify all sections in the two html files, but you need to ensure you don’t remove either of the following tags
– <consolehead/> and <consolebody/> - from the coding as they are custom tags we have created that pull all the coding to run
the ordering system and client interface. Without them, your system won’t work.

The <consolehead/> tag is contained within the <head></head> tags. This sections pulls all CSS and Javascript files required for
the ordering system and client account interface. 

The <consolebody/> tag is contained within the <body> </body> tags. This section pulls all of the HTML used for the ordering
system and client account interface.

You will also see the tag <consoletitle/> located in the <title> tag within the <head> tag. This defines the page title as it appears
in a user’s browser. It is recommended to keep this, but is not essential.

As long as the above tags are kept in place, both systems will function correctly regardless of other changes made to the HTML
files.

Below, we have provided you with a very basic HTML template. However, please note that this doesn’t include any cross browser
compatibility testing or JavaScript detection. Furthermore, it uses the HTML5 doctype.

<!DOCTYPE html>
<html lang="en-AU">
<head>
            <title>The Console - <consoletitle/></title>
            <consolehead/>
            <link href="/resources/custom-styles.css" rel="stylesheet" />
</head>
<body>
            <consolebody/>
</body>
</html>


Note: All CSS for the <body> tag will still be pulled using the <consolehead/> tag, but will be over-ridden if you add to the
custom-styles.css file.

There are two options when it comes to customising your Whitelabel: either you can start with the provided default main.html and
newmain.html files and strip what you want from the code OR you can start with the bare minimum above and build from that.  If
you are making a copy of your current website, it may be worthwhile to start with the bare minimum code.

How do I make CSS changes to elements within the <consolebody/>?

All the elements within the <consolebody/> tag are defined in a default CSS file loaded via the <consolehead/> tag. You won’t
have direct access to the HTML or CSS that is retrieved by these tags.

If you want to change the CSS of these elements you will firstly need to find out its Class or ID. You can do this by using your
browser's development tools:

Once you have the Class or ID of the element, you can add any new CSS to the custom-styles.css file. This will override the
current CSS with the new CSS you have defined.

The changes you can make to how the site looks are essentially limitless from this point on.

How do I link to other files I have uploaded via FTP to the Theme Directory?


Whatever images, CSS and JavaScript you want in your theme, links must begin with the /resources prefix to ensure correct
mapping to the theme directory.

Example: 

<link href="/resources/mycss.css" rel="stylesheet"/>

Something’s gone wrong, how do I fix it?

If for any reason you make changes to the Whitelabel theme and are unable to undo them, you can reset the theme via your
Reseller Admin Panel by following these instructions:

  1. Log in to the Admin Panel
  2. Hover over ‘Account Settings’ and then ‘Whitelabel’ and click ‘Branding and Theme’
  3. Under the Custom Theme heading, click ‘Reset’ next to ‘Remove all customisations’

Resetting your theme will remove all customisations made and return the Whitelabel to its original, unaltered state. The base
theme files will be reinstalled in your theme directory. However, your configured host names and FTP details will remain.  As
always, you should make a backup of any customised files before resetting the theme (this will save you from having to re-enter
working customisations from scratch).

Again, please note the support scope of the Custom Shop. If you have any further questions, contact our support team for more
information.

Was this article helpful?
6 out of 6 found this helpful