Overview
If you have Skinning enabled in your package, then you can reskin your reseller web interface and the web client in My Account -> Skinning. You can also allow or disallow companies and sub resellers under you to use skinning.
Before you can use skinning, you must use a custom subdomain. You can set your subdomain in My Account -> URLs.
When you change anything on this page, a big red Save button will appear at the top of the page (you might need to scroll up). Remember to press this button, otherwise your changes will not be saved.
In this article:
1. Allow / disallow skinning for companies and sub resellers
2. Reskin the reseller web interface
1) Allow / disallow skinning for companies and sub resellers
As a reseller, you can decide whether resellers and companies under you can use skinning. This is controlled by the following settings at the top of the skinning page:
Skinning allowed on this reseller if set to yes, then you can use skinning.
Allow skinning on sub resellers if set to yes, then resellers under you will be able to use skinning by default.
Allow skinning on accounts if set to yes, then companies under you will be able to reskin their web client by default.
2) Reskin the reseller web interface
The following will tell you how to customize the reseller web interface:
Upload a company logo Click on your current logo, or on "upload a company logo" to upload a new logo. There are no restrictions regarding the size or dimensions of the image, but we recommend 50px by 175px. Supported image formats: bmp, gif, jpg, png, ico, webp.
Upload browser icon Click on your current browser icon, or on "upload browser icon" to upload a new icon. This will show in your browser's tab. There are no restrictions regarding the size or dimensions of the image, but we recommend a 32x32 or 16x16 image in .ico format. Supported image formats: bmp, gif, jpg, png, ico, webp.
Title in tab changes the text in the browser tab.
Meta description changes the description of the page under the "description" meta tag in the HTML header.
Meta keywords changes the keywords for the page under the "keywords" meta tag in the HTML header.
The colors of the reseller site can also be customized. The fields that control these colors are located in the "Reseller" section. Use the Reset Colors button if you want to start over with the colors.
Please refer to the table below to see which fields control which elements on the reseller panel.
Name | Description | Result |
Text, edges and small icons | Changes all text color on the reseller panel. | |
General background | Changes the background color of the login page to the reseller panel. If you have background pictures set, you will see this color at image fade in/fade out. If you have no background pictures, this color will be the background. | No image |
Input outline | Changes the border color of input fields. | |
Buttons and left pane | Changes the color of all buttons and the left pane. | |
Hovering on buttons | Changes the color of the Save button on mouse-over. |
3) Reskin the web client
In the "Client" section, you can set a different default color design for the web client.
Please refer to the table below to see which fields control which elements in the web client.
Name | Description | Result |
Text color - mouse over | Changes the text color of active menu tabs (current menu), and when you hover your cursor over them. | |
Background color | Changes the background color of the whole menu. | |
Background color - mouse over | Changes the background color of the menu items when the cursor is hovered over them. | |
Text color | Changes the text color of the menu items. | |
Background color - breadcrumbs | Changes the background color of the breadcrumbs. | |
Text color - breadcrumbs | Changes the text color of the breadcrumbs. | |
Background color - Header and Search | Changes the background color of the Header and the Search bar. In the example, "Share list" is in the Header section, while "Search" is the search bar. | |
Text color - Header and Search | Changes the text color of the Header and the Search bar. | |
Button background color | Changes the background color of buttons. This also includes the page navigation buttons. | |
Button text color | Changes the text color of buttons. This also includes the page navigation buttons. | |
Button border color | Changes the border color of buttons. This also includes the page navigation buttons. | |
Button background color - mouse over | Changes the background color of buttons when the cursor is hovered over them. This also includes the page navigation buttons. | |
Button text color - mouse over | Changes the text color of buttons when the cursor is hovered over them. This also includes the page navigation buttons. | |
List background color | Changes the text color of buttons. This also includes the page navigation buttons. | |
List text color | Changes the text color inside the list view. | |
List background color - mouse over | Changes the background color of list items while the cursor is over them. | |
List mouse over text color | Changes the text color of list items when the cursor is hovered over them. | |
List header and footer color | Changes the color of the header and the footer of the list view. | |
List header text color | Changes the text color of the list header. | |
Textbox background Color | Changes the background color of text boxes. | |
Textbox text Color | Changes the text color inside text boxes. | |
Textbox border color | Changes the border color of text boxes. | |
Active button background color | Changes the background color of the Active (currently selected) buttons and the Save button. | |
Active button text color | Changes the text color of the Active (currently selected) buttons and the Save button. | |
Active button border color | Changes the border color of the Active (currently selected) buttons and the Save button. | |
Login background | Changes the background color of the login form. |
4) Background pictures
On the very bottom of the skinning page, you can upload your own pictures to be used as the background-slideshow for the login page to the reseller panel. These will also become the default set of images for the web client login page.
✔ Click on "Browse" and select the images you want to upload.
✔ You can see your uploaded pictures under "Current pictures". Click on the trash bin icon next to an image to remove it.
✔ Choose "Yes" under "Use your own background pictures" to use these images. If you choose "No", the default background images will be shown.
✔ Don't forget to scroll up and click "Save" to apply your changes.