In this guide, I'll walk you through the main areas of the theme editor and how to use them.At the end, you'll learn a neat trick to kickstart your themes.We will cover:
The main areas of the theme editor
The different tabs in the theme editor
How to add new items to a Theme resource
How to quickly generate a theme from the Godot editor theme
The theme editor
We'll look at the three main parts of the editor in this order:
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 fonts for items that support them. For example, the RichTextLabel node supports different fonts for bold, italics, and so on:
Font Sizes determines how large your font appears. It's inherited by default from the theme font size but can be overridden on an individual basis.Some items, like the RichTextLabel node, may support different font sizes:
StyleBox resources are where you can set the background and border of an item. Almost all UI elements (except Container nodes) have one or more StyleBox attached to them.You're familiar with the Button node'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:
You can select the items to import. If you don't check "with data", images and values won't be imported. So you generally always want to enable "with data."
Once you've picked the items to import, click "Import Data", and then "Close." You'll get a warning that some items are selected; it's fine.
Creating your own variations
Most games have several types of the same element. For example, the "confirm" and "cancel" buttons often look different. The theme system supports 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 variation 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 overridden.
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 node 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 used when you don't want any StyleBox to be applied.
Bonus trick: get a quick base theme from the editor
Designing a theme from scratch can be daunting, especially when you want to test an idea or participate in a Game Jam. 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 Settings...Theme (on macOS, GodotEditor Settings...Theme)
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, and this will open 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, as 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?33May. 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.