Customize the dashboard theme and favicon

[huonguyenlt]

Summary

I would like to change the dash board theme (currently it is back and white) to other color. And I would like to change to favicon. Are they configurable in che cluster custom resource?

Relevant information

No response

[tolusha]

Hello

I hope it helps https://eclipse.dev/che/docs/stable/administration-guide/customizing-openshift-che-consolelink-icon/

Using the way above, you can override all css files in dashboard to customize

[huonguyenlt]

Thank @tolusha I follow your suggestion to change the background color by updating branding.css and manifest.json . However the background still show black color. Could you please give advice?

apiVersion: v1
kind: Secret
metadata:
  name: che-dashboard-customization
  namespace: eclipse-che
  annotations:
    che.eclipse.org/mount-as: subpath
    che.eclipse.org/mount-path: /public/dashboard/assets/branding
  labels:
    app.kubernetes.io/component: che-dashboard-secret
    app.kubernetes.io/part-of: che.eclipse.org
data:
  branding.css: Lm1haW4tcGFnZS1sb2FkZXJ7YmFja2dyb3VuZC1jb2xvcjojMDMwO2JvdHRvbTowO2NvbG9yOiNmMmY7Zm9udC1mYW1pbHk6SGVsdmV0aWNhLEFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjI0cHg7bGVmdDowO21hcmdpbjphdXRvO3Bvc2l0aW9uOmFic29sdXRlO3JpZ2h0OjA7dG9wOjA7ei1pbmRleDo4MH0ubWFpbi1wYWdlLWxvYWRlciAuaWRlLXBhZ2UtbG9hZGVyLWNvbnRlbnQgaW1ne2FuaW1hdGlvbi1kdXJhdGlvbjoyczthbmltYXRpb24taXRlcmF0aW9uLWNvdW50OmluZmluaXRlO2FuaW1hdGlvbi1uYW1lOm9wYWNpdHk7YW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjplYXNlLWluLW91dDtib3R0b206MDtsZWZ0OjA7bWFyZ2luOmF1dG87bWF4LWhlaWdodDoxNDBweDttYXgtd2lkdGg6MTQwcHg7cG9zaXRpb246YWJzb2x1dGU7cmlnaHQ6MDt0b3A6MH1Aa2V5ZnJhbWVzIG9wYWNpdHl7MCUsdG97b3BhY2l0eTowfTUwJXtvcGFjaXR5OjF9fQ==
  manifest.json: ewogICJzaG9ydF9uYW1lIjogIkNoZSIsCiAgIm5hbWUiOiAiRWNsaXBzZSBDaGUiLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICIuL2xvYWRlci5zdmciLAogICAgICAic2l6ZXMiOiAiYW55IgogICAgfQogIF0sCiAgInN0YXJ0X3VybCI6ICIuLi8uLiIsCiAgImRpc3BsYXkiOiAic3RhbmRhbG9uZSIsCiAgInRoZW1lX2NvbG9yIjogIiMwMDMwMDAiLAogICJiYWNrZ3JvdW5kX2NvbG9yIjogIiNmZjJmZmYiLAogICJzY29wZSI6ICIuLi8uLiIKfQ==
type: Opaque

branding.css

.main-page-loader{background-color:#030;bottom:0;color:#f2f;font-family:Helvetica,Arial,sans-serif;font-size:24px;left:0;margin:auto;position:absolute;right:0;top:0;z-index:80}.main-page-loader .ide-page-loader-content img{animation-duration:2s;animation-iteration-count:infinite;animation-name:opacity;animation-timing-function:ease-in-out;bottom:0;left:0;margin:auto;max-height:140px;max-width:140px;position:absolute;right:0;top:0}@keyframes opacity{0%,to{opacity:0}50%{opacity:1}}

manifest.json

{
  "short_name": "Che",
  "name": "Eclipse Che",
  "icons": [
    {
      "src": "./loader.svg",
      "sizes": "any"
    }
  ],
  "start_url": "../..",
  "display": "standalone",
  "theme_color": "#003000",
  "background_color": "#ff2fff",
  "scope": "../.."
}

[tolusha]

@olexii4 Could you help us, what do we need to update to change the background color?

[lthomas122]

The branding.css is requested earlier than the vendor.css in the DOM, so you need to utilise CSS selector heirarchies to change any stylings defined in the vendor.css, where pretty much all of the dashboard elements are styled. As an example, here's what you would need to add to override the vendor.css styling for the sidebar background-color:

/* branding.css */
#page-sidebar.pf-c-page__sidebar.pf-m-expanded {
    background-color: #000;
}

There are also a few resources I've come across that can offer further customisation, but involve more development:

• The Che Zero blogpost gives a rough tutorial on how you can create a custom dashboard from scratch. The repo has been archived, so parts of the project may use deprecated methods, but it should be a good starting point.
• Open Shift Dynamic Plugins seem to provide a fuctionality that allows you to inject custom plugins, which you could use to inject CSS if need be. The Che Operator Schema seems to support it, although it is in alpha.

[jreynosodev-k8s]

Hello @huonguyenlt

You found a solution. I also want to edit the Che panel logo, but I haven't found a workable solution.

[huonguyenlt]

@jreynosodev-k8s you can refer this link to change the icon https://eclipse.dev/che/docs/stable/administration-guide/customizing-openshift-che-consolelink-icon/

[jreynosodev-k8s]

Hello @huonguyenlt, thanks for your help, I made this small repo to automate and make these changes, I think it can be very helpful.

https://github.com/jreynosodev-k8s/che-dashboard-customize.git

[jreynosodev-k8s]

@huonguyenlt I'm currently looking for a way to customize che-code icons and logos, do you know any way to do this?

[tolusha]

@jreynosodev-k8s

It might help. https://eclipse.dev/che/docs/stable/administration-guide/editor-configurations-for-microsoft-visual-studio-code/

[tolusha]

cc @RomanNikitenko

[olexii4]

@olexii4 Could you help us, what do we need to update to change the background color?

@huonguyenlt You can do this with the following changes to the branding.css file:

/* Add your branding customizations here. */
#ui-container #page-sidebar {
  background-color: #4e4bb7;
}

#ui-container .show-header {
  background-color: #0000ff;
}
...