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:
: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;
}Navbar Icons
In layout.html, find nav_icons around line 46:
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:
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:
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

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>
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.