You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: assemblies/assembly-customizing-the-appearance.adoc
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,15 @@
4
4
[id="{context}"]
5
5
= Customizing {product} appearance
6
6
7
+
By modifying the visual aspects of the interface, organizations can align {product} with their branding guidelines and improve the overall user experience.
8
+
7
9
The following default theme configurations are available for {product}:
8
10
9
11
The {product} theme:: Default theme configurations to make your developer portal look like a standard {product} instance. For more information, see xref:ref-customize-rhdh-default-rhdh_{context}[]
10
12
11
13
The Backstage theme:: Default theme configurations to make your developer portal look like a standard Backstage instance. For more information, see xref:ref-customize-rhdh-default-backstage_{context}[]
12
14
13
-
You can change or disable particular parameters in a default theme or create a fully customized theme by modifying the `app-config-rhdh.yaml` file. From the `app-config-rhdh.yaml` file, you can customize common theme components, including the following:
15
+
You can change or disable particular parameters in a default theme or create a fully customized theme by modifying the `app-config-rhdh.yaml` file. From the `app-config-rhdh.yaml` file, you can customize common theme components, including the following components:
14
16
15
17
* Company name and logo
16
18
* Font color, size, and style of text in paragraphs, headings, headers, and buttons
Copy file name to clipboardExpand all lines: modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc
+14-19Lines changed: 14 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,6 @@ To configure a floating action button as a dynamic plugin, complete any of the f
14
14
15
15
* Specify the `global.floatingactionbutton/config` mount point in your `app-config-dynamic.yaml` file. For example:
16
16
+
17
-
.Example of a bulk-import plugin as a floating action button
@@ -44,12 +43,11 @@ To configure a floating action button as a dynamic plugin, complete any of the f
44
43
icon: bulkImportIcon
45
44
text: Bulk import
46
45
----
47
-
<1> (Required) The import name with an associated component to the mount point.
48
-
<2> Use the `svg` value to display a black BulkImportPage icon.
46
+
`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point.
47
+
`frontend:mountPoints:importName:icon`:: Use the `svg` value to display a black `BulkImportPage` icon.
49
48
50
49
* To configure an action as a floating action button that opens an external link, specify the `global.floatingactionbutton/config` mount point in your `dynamic-plugins.yaml` file within the `backstage-plugin-global-floating-action-button` plugin. For example:
51
50
+
52
-
.Example of a floating action button that opens GitHub
@@ -77,12 +75,11 @@ To configure a floating action button as a dynamic plugin, complete any of the f
77
75
toolTip: 'Github'
78
76
to: https://github.com/redhat-developer/rhdh-plugins
79
77
----
80
-
<1> (Required) The import name with an associated component to the mount point.
81
-
<2> Use the `svg` value to display the `Quay` icon.
78
+
`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point.
79
+
`frontend:mountPoints:importName:icon`:: Use the `svg` value to display the `Quay` icon.
82
80
83
81
* To configure a floating action button that contains a submenu, define the `global.floatingactionbutton/config` mount point in the same `slot` field in your `dynamic-plugins.yaml` file for multiple actions. The default slot is `page-end` when not specified. For example:
84
82
+
85
-
.Example of a floating action button with submenu actions
<1> (Required) The import name with an associated component to the mount point.
137
+
`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point.
141
138
142
139
* To configure a floating action button to display only on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `visibleOnPaths` property as shown in the following example:
143
140
+
144
-
.Example of a floating action button to display specific pages
@@ -172,11 +168,10 @@ To configure a floating action button as a dynamic plugin, complete any of the f
172
168
icon: bulkImportIcon
173
169
text: Bulk import
174
170
----
175
-
<1> (Required) The import name with an associated component to the mount point.
171
+
`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point.
176
172
177
173
* To hide a floating action button on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `excludeOnPaths` property as shown in the following example:
178
174
+
179
-
.Example of a floating action button to hide specific pages
Copy file name to clipboardExpand all lines: modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc
+7-11Lines changed: 7 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,8 +9,8 @@ The *Quicklinks* matrix, organized by sections (for example, Documentation or De
9
9
10
10
The default configuration includes the following components:
11
11
12
-
*StarredDropdown*: Displays the *Starred Items* menu in the global header by default, as shown in the following configuration:
13
-
12
+
* *StarredDropdown*: Displays the *Starred Items* menu in the global header by default, as shown in the following configuration:
13
+
+
14
14
[source,yaml]
15
15
----
16
16
# Group: Global Header
@@ -21,8 +21,8 @@ The default configuration includes the following components:
21
21
priority: 85
22
22
----
23
23
24
-
*ApplicationLauncherDropdown*: Provides the *Quicklinks* matrix (application launcher) by default, as shown in the following configuration:
25
-
24
+
* *ApplicationLauncherDropdown*: Provides the *Quicklinks* matrix (application launcher) by default, as shown in the following configuration:
25
+
+
26
26
[source,yaml]
27
27
----
28
28
# Group: Global Header
@@ -33,8 +33,8 @@ The default configuration includes the following components:
33
33
priority: 82
34
34
----
35
35
36
-
*MenuItemLink entries*: Define sections, titles, icons, and links within the *Quicklinks* matrix. The default configuration includes links to the {product-short} documentation and an {product-very-short} Local, as shown in the following configurations:
37
-
36
+
* *MenuItemLink entries*: Define sections, titles, icons, and links within the *Quicklinks* matrix. The default configuration includes links to the {product-short} documentation and an {product-very-short} Local, as shown in the following configurations:
37
+
+
38
38
[source,yaml,subs="+attributes"]
39
39
----
40
40
- mountPoint: global.header/application-launcher
@@ -61,8 +61,4 @@ The default configuration includes the following components:
61
61
[NOTE]
62
62
====
63
63
When upgrading from previous versions, the installer does not overwrite your existing `dynamic-plugins.yaml` configuration. If you had not configured *Starred Items* or *Quicklinks* previously, they remain disabled after the upgrade and must be manually enabled.
. (Optional) If you do not provide `logo` props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure the `CompanyLogo` as shown in the following configuration:
Copy file name to clipboardExpand all lines: modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,20 +6,18 @@
6
6
You can use the `red-hat-developer-hub.backstage-plugin-global-header` dynamic plugin to extend the global header with additional buttons and customize the order and position of icons and features. Additionally, you can create and integrate your custom dynamic header plugins using the mount points provided by this new header feature, allowing you to further tailor to suit your needs.
7
7
For more information about enabling dynamic plugins, see {installing-and-viewing-plugins-book-link}[{installing-and-viewing-plugins-book-title}].
@@ -76,10 +74,12 @@ For more information about enabling dynamic plugins, see {installing-and-viewing
76
74
config:
77
75
priority: 10
78
76
----
79
-
<1> *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar.
80
-
<2> *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar.
81
-
<3> `default.main-menu-items`: Hides the *Self-service* button from the sidebar menu. Remove this field to display the *Self-service* button in the sidebar.
82
-
<4> *position*: Defines the position of the header. Options: `above-main-content` or `above-sidebar`.
77
+
where:
78
+
79
+
*search*:: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar.
80
+
*settings*:: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar.
81
+
`default.main-menu-items`:: Hides the *Self-service* button from the sidebar menu. Remove this field to display the *Self-service* button in the sidebar.
82
+
*position*:: Defines the position of the header. Options: `above-main-content` or `above-sidebar`.
83
83
84
84
To extend the functionality of the default global header, include any the following attributes in your global header entry:
Copy file name to clipboardExpand all lines: modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,8 +6,9 @@
6
6
You can display the preferred username in the global header profile drop-down list by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook.
7
7
8
8
.Procedure
9
-
.Example when you configure `spec.profile.displayName`
10
9
10
+
* When you configure `spec.profile.displayName`, use the following code:
11
+
+
11
12
[source,yaml,subs="+attributes,+quotes"]
12
13
----
13
14
apiVersion: backstage.io/v1alpha1
@@ -24,8 +25,8 @@ spec:
24
25
memberOf: [janus-authors]
25
26
----
26
27
27
-
.Example when you do not configure `spec.profile.displayname` but configure `metadata.title`
28
-
28
+
* When you do not configure `spec.profile.displayname` but configure `metadata.title`, use the following code:
29
+
+
29
30
[source,yaml,subs="+attributes,+quotes"]
30
31
----
31
32
apiVersion: backstage.io/v1alpha1
@@ -39,8 +40,8 @@ spec:
39
40
memberOf: [janus-authors]
40
41
----
41
42
42
-
.Example when you do not configure the `spec.profile.displayname` and the `metadata.title`
43
-
43
+
* When you do not configure the `spec.profile.displayname` and the `metadata.title`, use the following code:
0 commit comments