Customization – SeekThemes

General Configuration

Almost all the configuration can be found in WebStore > Appereance > Edit Template > Options, excluding some exceptions that will be covered below.

Configuring Navbar Icons

Edit layout.html and scroll around line ~46, you should find the following config.

layout.html

nav_icons: {
    'index': 'https://i.ibb.co/47Cn8mm/huqn.png',
    'ranks': 'https://i.ibb.co/tJhhDfY/thal.png',
}

In order to add a new icon, just add a new line. The first attribute should be the category slug (how to get the slug) and the second is the image url.

layout.html

{
    'category-slug': 'https://example.com/image.png',
}

Configuring Package Badge

Edit layout.html and scroll around line ~60, you should find the following config.

layout.html

badge: {
    text: '<span class="mdi mdi-plus"></span> Good Deal',
    packages: [
        '4215903',
    ]
}

In order to add the badge to a package, you just need to specify a new package id. You can get the package id by editing a package and looking at the url.

Changing the colors

In order to change the colors of the template, check the first lines of style.css

style.css

:root {
  --background: rgb(28, 36, 44);
  --background-transparent: rgba(28, 36, 44, 0.85);
  --footer: #141820;
  --transparent: rgba(255, 255, 255, 0.15);
  --panel: #25323E;
  --border: #2C3A47;
  ... and more
}

Stacked Packages

In order to set up stacked packages, you will need to edit layout.html and add your category in the config, like this:

layout.html

stacked_categories: [
  'crates',
],

It should be around line 55. Now, you just need to create packages. You will need to respect the following format. The packages will be grouped automatically by the name you set before " | ". The image and description will be pulled from the first package.

Setting up headings

Edit the description

Go to Webstore > Pages, edit Homepage and use Code View to edit the description

Insert the category-title class

Add the following class to any heading you want to be styled: class="category-title"
For example <div>Support</div> to <div class="category-title">Support</div>

For a red heading, use class="category-title category-title--red" instead.

Creating a Patrons Page

In order to create a Patron Page, go to Website > Pages, create a page and add the following HTML code using the source editor:

This is an example code showing a single category. You can edit it and add as many players & categories you want.

tebex page code view

<div class="category-title">$1000+</div>
<div class="patrons">
  <div class="patron">
    <div class="patron__name">qSeek</div>
    <div class="patron__skin">
      <img
        src="https://mc-heads.net/body/qSeek/left"
        class="fr-fic fr-dii"
        alt="left"
        width="180"
        height="432"
      />
    </div>
  </div>
  <div class="patron">
    <div class="patron__name">qSeek</div>
    <div class="patron__skin">
      <img
        src="https://mc-heads.net/body/qSeek/left"
        class="fr-fic fr-dii"
        alt="left"
        width="180"
        height="432"
      />
    </div>
  </div>
  <div class="patron">
    <div class="patron__name">qSeek</div>
    <div class="patron__skin">
      <img
        src="https://mc-heads.net/body/qSeek/left"
        class="fr-fic fr-dii"
        alt="left"
        width="180"
        height="432"
      />
    </div>
  </div>
  <div class="patron">
    <div class="patron__name">qSeek</div>
    <div class="patron__skin">
      <img
        src="https://mc-heads.net/body/qSeek/left"
        class="fr-fic fr-dii"
        alt="left"
        width="180"
        height="432"
      />
    </div>
  </div>
</div>

Installation Installation