第6章 Red Hat Developer Hub の追加のカスタマイズ
このセクションでは、Red Hat Developer Hub に適用できる追加のカスタマイズオプションについて説明します。
- タブのツールチップのカスタマイズ
タブのツールチップをカスタマイズするには、次の内容を
app-config-rhdh.yaml
ファイルに追加します。app: title: My custom developer hub
- Developer Hub インスタンスのブランディングのカスタマイズ
Developer Hub インスタンスのブランディングをカスタマイズするには、次の内容を
app-config-rhdh.yaml
ファイルに追加します。app: branding: fullLogo: ${BASE64_EMBEDDED_FULL_LOGO} iconLogo: ${BASE64_EMBEDDED_ICON_LOGO} theme: light: primaryColor: ${PRIMARY_LIGHT_COLOR} headerColor1: ${HEADER_LIGHT_COLOR_1} headerColor2: ${HEADER_LIGHT_COLOR_2} navigationIndicatorColor: ${NAV_INDICATOR_LIGHT_COLOR} dark: primaryColor: ${PRIMARY_DARK_COLOR} headerColor1: ${HEADER_DARK_COLOR_1} headerColor2: ${HEADER_DARK_COLOR_2} navigationIndicatorColor: ${NAV_INDICATOR_DARK_COLOR}
上記の設定の各部分について説明します。
-
fullLogo
は、展開された (固定された) サイドバー上のロゴであり、base64 でエンコードされた画像を想定しています。 -
iconLogo
は、折りたたまれた (固定されていない) サイドバーのロゴであり、base64 でエンコードされた画像を想定しています。 primaryColor
は、リンクとほとんどのボタンの色を、入力された色に設定します。primaryColor
でサポートされている形式は次のとおりです。-
#nnn
-
#nnnnnn
-
rgb()
-
rgba()
-
hsl()
-
hsla()
-
color()
-
headerColor1
(バナーの左側) とheaderColor2
(バナーの右側) は、各ページのヘッダーバナーの色と、テンプレートカードのバナーの色を変更します。headerColor1
とheaderColor2
でサポートされている形式は次のとおりです。-
#nnn
-
#nnnnnn
-
rgb()
-
rgba()
-
hsl()
-
hsla()
-
color()
-
navigationIndicatorColor
は、現在どのタブにいるかを示すサイドバーのインジケーターの色を変更します。navigationIndicatorColor
でサポートされている形式は次のとおりです。-
#nnn
-
#nnnnnn
-
rgb()
-
rgba()
-
hsl()
-
hsla()
-
color()
-
-