mirror of
https://github.com/iSharkFly-Docs/opensearch-docs-cn
synced 2025-02-22 19:25:03 +00:00
Added custom branding steps
Signed-off-by: keithhc2 <keithhc2@users.noreply.github.com>
This commit is contained in:
parent
b8a6d2e796
commit
7b0b44df9b
89
_dashboards/branding.md
Normal file
89
_dashboards/branding.md
Normal file
@ -0,0 +1,89 @@
|
||||
---
|
||||
layout: default
|
||||
title: Custom branding
|
||||
nav_order: 200
|
||||
---
|
||||
|
||||
# Dashboards custom branding
|
||||
Introduced 1.2
|
||||
{: .label .label-purple }
|
||||
|
||||
By default, OpenSearch Dashboards uses the OpenSearch logo, but if you want to use custom branding elements such as the favicon or main Dashboards logo, you can do so by editing `opensearch_dashboards.yml` or by including a custom `opensearch_dashboards.yml` file when you start your OpenSearch cluster.
|
||||
|
||||
For example, if you're using Docker to start your OpenSearch cluster, include the following lines in the `opensearch-dashboards` section of your `docker-compose.yml` file:
|
||||
|
||||
```
|
||||
volumes:
|
||||
- ./opensearch_dashboards.yml:/usr/share/opensearch-dashboards/config/opensearch_dashboards.yml
|
||||
```
|
||||
|
||||
Restart your OpenSearch cluster, open OpenSearch Dashboards in your browser again, and OpenSearch Dashboards now uses your custom elements.
|
||||
|
||||
The following elements in OpenSearch Dashboards are customizable:
|
||||
|
||||

|
||||
|
||||
Setting | Corresponding branding element
|
||||
:--- | :---
|
||||
logo | Header logo. See #1 in the image.
|
||||
mark | OpenSearch Dashboards mark. See #2 in the image.
|
||||
loadingLogo | Loading logo used when OpenSearch Dashboards is starting. See #3 in the image.
|
||||
faviconUrl | Website icon. Loads next to the application title. See #4 in the image.
|
||||
applicationTitle | The application's title. See #5 in the image.
|
||||
|
||||
To start using your own branding elements in OpenSearch Dashboards, first uncomment this section of `opensearch_dashboards.yml`:
|
||||
|
||||
```yml
|
||||
# opensearchDashboards.branding:
|
||||
# logo:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# mark:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# loadingLogo:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# faviconUrl: ""
|
||||
# applicationTitle: ""
|
||||
```
|
||||
|
||||
Add the URLs you want to use as branding elements to the appropriate setting. Valid image types are `SVG`, `PNG`, and `GIF`.
|
||||
|
||||
Customization of dark mode Dashboards is also available, but you first must supply a valid link to `defaultUrl`, and then link to your preferred image with `darkModeUrl`. You are not required to customize all branding elements, so if you wanted to, it's perfectly valid to change just the logo. Leave unchanged elements as commented.
|
||||
|
||||
The following example demonstrates how to use `SVG` files as logos but leaves the other elements as defaults.
|
||||
|
||||
```yml
|
||||
logo:
|
||||
defaultUrl: "https://example.com/validUrl.svg"
|
||||
darkModeUrl: "https://example.com/validDarkModeUrl.svg"
|
||||
# mark:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# loadingLogo:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# faviconUrl: ""
|
||||
applicationTitle: "My custom application"
|
||||
```
|
||||
|
||||
We recommend linking to images that are hosted on some web server, but if you really want to use locally hosted images, save your images inside `src/core/server/core_app/assets`, and then configure `opensearch_dashboards.yml`. You can access locally stored images through the `ui` folder.
|
||||
|
||||
The following example assumes the default port of 5601 that Dashboards uses and demonstrates how to link to locally stored images.
|
||||
|
||||
```yml
|
||||
logo:
|
||||
defaultUrl: "https://localhost:5601/ui/my-own-image.svg"
|
||||
darkModeUrl: "https://localhost:5601/ui/my-own-image.svg"
|
||||
mark:
|
||||
defaultUrl: "https://localhost:5601/ui/my-own-image2.svg"
|
||||
darkModeUrl: "https://localhost:5601/ui/my-own-image2.svg"
|
||||
# loadingLogo:
|
||||
# defaultUrl: ""
|
||||
# darkModeUrl: ""
|
||||
# faviconUrl: ""
|
||||
applicationTitle: "My custom application"
|
||||
```
|
||||
|
||||
We don't recommend this workaround because new versions of Dashboards would revert all customized elements back to default branding elements, so you would have to re-upload your assets to access them again.
|
BIN
images/dashboards-branding-labels.png
Normal file
BIN
images/dashboards-branding-labels.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 544 KiB |
BIN
images/dashboards-logos-labels.png
Normal file
BIN
images/dashboards-logos-labels.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 271 KiB |
Loading…
x
Reference in New Issue
Block a user