> For the complete documentation index, see [llms.txt](https://lixeldesign.gitbook.io/tebex/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lixeldesign.gitbook.io/tebex/rock-template/add-ons/rank-table.md).

# Rank Table

## Installation

{% stepper %}
{% step %}

### Downloading the add-on

Download the add-on from the [resource page](https://builtbybit.com/resources/rock-tebex-template-bedrock-crates.71241/).

You will receive a separate ZIP folder. **Unzip** it and remember where your the downloaded folder is located.
{% endstep %}

{% step %}

### Uploading the add-on

1. Inside the Tebex dashboard, [go to the appearance page](https://creator.tebex.io/appearance) and click on "**Launch Editor**".

<figure><img src="/files/tYrMODOQMXMpByNkU6by" alt=""><figcaption></figcaption></figure>

2. Scroll down **a bit** in the left sidebar and click on "**Add**"

<figure><img src="/files/aTxHwPASsLSfYjkOVIZm" alt=""><figcaption></figcaption></figure>

3. Select `twig` as the file type.

<figure><img src="/files/BRPoQnymtgB0lAhFKuyK" alt=""><figcaption></figcaption></figure>

4. Click on "**UPLOAD**"

<figure><img src="/files/N13cUqPWl0KpeUw9Jee1" alt=""><figcaption></figcaption></figure>

5. Select the `rank-table.twig` file inside your downloaded add-on folder and click on "**Upload file**". Click on "**Save as Draft**" and then on "**Publish**" (at the top right corner of the screen).

<figure><img src="/files/GBgnjqTJRfN4FfxyHZ69" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enabling the add-on

1. Close the HTML editor and [go to the package section](https://creator.tebex.io/packages). Select the category you want your rank table to be in and open the category settings.
2. **Copy** the `category ID` from your rank category. You will find the category ID inside the URL.

<figure><img src="/files/O6PcRTtygBnujwduS27g" alt=""><figcaption></figcaption></figure>

3. [Go back to the appearance page](https://creator.tebex.io/appearance), scroll down and click on "**Rank Table**".

<figure><img src="/files/fVG7Si1rltl9hoNVGfGX" alt=""><figcaption></figcaption></figure>

4. Turn the "**Toggle Rank Table**" setting to `On` and paste the `category ID` you have copied before inside the "**Category ID**" field.
5. Scroll up, click on "**Save as Draft**" and then on "**Publish**".

<figure><img src="/files/rwvr72ipYLlfmxbyEw8w" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Done! When opening your rank table category inside your webstore, you should see a difference.

Don't worry if it looks broken. We have to set up your ranks.
{% endhint %}
{% endstep %}
{% endstepper %}

## Settings

Launch the **HTML editor**, scroll down in the left sidebar and search for the `rank-table.twig` you have uploaded before. **Open the file** by clicking on it.

You will see some code which is not relevant for you. **Do not touch it**.

Every single feature looks like the following one at the end of this page. There are **DIFFERENT** example features which explains how to use **checkmark** features, **text** features or **colored** text features.&#x20;

The differences are easy to see. To add an own feature, just copy the right example feature and paste it. **Just make sure the schema of this file stays the same.**

### **Using more or less ranks**

You can easily adjust the amount of ranks. Just remove a feature line like the following example shows.

{% code title="Example feature (using 3 ranks)" lineNumbers="true" %}

```html
<!-- START: EXAMPLE FEATURE (Checkmark) -->
<div class="feature-row">
    <div class="feature-description">Description of this example feature</div>
    <div class="feature-no"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-no"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-yes"><i class="fa-solid fa-circle-check"></i></div>
</div>
<!-- END: EXAMPLE FEATURE (Checkmark) -->
```

{% endcode %}

{% code title="Example feature (using 5 ranks)" lineNumbers="true" %}

```html
<!-- START: EXAMPLE FEATURE (Checkmark) -->
<div class="feature-row">
    <div class="feature-description">Description of this example feature</div>
    <div class="feature-no"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-no"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-yes"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-yes"><i class="fa-solid fa-circle-check"></i></div>
    <div class="feature-yes"><i class="fa-solid fa-circle-check"></i></div>
</div>
<!-- END: EXAMPLE FEATURE (Checkmark) -->
```

{% endcode %}

{% hint style="info" %}
The feature lines should be in the same order as your ranks are.
{% endhint %}

### How to highlight a feature

To highlight a feaute, you can just add `popular` behind `feature-yes`, `feauture-now` or `feature-text`.

```html
<div class="feature-text popular">48 Slots</div>
```

### Adding a feature category

You can separate your features with categories. Just paste the following code **between** two features.

<pre class="language-html" data-line-numbers><code class="lang-html"><strong>&#x3C;!-- START: FEATURE CATEGORY SEPARATOR -->
</strong>&#x3C;div class="feature-category">Example Category Separator&#x3C;/div>
&#x3C;!-- END: FEATURE CATEGORY SEPARATOR -->
</code></pre>

***

You can save and publish as many times you want. It is recommended to first try out some settings before editing the whole rank table.

{% hint style="info" %}
Taking the example rank table as a template will save you time and help you to understand how the rank table add-on works.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://lixeldesign.gitbook.io/tebex/rock-template/add-ons/rank-table.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.