seekthemes docs
Atom

Customization

Configure Atom for Tebex

Customization

Most settings are in Webstore → Appearance → Edit Template → Options.

For advanced customization, edit the template files directly.


Colors

Edit the CSS variables at the top 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;
}

In layout.html, find nav_icons around line 46:

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

Add a new line with your category slug and image URL. You can find the category slug in Tebex → Packages → Edit Category → Advanced.


Package Badges

In layout.html, find badge around line 60:

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

Add package IDs to the array. Find the ID in the URL when editing a package.


Stacked Packages

Group packages into expandable cards. In layout.html, find stacked_categories around line 55:

layout.html
stacked_categories: [
  'crates',
],

Add your category slug, then name packages with this format: GroupName | VariantName

Example: Diamond Crate | x1, Diamond Crate | x5, Diamond Crate | x10

Stacked packages


Headings

Add styled headings to any page using code view:

<div class="category-title">Your Heading</div>

For a red variant:

<div class="category-title category-title--red">Sale Items</div>

Headings example


Patrons Page

Create a new page and add this in code view:

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

Replace PlayerName with actual usernames. Duplicate the patron div for more players.