All elements inherit the default theme font, but fonts can be overridden here on a per-item basis if necessary.This is also where you set different font for items that support them. For example, RichTextLabel supports different fonts for bold, italics, and so on.
Font Sizes decides how large your font is. It is inherited by default from the theme font size, but can be overriden on an individual basis.Some items, like the RichTextLabel again, may support different font sizes:
StyleBoxes is where you can set the background and border of an item. Almost all UI elements (except Containers) have one or more StyleBox attached to them.You know the Button's styleboxes:
This is a special category for your own element variations. For example, you could make a button_large style, that would override the default Button style.
Once you've picked the items to import, you can press "import data", and then "close" (You will get a warning that some items are selected, it's fine).
Creating your own variations
Most games have several types of a same element. For example, the "confirm" and "cancel" button often look different. There's support for that! You can create a custom element:
Press Add Type. Once it's added, you can decide what this element extends from. To make it extend, say, a Button, press the Select the varation base type, and pick the base type:
Once you have named and created your custom style, you can click on any Control element, unfold the Theme field, and write the custom name in the Type Variation field.
Despite extending a specific element, you can still apply the type to any other element.For example, here, I have a my_type custom type that extends a Button and uses a red StyleBoxFlat. If I apply it to the Label, it still works!
Whether you're overriding an existing type, or creating your own custom type, you can use "show default" to see which fields are used by the element. Turning it off will only show fields you have overriden.
Of course, you can see a theme preview right in the editor. It's a great way to test your theme.But you may want more testing. Well, you can use any scene as a test scene (as long as the root is a Control)!Press the Add Preview button:
Pick a scene that has a Control root nodes and a few controls, and you'll see a new tab. Here, I use a custom scene to see a button, and my custom button next to each other:
A cornerstone of the theme is the StyleBox resource. As you design custom interfaces, this is what will probably matter most in how your style looks.There are 4 types of StyleBox: StyleBoxFlat, StyleBoxTexture, StyleBoxLine and StyleBoxEmpty.
In the tutorial, you've used StyleBoxFlat, so I want to explain the second most used StyleBox: StyleBoxTexture. StyleBoxTexture has mostly the same properties as StyleBoxFlat, but it also has a Texture property, as well as provisions for nine slice scaling
9-slice scaling
9-scale-slicing allows to split an image in 9 parts: 3 rows of 3 columns each.This allows to control how the different parts of the image stretch. Generally, we don't want the corners to stretch, for example.This allows to create complex and nice looking panels for text and buttons.More on 9-slice scaling
StyleBoxLine is for drawing a line only. This is mostly for separators; it does not draw an outline, only a single horizontal line.As for StyleBoxEmpty, it's only when you do not want any StyleBox to be applied.
Bonus Trick: Get a quick base theme from the editor
Designing a theme from scratch can be daunting, specially when you want to test an idea or participate in a Gamejam. But at the same time, using the default Godot theme can be a bit boring.Here's a trick to get a quick base theme from the editor.
Nathan
Founder and teacher at GDQuest
The editor itself is a Godot theme. That means you can use the editor theme customizer as a quick template for your game or software!Head to EditorEditor SettingsTheme
You can play with all those options to create a theme base suitable for your game.Here, I picked the "Solarized (Light)" base theme, and changed a few options.Once you're done, press Close.
Save it wherever you like. I named mine main.theme. I find using the .theme extension instead of .tres to be clearer, but feel free to use .tres if you prefer.Click the theme, this will pop up the theme editor.
Importing the editor theme
We want to import elements. Click on Manage Items:
If you know what elements you need, you can import only those. Make sure to tick the "data" column; without that, you'd just import a skeleton of a theme, without the actual colors and images.Importing only the elements you need is better, it will keep the theme light. In my case, I'll just import everything for demonstration purposes. I'll click on Select with Data at the bottom, then Import Selected.
Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.
Changing non-default cursors?SingleMom420Cool guide. I have a question about changing the mouse cursor. I see that we can change the default cursor via project settings. It seems that to change other cursors though (like the "hand pointer" that appears when hovering over [meta]-tagged words in BBcode), we have to do it via code.
So I see there's the `set_custom_mouse_cursor` method in the Godot docs for Input singleton. That seems simple enough to make use of, but I'm unclear of *where* I would call this method in the code. Should I do it in the main scene's `_ready()` method, so it applies throughout the whole game, or do I have to attach scripts to the RichTextLabels that would make use of this and add this line there?32May. 16, 2024
Type Variation video croppedStonemonkeyThe video demonstrating adding a custom style to the Type Variation field is cropped and doesn't show everything.
I can pop the video out on it's own window/tab and see everything, but on the lesson page it is cropped and the cursor actions are obscured.
-edited some grammar10Jul. 15, 2024
Lesson Q&A
Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.