diff --git a/docs/release-notes/14-0-0/README.md b/docs/release-notes/14-0-0/README.md index e64a3b5cb49b..8d7b81dc0e3c 100644 --- a/docs/release-notes/14-0-0/README.md +++ b/docs/release-notes/14-0-0/README.md @@ -41,7 +41,7 @@ methods. For more information, see [#51212](https://community.openproject.org/wo ### Reduced number of configurable design variables -We have changed the number and naming of the [configurable design variables](../../system-admin-guide/design/#advanced-settings). This simplifies the process of setting the desired color scheme for users. It also allows us to get closer to the **Primer design system** in order to benefit from its other modes such as the dark mode or the colorblind mode in the future. +We have changed the number and naming of the [configurable design variables](../../system-admin-guide/design/#interface-colors). This simplifies the process of setting the desired color scheme for users. It also allows us to get closer to the **Primer design system** in order to benefit from its other modes such as the dark mode or the colorblind mode in the future. The following variables have been changed: diff --git a/docs/system-admin-guide/design/README.md b/docs/system-admin-guide/design/README.md index fed0d3b21a9d..1bc54b52e2e6 100644 --- a/docs/system-admin-guide/design/README.md +++ b/docs/system-admin-guide/design/README.md @@ -11,28 +11,31 @@ As an OpenProject Enterprise add-on you can replace the default OpenProject log Navigate to *Administration* -> *Design* in order to customize your OpenProject theme and logo. -The design page provides several options to customize your OpenProject Enterprise edition: +The design page provides several options to customize your OpenProject Enterprise edition, grouped under three tabs, **Interface, Branding, PDF export styles**. You can [choose a color theme](#choose-a-color-theme) under any of these tabs. -1. Choose a default color theme: OpenProject, Light or Dark. Press the Save button to apply your changes. -2. Upload your own **custom logo** to replace the default OpenProject logo. -3. Set a custom **favicon** which is shown as an icon in your browser window/tab. -4. Upload a custom **touch icon** which is shown on your smartphone or tablet when you bookmark OpenProject on your home screen. -5. Set the **Custom PDF export settings** for [exporting work packages in a PDF format](../../user-guide/work-packages/exporting/#pdf-export). -6. [Advanced settings](#advanced-settings) to configure **custom colors** to adjust nearly any aspect of OpenProject, such as the color of the header and side menu, the link color and the hover color. +Under **Interface** you can also choose [custom colors](#interface-colors) for elements of the interface such as the primary link colour, secondary accent colour, the background of the top navigation header and the main menu. -![Design settings in an OpenProject system admin guide](openproject_system_guide_design.png) +![Design interface settings in OpenProject adminstration](openproject_system_guide_design_interface.png) + +Under the **Branding** tab you can also [upload a custom logo](#upload-a-custom-logo) to replace the default OpenProject logo, [set a custom favicon](#set-a-custom-favicon), which is shown as an icon in your browser window/tab, and [upload a custom touch icon](#set-a-custom-touch-icon), which is shown on your smartphone or tablet when you bookmark OpenProject on your home screen. + +![Branding settings in OpenProject administration](openproject_system_guide_design_branding.png) + +Under **PDF export settings** you can set the preferences for [exporting work packages in a PDF format](../../user-guide/work-packages/exporting/#pdf-export). + +![PDF export styles settings in OpenProject administration](openproject_system_guide_design_pdf_export_styles.png) ## Choose a color theme You can choose between the three default color themes for OpenProject: * OpenProject -* OpenProject Light -* OpenProject Dark +* OpenProject Gray (previously called OpenProject Light) +* OpenProject Navy Blue (previously called OpenProject Dark) Press the Save button to apply your changes. The theme will then be changed. -![System-admin-guide_color-theme](System-admin-guide_color-theme.png) +![Change color theme in OpenProject administration settings](openproject_system_guide_design_color_theme_navy_blue.png) ## Upload a custom logo @@ -40,9 +43,11 @@ To replace the default OpenProject logo with your own logo, make sure that your Click the *Upload* button to confirm and upload your logo. -![Sys-admin-design-upload-logo](Sys-admin-design-upload-logo.png) +![Upload custom logo in OpenProject administration settings](openproject_system_guide_design_upload_custom_logo.png) + + -![upload logo](system_admin_logo_updated.png) +![Custom logo updated in OpenProject admistration](openproject_system_guide_design_custom_logo_uploaded.png) ## Set a custom favicon @@ -50,7 +55,7 @@ To set a custom favicon to be shown in your browser’s tab, make sure you have Then click the *Upload* button to confirm and upload your favicon. -![Sys-admin-design-favicon](Sys-admin-design-favicon.png) +![Custom favicon in OpenProject design settings](openproject_system_guide_design_custom_favicon.png) ## Set a custom touch icon @@ -60,16 +65,16 @@ Click the *Upload* button to confirm and upload your custom touch icon. When you bookmark your OpenProject environment’s URL, you will see that the uploaded icon is used as a custom touch icon. -## Advanced settings +## Interface colors Aside from uploading logos and icons, you can also customize the colors used within your OpenProject environment. -To do this change the color values (entered as color hex code) in the *Advanced settings* section. In order to find the right hex code for a color, you can use a website, such as [color-hex.com](https://www.color-hex.com/). - You can see the selected color in the preview area next to the color hex code. Therefore, it is possible to see the selected color before saving the changes. +To do this, enter the hex value for any color you would like to change. You can use a website like [htmlcolorcodes.com](https://htmlcolorcodes.com/color-picker/) to help you find the perfect color. +You can see the selected color in the preview area next to the color hex code. Therefore, it is possible to see the selected color before saving the changes. > [!TIP] > If the button color you select is too light to have white text on top of it, the icon and text color will be displayed in black instead. -![Advanced color settings in OpenProject](openproject_system_guide_design_advanced_settings_primer.png) +![Advanced color settings in OpenProject](openproject_system_guide_design_interface_colors.png) As soon as you press the **Save** button your changes are applied and the colors of your OpenProject environment are adjusted accordingly. diff --git a/docs/system-admin-guide/design/Sys-admin-design-favicon.png b/docs/system-admin-guide/design/Sys-admin-design-favicon.png deleted file mode 100644 index e0c4d6516e8a..000000000000 Binary files a/docs/system-admin-guide/design/Sys-admin-design-favicon.png and /dev/null differ diff --git a/docs/system-admin-guide/design/Sys-admin-design-upload-logo.png b/docs/system-admin-guide/design/Sys-admin-design-upload-logo.png deleted file mode 100644 index deee0aefa7ea..000000000000 Binary files a/docs/system-admin-guide/design/Sys-admin-design-upload-logo.png and /dev/null differ diff --git a/docs/system-admin-guide/design/System-admin-guide_color-theme.png b/docs/system-admin-guide/design/System-admin-guide_color-theme.png deleted file mode 100644 index 6e0befe01cda..000000000000 Binary files a/docs/system-admin-guide/design/System-admin-guide_color-theme.png and /dev/null differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design.png b/docs/system-admin-guide/design/openproject_system_guide_design.png deleted file mode 100644 index d5a8fc355f66..000000000000 Binary files a/docs/system-admin-guide/design/openproject_system_guide_design.png and /dev/null differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_branding.png b/docs/system-admin-guide/design/openproject_system_guide_design_branding.png new file mode 100644 index 000000000000..92ec47350a6e Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_branding.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_navy_blue.png b/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_navy_blue.png new file mode 100644 index 000000000000..279ffe936036 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_navy_blue.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_pick.png b/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_pick.png new file mode 100644 index 000000000000..0d2ea09b400d Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_color_theme_pick.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_custom_favicon.png b/docs/system-admin-guide/design/openproject_system_guide_design_custom_favicon.png new file mode 100644 index 000000000000..ee2cc0ac6cf6 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_custom_favicon.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_custom_logo_uploaded.png b/docs/system-admin-guide/design/openproject_system_guide_design_custom_logo_uploaded.png new file mode 100644 index 000000000000..157bcae936da Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_custom_logo_uploaded.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_interface.png b/docs/system-admin-guide/design/openproject_system_guide_design_interface.png new file mode 100644 index 000000000000..155ab93bd129 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_interface.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_interface_colors.png b/docs/system-admin-guide/design/openproject_system_guide_design_interface_colors.png new file mode 100644 index 000000000000..aaf4d8cf1d54 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_interface_colors.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_pdf_export_styles.png b/docs/system-admin-guide/design/openproject_system_guide_design_pdf_export_styles.png new file mode 100644 index 000000000000..194e5e107c02 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_pdf_export_styles.png differ diff --git a/docs/system-admin-guide/design/openproject_system_guide_design_upload_custom_logo.png b/docs/system-admin-guide/design/openproject_system_guide_design_upload_custom_logo.png new file mode 100644 index 000000000000..d9be0ba6c1e8 Binary files /dev/null and b/docs/system-admin-guide/design/openproject_system_guide_design_upload_custom_logo.png differ diff --git a/docs/system-admin-guide/design/system_admin_logo_updated.png b/docs/system-admin-guide/design/system_admin_logo_updated.png deleted file mode 100644 index cb4768e1067a..000000000000 Binary files a/docs/system-admin-guide/design/system_admin_logo_updated.png and /dev/null differ