Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-13 22:05:21 +01:00
Code Issues Projects Releases Wiki Activity
af9c99cf2f
harbor/docs/customize_look&feel_guide.md
Steven Zou 3804e311a6 Provide guideline about how to customize the look&feel of Harbor UI 
support customizing product name
support customizing logo
support customizing login background image
support customizing about text with different languages
2018-04-17 19:21:19 +08:00

1.7 KiB
Raw Blame History

Customize the look & feel of Harbor

The primary look & feel of Harbor supports to be customized with several simple steps. All the relevant customization in configurations are saved in the setting.json file under $HARBOR_DIR/src/ui_ng/src folder with json format and will be loaded when Harbor is launched.

Configure

Open the setting.json file, you'll see the default content as shown below:

{
  "headerBgColor": "#004a70",
  "headerLogo": "",
  "loginBgImg": "",
  "product": {
    "title": "VMware Harbor",
    "company": "vmware",
    "name": "Harbor",
    "introductions": {
      "zh-cn": "",
      "es-es": "",
      "en-us": ""
    }
  }
}

Change the values of configuration if you want to override the default style to your own. Here are references:

  • headerBgColor: Background color of the page header, support either HEX or RGB value. e.g: #004a70 and rgb(210,110,235).
  • headerLogo: Name path of the logo image in the header, e.g: 'logo.png'. The image file should be put in the images folder.
  • loginBgImg: Name path of the background image displayed in the login page, e.g: 'login_bg.png'. The image file should be put in the images folder. Suggest the size of this image should be bigger than 800px*600px.
  • Product: Contain metadata / description of the product.
    • title: The full product title displayed in the login page.
    • company: Name of the company publishing the product.
    • name: Name of the product.
    • introductions: The introduction about the product with different languages, which are displayed in the About dialog.

Build

Once the setting.json configurations has been updated, re-build your product to apply the new changes.