Add branding icon

How would I go about adding a brand icon to the top toolbar - do I need to edit the browser code?

[original thread by shortwavedave]

@vince-fugnitto could you help please?

@shortwavedave would you like to add a brand icon to the menu? (e.g. besides the File menu item)

[shortwavedave]

[shortwavedave]

Here’s a screenshot from gitpod - how does one go about adding icons like that?

@shortwavedave in the past there has been efforts to create an extension to provide APIs to easily update icons and other branding but it has yet materialized into fruition. For the moment you can simply create a small extension which provides the logos similarly to what I’ve done in the past here https://github.com/vince-fugnitto/theia-cpp-branding

The main idea is to simply provide icons for the css classes at these locations:

.theia-icon {
    background-image: var(--theia-menu-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

 #theia-main-content-panel {
    background-image: var(--theia-brand-logo);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: var(--theia-brand-logo-size);
}

Here I had a custom icon for the main menu, and for the area behind the editors when no content is present.

this area of the shell is called top

You can add custom widgets to it with custom styles.

for example to add an account widget as in Gitpod

[shortwavedave]

awesome, I’ll give it a shot. Thanks guys

@akosyakov @vince-fugnitto
I added a widget to the middle of the top-bar(application name widget). the widget is responsively centered with the help of css and dummy widgets.
My concern is that you will add another widget to the top-bar and so my widget will no longer be centered.

Do you have any plans to add a widget to the top bar? or other solution for centered widget in the top bar?

@DoroNahari perhaps you can share a screenshot of what you’ve achieved, from your description I understood that you’ve added a custom area above the main-menu for which you’ve added a logo?

If it’s the case and it is custom, I don’t think there are plans to add any widget in this area from the framework’s point of view and it’d be up to application-developers to implement it and maintain it.

The text pointed here is a widget of the top area

I do not think there are plans to maintain such an appName, especially at the same level as the main-menu. I believe on the browser the name is present on the tab, and in electron the window name is similar to your screenshot. I’m not sure what the behaviour would be in your case if additional main menu entries are contributed. I thought perhaps your implementation would add the name above the main menu area.

@vince-fugnitto it could be cool though to add this feature or similar to an example application. Maybe theia-docker? This way IDE developers can use it as an example.

@marcdumais-work the best place to have an example would probably be @theia/api-samples, if we were to add the feature in the docker image it would require a new extension that would need to be maintained and I’m not sure where it would live.

As I mentioned, I’m not sure about the feature as the electron and browser targets already display the app name (electron on the window, and for the browser the tab). Also, adding a name directly in the main-menu would cause issues when multiple main-menus are registered or the window is resized so I’m not entirely fond of it.

it would require a new extension that would need to be maintained and I’m not sure where it would live.

Not that it’s a high priority, but I would like to have such an open-source example as well, where a “local” Theia extension lives alongsides a Theia application using it. We’ve done similar a few times, but I am not sure we’ve found an ideal setup yet.

I do not no how to add widget to the shell top? Can you show me a demo?