Axcient Help Center

How to Customize the x360Sync Web UI Stylesheet (Private Cloud)

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\greensnake\static\themes\default\css\

Content stored in this directory will not be overwritten during x360Sync revision 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:

    CSSMap.png
  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. Update styles as required.

  4. Save styles.css when you are finished.

  5. Move styles.css into the following directory:

    [target drive]:\x360Sync Server\web\greensnake\static\themes\default\css\

Your custom styles will now be reflected in the Web UI, and will remain intact with each revision 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\greensnake\static\themes\default\css\

  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.