Overview

x360Sync allows you to configure custom branding settings that conform to a company’s branding strategy or style guidelines. In the Branding page of the administrative web portal, you can define a custom logo, icon, splash screen, program name, and more.

In addition to these options, private cloud administrators can apply a custom CSS stylesheet to override the default x360Sync stylesheet. This option allows you to control branding at the granular level, and fully customize the user experience for end users. 

x360Sync Stylesheets

The x360Sync Web UI references the main.css stylesheet as the default stylesheet, and is accessible on the x360Sync server. The main.css stylesheet controls styles at the global level.

To override styles defined in main.css, you can create a new stylesheet, titled styles.css, and place it in the following directory:

[target drive]:\x360Sync Server\web\custom\ 

Content stored in this directory will not be overwritten during x360Sync version upgrades.

Note: To prevent rendering errors, do not attempt to edit the main.css stylesheet.

How to Override the Default x360Sync Stylesheet

1. In the x360Sync web portal, use a browser inspector to find HTML elements that you want to customize. For example:
2. Create a new file titled, styles.css.
   
   
3. For each HTML element that you want to customize, copy the associated CSS rule set from the main.css stylesheet and paste it into the new styles.css stylesheet.
   
   For example, to override the default title background color, copy the following rule set from the main.css stylesheet and paste it into the styles.css stylesheet.
   
   .content .title { background: #459ddf;
   border: 1px solid #2e84ce;
   position: fixed;
   width: 796px;
   z-index: 997;
   }
   
   
4. In the styles.css file, update the values for each property as needed. For example, to set the title background color to black:
   
   .content .title {
   background: #000000;
   }
   1. Save styles.css when you are finished.
   2. Move styles.css into the following directory:
      
      [target drive]:\x360Sync Server\web\custom\ 
      
      
5. Your custom styles will now be reflected in the Web UI, and will remain intact with each version upgrade.

How to Troubleshoot

If you notice display issues after editing the custom styles.css file, it is recommended that you disable the styles.css file.

1. On the x360Sync server, navigate to:
   
   [target drive]:\x360Sync Server\web\custom\
   
   
2. Rename styles.css (for example, disabled_styles.css).
3. Restart the Apache service. x360Sync will no longer reference styles.css, and will instead display all styles as defined by the main.css file.