Google Git
Sign in
eclipse / www.eclipse.org / che / a71aec8bcf84d4cc1317f8237067c4b6b11d262b / . / docs / next / administration-guide / branding-che-theia / index.html
blob: 4a1e443b56a9522789abf4cd138f35b7db99253f [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Branding Che-Theia :: Eclipse Che Documentation</title>
<meta name="description" content="Customize the Che-Theia interface and branding">
<meta name="keywords" content="contributor-guide, branding-che-theia">
<meta name="generator" content="Antora 3.0.2">
<link rel="stylesheet" href="../../../../docs/_/css/site.css">
<link rel="stylesheet" href="../../../../docs/_/css/extra.css">
<link rel="stylesheet" href="../../../../docs/_/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" href="../../../../docs/_/img/favicon.ico" type="image/x-icon">
<meta name="robots" content="noindex">
<script>var uiRootPath = '../../../../docs/_'</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37306001-2"></script>
<script>function gtag(){dataLayer.push(arguments)};window.dataLayer=window.dataLayer||[];gtag('js',new Date());gtag('config','UA-37306001-2')</script>
<script>var uiRootPath = '../../../../docs/_'</script>
</head>
<body class="article">
<header class="header">
<nav class="navbar">
<div class="navbar-brand">
<div class="navbar-item">
<button class="navbar-burger" data-target="topbar-nav">
<span></span>
<span></span>
<span></span>
</button>
<img src="../../../../docs/_/img/icon-eclipse-che.svg" class="navbar-logo" alt="Eclipse Che logo">
<a href="https://www.eclipse.org/che/docs/index.html">Eclipse Che Documentation</a>
</div>
</div>
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item search hide-for-print">
<div id="search-field" class="field">
<input id="search-input" type="text" placeholder="Search the docs">
</div>
</div>
<a class="navbar-item" href="https://www.eclipse.org/che/">Home</a>
<a class="navbar-item" href="https://che.eclipseprojects.io/">Blog</a>
<a class="navbar-item" href="https://github.com/eclipse/che">Source Code</a>
</div>
</div>
</nav>
</header>
<div class="body">
<div class="nav-container" data-component="docs" data-version="next">
<aside class="nav">
<div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
<nav class="nav-menu">
<h3 class="title"><a href="../../overview/introduction-to-eclipse-che/">Documentation</a></h3>
<ul class="nav-list">
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../overview/introduction-to-eclipse-che/">Introduction to Che</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../hosted-che/hosted-che/">Eclipse Che hosted by Red Hat</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../hosted-che/try-in-web-ide-github-action/">Try in Web IDE GitHub action</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">User Guide</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/adopting-che/">Adopting Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/developer-workspaces/">Developer workspaces</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/first-time-contributors/">Badge for first-time contributors</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/benefits-of-pull-requests-review-in-che/">Reviewing pull and merge requests</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/supported-languages/">Supported languages</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/user-onboarding/">User onboarding</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/starting-a-new-workspace-with-a-clone-of-a-git-repository/">Starting a new workspace with a clone of a Git repository</a>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/optional-parameters-for-the-urls-for-starting-a-new-workspace/">Optional parameters for the URLs for starting a new workspace</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/url-parameter-concatenation/">URL parameter concatenation</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/url-parameter-for-the-workspace-ide/">URL parameter for the workspace IDE</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/url-parameter-for-starting-duplicate-workspaces/">URL parameter for starting duplicate workspaces</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/url-parameter-for-the-devfile-file-name/">URL parameter for the devfile file name</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/url-parameter-for-the-devfile-file-path/">URL parameter for the devfile file path</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/basic-actions-you-can-perform-on-a-workspace/">Basic actions you can perform on a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/authenticating-to-a-git-server-from-a-workspace/">Authenticating to a Git server from a workspace</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../end-user-guide/customizing-workspace-components/">Customizing workspace components</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/selecting-a-workspace-ide/">Selecting a workspace IDE</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/selecting-an-ide-by-using-a-url-parameter/">Selecting an in-browser IDE for a new workspace by using a URL parameter</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/specifying-an-in-browser-ide-for-a-git-repository-by-using-che-editor.yaml/">Specifying an in-browser IDE for a Git repository by using <code>che-editor.yaml</code></a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/using-credentials-and-configurations-in-workspaces/">Using credentials and configurations in workspaces</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-git-credentials/">Using Git credentials</a>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/enabling-artifact-repositories-in-a-restricted-environment/">Enabling artifact repositories in a restricted environment</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-maven-artifact-repositories/">Maven</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-gradle-artifact-repositories/">Gradle</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-npm-artifact-repositories/">npm</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-python-artifact-repositories/">Python</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-go-artifact-repositories/">Go</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/enabling-nuget-artifact-repositories/">NuGet</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/creating-image-pull-secrets/">Creating image pull Secrets</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/mounting-secrets/">Mounting Secrets</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/mounting-configmaps/">Mounting ConfigMaps</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../end-user-guide/requesting-persistent-storage-for-workspaces/">Requesting persistent storage for workspaces</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/integrating-with-kubernetes/">Integrating with Kubernetes</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/automatic-token-injection/">Automatic Kubernetes token injection</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/navigating-che-from-openshift-developer-perspective/">Navigating Che from OpenShift Developer Perspective</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/navigating-openshift-web-console-from-che/">Navigating OpenShift web console from Che</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/troubleshooting-che/">Troubleshooting Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/viewing-che-workspaces-logs/">Viewing Che workspaces logs</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/investigating-failures-at-a-workspace-start-using-the-verbose-mode/">Troubleshooting workspace start failures</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/troubleshooting-slow-workspaces/">Troubleshooting slow workspaces</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/troubleshooting-network-problems/">Troubleshooting network problems</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../end-user-guide/adding-a-vscode-extension/">Adding a Visual Studio Code extension to a workspace</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">Administration Guide</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../preparing-the-installation/">Preparing the installation</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../supported-platforms/">Supported platforms</a>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../architecture-overview/">Architecture</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../server-components/">Server components</a>
<ul class="nav-list">
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../che-operator/">Che operator</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../devworkspace-operator/">Dev Workspace operator</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../gateway/">Gateway</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../dashboard/">User dashboard</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../devfile-registries/">Devfile registries</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../che-server/">Che server</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../postgresql/">PostgreSQL</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../plug-in-registry/">Plug-in registry</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../user-workspaces/">User workspaces</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../calculating-che-resource-requirements/">Calculating Che resource requirements</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../installing-che/">Installing Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../installing-the-chectl-management-tool/">Installing the chectl management tool</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../installing-che-on-openshift-using-cli/">Installing Che on OpenShift using CLI</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../installing-che-on-openshift-using-the-web-console/">Installing Che on OpenShift using the web console</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../installing-che-in-a-restricted-environment/">Installing Che in a restricted environment</a>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../installing-che-locally/">Installing Che locally</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../installing-che-on-red-hat-openshift-local/">Installing Che on Red Hat OpenShift Local</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../installing-che-on-minikube/">Installing Che on Minikube</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-che/">Configuring Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../understanding-the-checluster-custom-resource/">Understanding the <code>CheCluster</code> Custom Resource</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../using-chectl-to-configure-the-checluster-custom-resource-during-installation/">Using chectl to configure the <code>CheCluster</code> Custom Resource during installation</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../using-the-cli-to-configure-the-checluster-custom-resource/">Using the CLI to configure the CheCluster Custom Resource</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../checluster-custom-resource-fields-reference/"><code>CheCluster</code> Custom Resource fields reference</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-namespace-provisioning/">Configuring namespaces</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-workspace-target-namespace/">Configuring namespace name</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../provisioning-namespaces-in-advance/">Provisioning namespaces in advance</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-server-components/">Configuring server components</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../mounting-a-secret-as-a-file-or-an-environment-variable-into-a-container/">Mounting a Secret or a ConfigMap as a file or an environment variable into a Eclipse&#160;Che container</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../advanced-configuration-options-for-the-che-server-component/">Advanced configuration options for Che server</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-workspaces-globally/">Configuring workspaces globally</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-the-number-of-workspaces-that-a-user-can-create/">Configuring the number of workspaces that a user can create</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../deploying-che-with-support-for-git-repositories-with-self-signed-certificates/">Git with self-signed certificates</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-workspaces-nodeselector/">Configuring workspaces nodeSelector</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../caching-images-for-faster-workspace-start/">Caching images for faster workspace start</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../defining-the-list-of-images-to-pull/">Defining the list of images</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../defining-the-memory-parameters-for-the-image-puller/">Defining the memory settings</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../installing-image-puller-on-openshift-using-the-web-console/">Installing Image Puller on OpenShift using the web console</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../installing-image-puller-on-openshift-using-cli/">Installing Image Puller on OpenShift using CLI</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-observability/">Configuring observability</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../che-theia-workspaces/">Che-Theia workspaces</a>
<ul class="nav-list">
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../the-woopra-telemetry-plugin/">The Woopra telemetry plug-in</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../creating-a-telemetry-plugin/">Creating a telemetry plug-in</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-server-logging/">Configuring server logging</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../collecting-logs-using-chectl/">Collecting logs using chectl</a>
</li>
<li class="nav-item" data-depth="3">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../monitoring-with-prometheus-and-grafana/">Monitoring with Prometheus and Grafana</a>
<ul class="nav-list">
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../installing-prometheus-and-grafana/">Installing Prometheus and Grafana</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../monitoring-the-dev-workspace-operator/">Monitoring the Dev Workspace Operator</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../monitoring-che/">Monitoring Che Server</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-networking/">Configuring networking</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-che-hostname/">Configuring Che hostname</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../importing-untrusted-tls-certificates/">Importing untrusted TLS certificates to Che</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-ingresses/">Configuring Kubernetes Ingress</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-routes/">Configuring OpenShift Route</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../configuring-storage/">Configuring storage</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../installing-che-using-storage-classes/">Installing Che using storage classes</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../branding/">Branding</a>
<ul class="nav-list">
<li class="nav-item is-current-page" data-depth="3">
<a class="nav-link" href="./">Branding Che-Theia</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../managing-identities-and-authorizations/">Managing identities and authorizations</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../oauth-for-github-gitlab-or-bitbucket/">OAuth for GitHub, GitLab, or Bitbucket</a>
<ul class="nav-list">
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../configuring-oauth-2-for-github/">Configuring OAuth 2.0 for GitHub</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../configuring-oauth-2-for-gitlab/">Configuring OAuth 2.0 for GitLab</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../configuring-oauth-1-for-bitbucket/">Configuring OAuth 1.0 for Bitbucket</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../configuring-the-administrative-user/">Configuring the administrative user</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../removing-user-data/">Removing user data</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../managing-workloads-using-the-che-server-api/">Using the Che server API</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../upgrading-che/">Upgrading Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../upgrading-the-chectl-management-tool/">Upgrading the chectl management tool</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../upgrading-che-7-41-on-openshift/">Upgrading Che 7.41 on Red Hat OpenShift</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../specifying-the-update-approval-strategy/">Specifying the update approval strategy</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../upgrading-che-using-the-web-console/">Upgrading Che using the OpenShift web console</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../upgrading-che-using-the-cli-management-tool/">Upgrading Che using the CLI management tool</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../upgrading-che-using-the-cli-management-tool-in-restricted-environment/">Upgrading Che in a restricted environment</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../uninstalling-che/">Uninstalling Che</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../extensions/extensions/">Extensions</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../extensions/openshift-connector-overview/">OpenShift Connector</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../extensions/features-of-openshift-connector/">Features of OpenShift Connector</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../extensions/installing-openshift-connector-in-che/">Installing OpenShift Connector in Eclipse Che</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../extensions/authenticating-with-openshift-connector-from-che/">Authenticating with OpenShift Connector from Eclipse Che</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../extensions/creating-components-with-openshift-connector-in-che/">Creating Components with OpenShift Connector in Eclipse Che</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../extensions/connecting-source-code-from-github-to-a-openshift-component-using-openshift-connector/">Connecting source code from GitHub to a OpenShift Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../glossary/che-glossary/">Che glossary</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
<div class="context">
<span class="title">Documentation</span>
<span class="version">next</span>
</div>
<ul class="components">
<li class="component is-current">
<a class="title" href="../../../stable/overview/introduction-to-eclipse-che/">Documentation</a>
<ul class="versions">
<li class="version is-current">
<a href="../../overview/introduction-to-eclipse-che/">next</a>
</li>
<li class="version">
<a href="../../../che-7/overview/introduction-to-eclipse-che/">old (7.41)</a>
</li>
<li class="version is-latest">
<a href="../../../stable/overview/introduction-to-eclipse-che/">stable</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<a href="../../../stable/overview/introduction-to-eclipse-che/" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
<ul>
<li><a href="../../overview/introduction-to-eclipse-che/">Documentation</a></li>
<li>Administration Guide</li>
<li><a href="../configuring-che/">Configuring Che</a></li>
<li><a href="../branding/">Branding</a></li>
<li><a href="./">Branding Che-Theia</a></li>
</ul>
</nav>
<div class="page-versions">
<button class="version-menu-toggle" title="Show other versions of page">next</button>
<div class="version-menu">
<a class="version is-current" href="./">next</a>
<a class="version" href="../../../che-7/contributor-guide/branding-che-theia/">old (7.41)</a>
<a class="version is-missing" href="../../../stable/overview/introduction-to-eclipse-che/">stable</a>
</div>
</div>
<div class="edit-this-page"><a href="https://github.com/eclipse/che-docs/edit/main/modules/administration-guide/pages/branding-che-theia.adoc">Edit this Page</a></div>
</div>
<div class="content">
<aside class="toc sidebar" data-title="Contents" data-levels="2">
<div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">Branding Che-Theia</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This chapter describes how to customize the Che-Theia interface and branding. Customization is possible for the following elements:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Welcome</strong> page and <strong>About</strong> dialog:</p>
<div class="ulist">
<ul>
<li>
<p>Product name</p>
</li>
<li>
<p>Product logo</p>
</li>
<li>
<p>Description</p>
</li>
<li>
<p>List of helpful resources (<strong>Help</strong> section of the <strong>Welcome</strong> page)</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="paragraph">
<p>To start using the customized Che-Theia:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Build a container image with the customized Che-Theia.</p>
</li>
<li>
<p>Define an editor <code>meta.yaml</code> that uses the custom image.</p>
</li>
<li>
<p>Create a workspace from a devfile using the custom editor.</p>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="defining-custom-branding-values-for-che-theia_che"><a class="anchor" href="#defining-custom-branding-values-for-che-theia_che"></a>Defining custom branding values for Che-Theia</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to customize definitions of basic branding elements of Che-Theia.</p>
</div>
<div class="paragraph">
<div class="title">Procedure</div>
<p>Create a <code>product.json</code> file with a new name of the product, logo, description, and list of hyperlinks on the <strong>Welcome</strong> page (an example of <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/branding/product.json"><code>product.json</code></a>:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"name": "Red Hat OpenShift Dev Spaces", <i class="conum" data-value="1"></i><b>(1)</b>
"icon": "icon.png", <i class="conum" data-value="2"></i><b>(2)</b>
"logo": { <i class="conum" data-value="3"></i><b>(3)</b>
"dark": "logo-light.png",
"light": "logo-dark.png"
},
"welcome": { <i class="conum" data-value="4"></i><b>(4)</b>
"title": "Welcome to Your Workspace",
"links": ["website", "documentation"]
},
"links": { <i class="conum" data-value="5"></i><b>(5)</b>
"website": {
"name": "Discover Red Hat OpenShift Dev Spaces",
"url": "https://developers.redhat.com/products/openshift-dev-spaces/overview"
},
"documentation": {
"name": "Browse Documentation",
"url": "https://www.redhat.com/docs"
}
}
}</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>name</code>: tab title for the <strong>Welcome</strong> page and the <strong>About</strong> dialog.</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>icon</code>: icon for the <strong>Welcome</strong> page tab title.</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><code>logo</code>: product logo for dark and light themes on the <strong>Welcome</strong> page (maximum height 80 pixels) and in the <strong>About</strong> dialog (maximum height 100 pixels). Use an image with a transparent background. Define a relative path, an absolute path, or a URL to an image.</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><code>welcome</code>: the behavior of the <strong>Welcome</strong> page. Customize the invitation title and the links in the <strong>Help</strong> section. When the <code>welcome/links</code> property is not defined, the <strong>Welcome</strong> page displays the links from the <code>links</code> section.</td>
</tr>
<tr>
<td><i class="conum" data-value="5"></i><b>5</b></td>
<td><code>links</code>: list of helpful resources for the product. Use tags to group links to make them easier to find.</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>To use only one logo image for both dark and light themes:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
...
"logo": "product-logo.png"
...
}</code></pre>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="building-a-che-theia-container-image-with-custom-branding_che"><a class="anchor" href="#building-a-che-theia-container-image-with-custom-branding_che"></a>Building a Che-Theia container image with custom branding</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to build a Che-Theia container image with custom branding applied.</p>
</div>
<div class="ulist">
<div class="title">Prerequisites</div>
<ul>
<li>
<p>A <code>product.json</code> file with custom branding definitions.</p>
</li>
</ul>
</div>
<div class="olist arabic">
<div class="title">Procedure</div>
<ol class="arabic">
<li>
<p>Download an example <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/Dockerfile"><code>Dockerfile</code></a>.</p>
</li>
<li>
<p>In the <code>Dockerfile</code> directory, create a <code>branding/</code> sub-directory. Place the custom <code>product.json</code> file and logo images into the <code>branding/</code> directory.</p>
</li>
<li>
<p>Build the container image with Che-Theia and push the image to a container registry:</p>
<div class="listingblock">
<div class="content">
<pre>$ docker build -t username/che-theia-devspaces:next .
$ docker push username/che-theia-devspaces:next</pre>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="testing-che-theia-with-custom-branding_che"><a class="anchor" href="#testing-che-theia-with-custom-branding_che"></a>Testing Che-Theia with custom branding</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to test a customized Che-Theia by opening a new workspace with custom branding.</p>
</div>
<div class="ulist">
<div class="title">Prerequisites</div>
<ul>
<li>
<p>Che-Theia container image built with custom branding definitions.</p>
</li>
</ul>
</div>
<div class="paragraph">
<div class="title">Procedure</div>
<p>To test a custom Che-Theia image, create a new <code>meta.yaml</code> file describing a custom <code>cheEditor</code>, and use it in a devfile for the testing workspace.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Clone the <code>che-plugin-registry</code> repository and check out the version to deploy. See,</p>
<div class="listingblock">
<div class="content">
<pre>$ git clone git@github.com:eclipse/che-plugin-registry.git
$ cd che-plugin-registry
$ git checkout 7.50.x</pre>
</div>
</div>
</li>
<li>
<p>Open the <code>che-editors.yaml</code> file.</p>
</li>
<li>
<p>Edit the entry where <code>id</code> equals <code>eclipse/che-theia/next</code> and replace the <code>image</code> value in the <code>containers</code> section to point to the custom Che-Theia container image.</p>
</li>
<li>
<p>Build the registry:</p>
<div class="listingblock">
<div class="content">
<pre>$ ./build.sh --organization <em>&lt;my-org&gt;</em> \
--registry <em>&lt;my-registry&gt;</em> \
--tag <em>&lt;my-tag&gt;</em></pre>
</div>
</div>
</li>
<li>
<p>Navigate to the <code>./che-plugin-registry/v3/plugins/eclipse/che-theia/next</code> directory.</p>
</li>
<li>
<p>Publish the <code>meta.yaml</code> file in this directory to a publicly accessible location where it can be used as an HTTP resource.</p>
</li>
<li>
<p>Create a workspace using the sample <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/devfile.yaml">che-theia-branding-example devfile</a> to apply the changes.</p>
<div class="paragraph">
<p>Verify the <code>reference</code> field points to your published <code>meta.yaml</code> file:</p>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="https://workspaces.openshift.com/f?url=https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/devfile.yaml"><img src="../_images/contribute.svg" alt="contribute"></a>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">metadata:
name: che-theia-all
projects:
- name: che-cheia-branding-example
source:
location: 'https://github.com/che-samples/che-theia-branding-example.git'
type: git
branch: master
components:
- type: cheEditor
reference: &gt;-
https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/che-editor.meta.yaml
apiVersion: 1.0.0</code></pre>
</div>
</div>
</li>
<li>
<p>Run the workspace to see the changes:</p>
<div class="ulist">
<ul>
<li>
<p>The dark theme of Che-Theia:</p>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/welcome-dark.png"><img src="../_images/branding/welcome-dark.png" alt="welcome dark"></a>
</div>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/about-dark.png"><img src="../_images/branding/about-dark.png" alt="about dark"></a>
</div>
</div>
</li>
<li>
<p>The light theme of Che-Theia:</p>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/welcome-light.png"><img src="../_images/branding/welcome-light.png" alt="welcome light"></a>
</div>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/about-light.png"><img src="../_images/branding/about-light.png" alt="about light"></a>
</div>
</div>
</li>
</ul>
</div>
</li>
</ol>
</div>
</div>
</div>
</article>
</div>
</main>
</div>
<footer class="footer">
<div>
<a href="https://www.eclipse.org/che/sitemap.xml" target="_blank">Site Map</a> |
<a href="https://www.eclipse.org" target="_blank">Eclipse Foundation</a> |
<a href="https://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a> |
<a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a> |
<a href="https://www.eclipse.org/legal/epl-2.0/" target="_blank">Eclipse Public License</a> |
<a href="https://www.eclipse.org/legal" target="_blank">Legal Resources</a></div>
</footer>
<script src="../../../../docs/_/js/site.js"></script>
<script async src="../../../../docs/_/js/vendor/highlight.js"></script>
<script src="../../../../docs/_/js/vendor/lunr.js"></script>
<script src="../../../../docs/_/js/search-ui.js" id="search-ui-script" data-site-root-path="../../../.." data-snippet-length="142" data-stylesheet="../../../../docs/_/css/search.css"></script>
<script async src="../../../../search-index.js"></script>
</body>
</html>