mirror of
https://github.com/goharbor/harbor.git
synced 2025-03-11 22:20:00 +01:00
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
This commit is contained in:
parent
67ae79989d
commit
3804e311a6
39
docs/customize_look&feel_guide.md
Normal file
39
docs/customize_look&feel_guide.md
Normal file
@ -0,0 +1,39 @@
|
||||
# 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](#configure) your product to apply the new changes.
|
Loading…
Reference in New Issue
Block a user