# Theme

This page covers how to create custom themes, which involves editing pixel textures. The plugin already offers several standard themes, so if those are sufficient - [here's](https://tooltips.gitbook.io/tooltips/plugin/commands#sending-themes-and-presets) how to use them.

Themes define how tooltips look. They provide the texture, define how many lines the theme supports and some ascent settings.

## Where to configure themes <a href="#where" id="where"></a>

### Configuration

Themes are configured inside <mark style="color:red;">`plugins/Tooltips/themes`</mark>. Any <mark style="color:red;">`.yml`</mark> file inside of that folder or any subfolders will be checked for theme configurations. So you can configure your themes for example in:

* <mark style="color:red;">`/themes/mythemes.yml`</mark>
* <mark style="color:red;">`/themes/mythemes/themes.yml`</mark>

Where <mark style="color:red;">`mythemes`</mark> -name can be anything you want.

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2F2Ik5lZQ9bJK4ntmXLS7y%2Fimage.png?alt=media&#x26;token=c2505fc5-3135-470f-81dc-b77c0f66d21a" alt="" width="495"><figcaption><p>All themes go in this directory</p></figcaption></figure>

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2Fup9lSH0Qpw0wFd3Rt7Jx%2Fimage.png?alt=media&#x26;token=f01d300a-dffd-4367-a2a4-6615bdc123da" alt="" width="502"><figcaption><p>Any file name ending with .yml is supported. Even in sub-directories created inside <code>themes</code></p></figcaption></figure>

### Textures

Textures for themes have to be located inside <mark style="color:red;">`plugins/Tooltips/pack/assets`</mark>. That path resembles a normal resource pack, which supports [namespaces](https://minecraft.wiki/w/Tutorials/Creating_a_resource_pack#Adding_a_namespace_folder).&#x20;

***

## Example configuration

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FPee4GrKmVN3sIFOHh6Tk%2Fimage.png?alt=media&#x26;token=b45be72d-480e-43c1-9661-6371a1f97e79" alt=""><figcaption><p>Example used</p></figcaption></figure></div>

{% file src="<https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FZCXfFgRa0StmxT3h86cu%2Ftheme-one.png?alt=media&token=4a718785-1b0b-46af-8df3-dcef55e0d32e>" %}
Texture used above
{% endfile %}

```yaml
theme-one:
    path: "tooltips:tooltips/theme-one.png"
    height: 10
    padding: # Optional
      left: 1
      right: 0
    lines: 1
    ascents:
        theme-ascent: 0
        text-start-ascent: -3
        text-line-spacing: 5
```

### Properties

#### path

The path to the texture inside `.../pack/assets/`. Uses namespaces, exactly how Minecrafts namespaces work.

Example texture used is located in `.../pack/assets/`<mark style="color:red;">`tooltips`</mark>`/textures/tooltips/theme-one.png`. Where the highlighted part is the namespace used ( <mark style="color:red;">`tooltips:`</mark> ).

{% hint style="warning" %}
The amount of lines that a theme supports depends on the texture and its height. You will have to edit the textures yourself if you wish to support more lines. [Here's how](https://tooltips.gitbook.io/tooltips/configuration/theme/theme-textures).
{% endhint %}

#### height

Property that controls the size of the texture. Normally when working with fonts, this value would be equal to the height of the texture in pixels. However when working with tooltips, that would result in a texture that is overly large. That's why the best height is usually the textures size divided by two.

In the example above, `theme-one.png` textures height is 20 pixels, so it's height is set as 10. \
If it was instead 20 pixels, it would look like this:

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FnmcLgAn0X7KBBtMjqixd%2Fimage.png?alt=media&#x26;token=8a817d9d-5a9a-49c0-bb66-50222c9ad7bf" alt="" width="275"><figcaption><p>height: 20</p></figcaption></figure></div>

####

#### padding

Defines how much space (in pixels) is added to the left or right part of the text.

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FpqLaUZPs361BXM7tU15p%2Fimage.png?alt=media&#x26;token=f8a3b7cf-1851-4934-b6fd-76dfa19613e5" alt=""><figcaption><p>padding: 2</p></figcaption></figure></div>

####

#### lines

How many lines does this theme support. This affects how many line files the plugin generates. If a tooltip uses more lines than its theme supports, the extra lines will show up broken.

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FIwzdqm8eUZvxQxMUBgLr%2Fimage.png?alt=media&#x26;token=0cdf6089-6e0e-43f0-ab15-0b2ab9fadd3d" alt="" width="507"><figcaption><p>lines: 1, but we're trying to add two lines through the newline "\n"</p></figcaption></figure></div>

{% hint style="warning" %}
The amount of lines that is put here does *<mark style="color:red;">**not**</mark>* change the height of the texture. You will have to do that yourself using [this guide](https://tooltips.gitbook.io/tooltips/configuration/theme/theme-textures).
{% endhint %}

#### ascents

Acents in resource packs define how high something is offset from its origin point. The higher the ascent is, the higher the offset is vertically (up). The lower it is, the lower the offset is vertically (down). Can go in the negatives.

#### theme-ascent

Defines how high the theme is displayed.&#x20;

Can at maximum be as much as the height of the theme. Minimum is not limited.

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FIrQFco1jJg7N2Y80TBFq%2Fimage.png?alt=media&#x26;token=308c30a8-a4af-4fd5-a8f8-7a6f0ae43841" alt="" width="328"><figcaption><p>theme-ascent: 0</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FENVDkVAbJkJMCxd9KgOR%2Fimage.png?alt=media&#x26;token=18c13dd5-9d5e-48bc-b00c-1bbad88d7793" alt="" width="328"><figcaption><p>theme-ascent: -10 (text-start-ascent must also be modified)</p></figcaption></figure></div>

#### text-start-ascent

Defines how high the first line of text is displayed.&#x20;

Can at max be 5, due to the fonts height being 5. Minimum is not limited.

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FyiWND9Va5gqm3f28lRzx%2Fimage.png?alt=media&#x26;token=c9355141-3919-421e-ae3a-d5c3d8801ca2" alt="" width="304"><figcaption><p>theme-ascent: 0 and text-start-ascent: 0</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FB05IOPB5ylJueA131m2g%2Fimage.png?alt=media&#x26;token=ea5c7ad9-1fbb-4e3d-9fb5-08092cc6cb6d" alt="" width="302"><figcaption><p>theme-ascent: 0 and text-start-ascent: -3</p></figcaption></figure></div>

#### text-line-spacing

Is an useful option for multi-line tooltips. Defines in pixels the space between each new line.

<div align="left" data-full-width="false"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2F6wzZYh8sSVGNLpLZBdkW%2Fimage.png?alt=media&#x26;token=cb6003e4-dd9f-408d-8c6c-530a1842ae8c" alt="" width="547"><figcaption><p>text-line-spacing: 5</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2F3nVgVPtRzOB5kJh9AYHp%2Fimage.png?alt=media&#x26;token=9b930781-3a91-4ffc-88b6-5b4fdf2d8084" alt="" width="545"><figcaption><p>text-line-spacing: 3</p></figcaption></figure></div>
