Styling Kit application Core interface

Omniverse Core Platform Kit SDK
,
1

I was watching this Learn With Me by Ashley Goldstein

I can see that this is for version 105.x something and i’m using at least106.x at this point. So i can see that it is possible to style the main window for my custom kit applications. I’m really trying to find some documentation on this online so i can style the core kit applicaiton interface.

  • Is there any documentaiton on this somewhere?
  • Is the documentation for that Learn with me session available somewhere?
  • Is this still something that is possible in later versions of the Kit application?

Super appriciate any information that can guide me in the right direction.

2

You can create a style dictonary and assign it to the overall application using:

import omni.ui as ui

ui.Style.get_instance().default = myStyle

Where myStyle is your dictionary containing the styles for your UI elements. You can see what you can adjust in their style sheet syntax.

The Style Sheet Syntax — Omniverse Kit

1 Like
3

But where do you input that?

Style Sheet Syntax is indeed a good resource. I use it a lot when styling extensions.
But now i’m trying to style the core app.

4

You can do that in the startup of a custom extension.

5

And it would apply for the whole core application(Kit SDK) not just the extension?

Like this
Develop a USD Explorer App — kit-app-template 105.1 documentation

In this section: Example: Title Bar (Windows only)

image

So hard to try to figure out the rest though. Like how do i style the toolbar, backgrounds etc etc.

6

I’ve tried also to enable the debug window and change the colors in there.

debug_settings
debug_settings801×599 43.1 KB

  • Changing colors = Nothing happends
  • Changing font sizes = Nothing happends
  • Changing icon sizes = Nothing happends
  • Changing the main window title = Works!

Some color codes are purely in a float. like 65343.0 and others are in a 0xCCCCCC format.
When entering a new hexadecimal color i get a warning No match for “HEX COLOR”!

Feels a bit like i’m doing stuff in the right place but nothing happends so i’m fumbling in the dark here. And i can’t really relate anything to the actual UI by trial and error.

7

Hi there and thanks for your post. I would start here at Overview — Omniverse Kit This is the homepage for Omni.UI. Under this you will find a lot of detail in customizing all of the aspects of the UI with examples you can try as well.

8

I agree and i have reviewed this page a number of times. I also reviewed the style guide page so i’m well aware of how to style my custom extensions.

I think the information i am looking for is related more to getting a hold of the different parts of the UI in the Custom Kit Application and finding out where and how the style is added and applied. So that i can make a structured effort in styling the Kit Core Extensions and Custom Kit Application as well as the different custom extension that i am writing.
Like indicated here:

application_kit_stack
application_kit_stack3408×1668 231 KB

For the Custom Kit application :

  • I know i can style the title bar name and colors by adding the omni.kit.window.modifier.titlebar
  • I can see that i am also able to add a border to the main window and change the color of it.
  • I can figure out how to change the application icon.
  • What else is part of the Custom Kit Application that i can change?

But like what if i want to make the titlebar higher or shorter, or if i want to make the general background in the core application pink. What else is there that is part of the core kit application and what is a extension.

These are also questions i’m looking for answers to:

  • I’m assuming that if i want to style the viewport then i need to find the viewport extension(Kit Core Extension), correct?
    • –>Same goes for the toolbar and all the editor windows(Kit core extensions), correct?
  • Am i correct in assuming the styling for the Custom Kit Application is added in the myCompany.company.editor.kit?
  • Why are some colors in hex code and some just numbers in the dev ui?
  • Why am i getting a warning that says: “No match for !” even though i have a correct hex color?

I’m also running a separate thread to this for gradients in the UI so i’m going to try and build with the 107.x version of the Kit SDK now also. Lets see if this clears up some of my questions.