Overview


You can customize the design of the web client by going to Design -> Skinning in the web client as an administrator.


Your reseller must enable the option for you to reskin the web client. If you are not allowed to set skinning, but you want to, contact your reseller.


In the following, we will go over what each button on this page does, so you can plan out your skinning beforehand.


In this article:

1. Setting a subdomain

2. Browser metadata

3. Styling





1) Setting a subdomain


Before your skinning is applied to the client, you must choose a subdomain for your company. The subdomain must be unique to the domain, and can consist of numbers 0-9 and lowercase letters a-z.


Your users should use the new subdomain for logging in afterwards. For example: I set my subdomain to "alpha" . My domain is rushfiles.net . I will now use alpha.rushfiles.net to reach my reskinned web client.




Important If you include special characters in the subdomain, you won't be able to access it.
 






2) Browser metadata


You can upload a new browser tab picture by clicking on the  button under Upload browser icon.


Simply choose an image from your machine, and it will be uploaded right away.




Note Supported image formats: bmp, gif, jpg, png, ico, webp.
 
There is no restriction regarding dimensions or size of the image. Recommended dimensions are 32x32 or 16x16 pixels in .ico format, so the image retains transparency.
 




Title in tab changes the title 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.





3) Styling


If you want to start over with your skinning, click the Reset Colors button. This will reset all the colors to the default ones with everything else (subdomain, uploaded images, etc.) staying the same.


Save your changes with the Save button. Colors are not applied until this button is pressed.


Upload a company logo changes the logo at the top-left corner, and the login page of the webclient. There are no restrictions to the size or dimension of the image, but we recommend a 50px by 175px dimension. Supported image formats: bmp, gif, jpg, png, ico, webp.

Background pictures upload your own pictures to be shown as a slideshow on the login page of your sub-domain. Use the  button to upload the pictures. There are no restrictions to the size and dimension of the image, but keep in mind that the image will be stretched to fit the browser window. Supported image formats: bmp, gif, jpg, png.

Colors customize the colors of the individual elements of the web client. Please see the table below for a detailed description of which field controls which element. The color used in the example is #ff00ff (Magenta).



NameDescriptionResult
Text color - mouse overChanges 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.