SleekBuy
Customization
Configure SleekBuy for Tebex
Customization
Colors
Edit the CSS variables at the top of style.css:
:root {
--main-color: #3498db;
--main-color-transparent: rgba(52, 152, 219, 0.6);
}For the transparent version, convert your hex to RGB and add opacity (e.g., rgba(52, 152, 219, 0.6)).
Topbar Navigation
In layout.html, find the navigation <ul> in the header:
<ul>
<li><a href="/"><i class="fas fa-home"></i> <span class="text">Home</span></a></li>
<li><a href="https://forums.example.com"><i class="fas fa-comments"></i> <span class="text">Forums</span></a></li>
<li><a href="https://bans.example.com"><i class="fas fa-shield-alt"></i> <span class="text">Bans</span></a></li>
</ul>Change the href, text, and icon class. Icons are from Font Awesome 5.
Footer Links
In layout.html, find the footer <ul>:
<ul>
<li><a href="https://example.com/terms">Terms of Service</a></li>
<li><a href="https://example.com/privacy">Privacy Policy</a></li>
<li><a href="https://example.com/refunds">Refund Policy</a></li>
</ul>Category Icons
Add this CSS to the end of style.css:
.navbar-nav > li a:before {
content: "";
position: absolute;
width: 32px;
height: 32px;
display: block;
top: 0;
bottom: 0;
left: -22px;
margin: auto;
}
.navbar-nav > li > a {
margin-left: 32px;
}Then add an icon for each category by position:
/* First category */
.navbar-nav > li:nth-child(1) > a:before {
background: url("https://example.com/icon1.png") no-repeat center;
background-size: cover;
}
/* Second category */
.navbar-nav > li:nth-child(2) > a:before {
background: url("https://example.com/icon2.png") no-repeat center;
background-size: cover;
}Use 32x32px PNG images.