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

3. Reskin the web client

4. Background pictures






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.




Note If the "Allow skinning on accounts" is set to no, companies will still be able to use skinning. However, they won't be able to set custom background images.
 







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.






Note Currently, the reset color function doesn't work on the reseller panel. Please use the image above to reset to the default colors manually.
 





Please refer to the table below to see which fields control which elements on the reseller panel.



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



NameDescriptionResult
Text color - mouse overChanges the text color of active menu tabs (current menu), and when you hover your cursor over them.
Background colorChanges 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 colorChanges the text color of the menu items.
Background color - breadcrumbsChanges the background color of the breadcrumbs.
Text color - breadcrumbsChanges the text color of the breadcrumbs.
Background color - Header and SearchChanges 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 SearchChanges the text color of the Header and the Search bar.
Button background colorChanges the background color of buttons. This also includes the page navigation buttons.
Button text colorChanges the text color of buttons. This also includes the page navigation buttons.
Button border colorChanges the border color of buttons. This also includes the page navigation buttons.
Button background color - mouse overChanges the background color of buttons when the cursor is hovered over them. This also includes the page navigation buttons.
Button text color - mouse overChanges the text color of buttons when the cursor is hovered over them. This also includes the page navigation buttons.
List background colorChanges the text color of buttons. This also includes the page navigation buttons.
List text colorChanges the text color inside the list view.
List background color - mouse overChanges the background color of list items while the cursor is over them.
List mouse over text colorChanges the text color of list items when the cursor is hovered over them.
List header and footer colorChanges the color of the header and the footer of the list view.
List header text colorChanges the text color of the list header.
Textbox background ColorChanges the background color of text boxes.
Textbox text ColorChanges the text color inside text boxes.
Textbox border colorChanges the border color of text boxes.
Active button background colorChanges the background color of the Active (currently selected) buttons and the Save button.
Active button text colorChanges the text color of the Active (currently selected) buttons and the Save button.
Active button border colorChanges the border color of the Active (currently selected) buttons and the Save button.
Login backgroundChanges the background color of the login form.





Important Currently, there is a bug on the skinning page that duplicates the "Button background color" and the "Button text color" fields. This results in the labels and the actual fields being mismatched after the first "Button background color" and "Button text color" fields. This means that the second "Button background color" field controls the field below it, which is "Button border color". In turn, "Button border color" controls "Button text color mouse-over", and so on. Please refer to the corresponding article in the Known Issues section until this issue is fixed. 
 







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.