1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
stage: none
group: unassigned
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://handbook.gitlab.com/handbook/product/ux/technical-writing/#assignments
---
# GitLab Appearance **(FREE SELF)**
You can update your settings to change the look and feel of your GitLab self-managed instance.
To open the **Appearance** settings:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
## Customize your homepage button
Customize the appearance of your **Homepage** button.
The **Homepage** button is located on the upper-left corner of the left sidebar.
Replace the default **GitLab logo** **{tanuki}** with any image.
- The file should be less than 1 MB.
- The image should be 28 pixels high. Images more than 28 px high will be resized.
To customize your **Homepage** icon image:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Under **Navigation bar**, select **Choose file**.
1. At the bottom of the page, select **Update appearance settings**.
Pipeline status emails also show your custom logo. However, some email applications do not support SVG images. If your custom image is in SVG format, pipeline emails show the default logo.
## Customize the favicon
Customize the appearance of the favicon. A favicon is the icon for a website that shows in your browser tabs. The **GitLab logo** **{tanuki}** is the default browser and CI/CD status favicon. Replace the default icon with any image that is `32 x 32` pixels and in `.png` or `.ico` format.
To change the favicon:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Under **Favicon**, select **Choose file**.
1. At the bottom of the page, select **Update appearance settings**.
## Add system header and footer messages
> **Enable header and footer in emails** checkbox [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/344819) in GitLab 15.9.
Add a small header message, a small footer message, or both, to the interface of your GitLab instance. These messages show on all projects and pages of the instance, such as the sign-in and register pages.
- You can italicize, bold, or add links to your message with Markdown.
- Markdown lists, images, and quotes are not supported because system messages must be a single line.
To add a system header, footer message, or both:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **System header and footer** section.
1. Complete the fields.
1. Optional. Select the **Enable header and footer in emails** checkbox. Add your system messages to all emails sent by your GitLab instance.
1. At the bottom of the page, select **Update appearance settings**.
By default, the system header and footer text is white text on an orange background. To customize the message colors:
- Go to the **System header and footer** section and select **Customize colors**.
## Customize your sign-in and register pages
Customize the title, description, and logo on the sign-in and register page. By default, the register page logo is located on the left of the page, between the title and the description.
To customize your sign-in and register page titles or descriptions:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Sign in/Sign up pages** section.
1. Complete the fields. You can format the page **Title** and **Description** with Markdown.
1. At the bottom of the page, select **Update appearance settings**.
To customize the logo on your sign-in and register pages:
- The file should be less than 1 MB.
- The image should be 128 pixels high. Images more than 128 px high will be resized.
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Sign in/Sign up pages** section.
1. Under **Logo**, select **Choose file**.
1. At the bottom of the page, select **Update appearance settings**.
You can add also add a [customized help message](settings/help_page.md) below the sign-in message or add [a sign-in text message](settings/sign_in_restrictions.md#sign-in-information).
## Customize the Progressive Web App
> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/375708) in GitLab 15.9.
Customize the icon, display name, short name, and description for your Progessive Web App (PWA). For more information, see [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
To add a Progressive Web App name and short name:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Progressive Web App (PWA)** section.
1. Complete the fields.
- **Name** is the display name of your PWA.
- **Short name** shows on mobile devices and small screens.
1. At the bottom of the page, select **Update appearance settings**.
To add a Progressive Web App description:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Progressive Web App (PWA)** section.
1. Complete the fields. You can format the **Description** with Markdown.
1. At the bottom of the page, select **Update appearance settings**.
To customize your Progressive Web App icon:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Progressive Web App (PWA)** section.
1. Under **Icon**, select **Choose file**.
1. At the bottom of the page, select **Update appearance settings**.
## Add guidelines to the new project page
Add a guideline message to the **New project page**. You can format your message with Markdown. The guideline message shows under the **New Project** message and, on the left side of the **New project page**.
To add a guideline message to the **New project page**:
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **New project pages** section.
1. Complete the fields. You can format your guidelines with Markdown.
## Add profile image guidelines
Add guidelines for profile images.
1. On the left sidebar, at the bottom, select **Admin Area**.
1. Select **Settings > Appearance**.
1. Go to the **Profile image guideline** section.
1. Complete the fields. You can format your text with Markdown.
## Libravatar
GitLab supports [Libravatar](https://www.libravatar.org) is for avatar images, but you must manually enable Libravatar support on the GitLab instance. For more information, see [Libravatar](../administration/libravatar.md) to use the service.
<!-- ## Troubleshooting
Include any troubleshooting steps that you can foresee. If you know beforehand what issues
one might have when setting this up, or when something is changed, or on upgrading, it's
important to describe those, too. Think of things that may go wrong and include them here.
This is important to minimize requests for support, and to avoid doc comments with
questions that you know someone might ask.
Each scenario can be a third-level heading, for example `### Getting error message X`.
If you have none to add when creating a doc, leave this section in place
but commented out to help encourage others to add to it in the future. -->
|
