seekthemes docs
SleekStore

Customization

Configure SleekStore for CraftingStore

Customization

Main settings are in base.html. Go to Design → Templates → Edit.

base.html
var serverip = 'mc.yourserver.net';
var port = 25565;
var default_theme = 'light';
var particles_enabled = true;

Colors

Edit the CSS variables in style.css:

style.css
:root {
  --main-color: #3498DB;
  --main-color-transparent: rgba(52, 152, 219, 0.6);
  --sleek-logo-size: 250px;
}

Background

In style.css, find .headerbg:

style.css
.headerbg {
    background: url(https://example.com/your-background.png);
}

Topbar Navigation

In header.html, edit the <ul>:

header.html
<ul>
    <li><a href="/"><span class="material-icons">home</span><span class="text">Home</span></a></li>
    <li><a href="https://forums.example.com"><span class="material-icons">forum</span><span class="text">Forums</span></a></li>
    <li><a href="https://bans.example.com"><span class="material-icons">block</span><span class="text">Bans</span></a></li>
</ul>

Icons are from Material Icons.


Edit footer.html:

footer.html
<div class="seekrow">
    <div class="block">
        <img src="{{ store.logo_url }}">
    </div>
    <div class="block">
        <div class="title">About Us</div>
        <div class="text">Your store description goes here...</div>
    </div>
    <div class="block">
        <div class="title">Quick Links</div>
        <ul>
            <li><a href="https://forums.example.com">Forums</a></li>
            <li><a href="https://discord.gg/yourserver">Discord</a></li>
        </ul>
    </div>
</div>

Announcement Banner

Add this to the beginning of your Homepage in code view:

<div class="announce">
    <div class="bar">
        <i class="fas fa-bullhorn"></i>
        <span class="text">Summer Sale: <strong>25% off all ranks!</strong></span>
        <div class="button">
            <a href="/category/ranks">Shop Now</a>
        </div>
        <div id="particles-js"></div>
    </div>
</div>