Ce contenu n'est pas disponible dans la langue sélectionnée.
Chapter 7. Additional customizations in Red Hat Developer Hub
You can set additional customization options for your Red Hat Developer Hub instance by modifying the app-config-rhdh.yaml file.
7.1. Customizing tab tooltip
You can customize the tab tooltip text by setting a value for the title field, as shown in the following example:
app: title: My custom developer hub # ...
7.2. Customizing the branding of your Developer Hub instance
You can customize the branding of your Developer Hub instance by configuring the branding section, as shown in the following example:
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}
# ...In the previous configuration,
-
fullLogois the logo on the expanded (pinned) sidebar and expects a base64 encoded image. -
iconLogois the logo on the collapsed (unpinned) sidebar and expects a base64 encoded image. primaryColoris the color of links and most buttons to the inputted color. The supported formats forprimaryColorinclude:-
#nnn -
#nnnnnn -
rgb() -
rgba() -
hsl() -
hsla() -
color()
-
headerColor1(left-side of the banner) andheaderColor2(right-side of the banner) changes the color of the header banner of each page, as well as the banner for template cards. The supported formats forheaderColor1andheaderColor2include:-
#nnn -
#nnnnnn -
rgb() -
rgba() -
hsl() -
hsla() -
color()
-
navigationIndicatorColorchanges the color of the indicator in the sidebar that indicates which tab you are on. The supported formats fornavigationIndicatorColorinclude:-
#nnn -
#nnnnnn -
rgb() -
rgba() -
hsl() -
hsla() -
color()
-
7.2.1. Customizing the sidebar logo width
You can customize the width of the sidebar logo by setting a value for the fullLogoSize field, as shown in the following example:
app:
branding:
fullLogoWidth: 110px
# ...
The default value for the logo width is 110px. The following units are supported: integer, px, em, rem, percentage.
