Advanced: HTML Slots + Stickers + Custom CSS + My CSS + Previewer
Advanced is where your profile becomes a mini-website — safely. You can add HTML blocks (Slots A/B/C),
add stickers (image URLs), and add CSS. You can also view your generated CSS and use the Previewer to test.
📸 What you’ll see in Advanced
This matches the Advanced section on the Settings screen.
The Custom CSS Box does NOT style your HTML Slot blocks automatically.
If you want a Slot to look styled, you must add CSS inside the HTML Slot
(using a
<style> tag) or use inline styles on your HTML elements.
Use Custom CSS Box for the rest of your profile (global tweaks, overrides, UI polish).
🧱 The Advanced layering rule (simple version)
- Theme + settings build your main look (Background, Colors, Widgets, etc.).
- HTML Slots add custom content blocks.
- Slot styling must live inside the Slot HTML (inline styles or a
<style>block). - Custom CSS Box is for global profile styling (not Slot block styling).
- My CSS shows your generated CSS (read-only).
🧩 Part 1 — HTML Slots (A / B / C)
Slots A, B, and C are safe HTML containers. Use them for custom cards, link grids, callouts, mini banners, and more.
Scripts/unsafe embeds are blocked on purpose.
Use simple tags like
div, p, a, img, h3, ul, li.Avoid scripts and “onclick/onload” stuff.
🎨 Slot styling (THIS goes inside the Slot HTML)
If you want your Slot to look like a card, add a small style block inside the slot.
Here’s a copy/paste starter kit (safe and readable):
<style>
/* Slot base card styling */
.sss-slot-card{
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 14px 16px;
margin: 12px 0;
}
.sss-slot-card h3{
margin: 0 0 8px;
font-size: 16px;
}
.sss-link-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.sss-link-btn{
display: block;
text-align: center;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.25);
}
.sss-link-btn:hover{
filter: brightness(1.12);
}
</style>If your theme is light, change the Slot background to a lighter RGBA (example:
rgba(255,255,255,0.85))and use darker text.
✅ HTML Slot examples (copy/paste)
<style>
.sss-slot-card{background:rgba(0,0,0,.45);border:2px solid rgba(0,255,255,.35);border-radius:14px;padding:14px}
.sss-slot-card h3{margin:0 0 8px 0;letter-spacing:.6px;text-transform:uppercase}
.sss-slot-card p{margin:0;line-height:1.6}
</style>
<div class="sss-slot-card">
<h3>Neon Command Core</h3>
<p>Builder • Gamer • Music-Driven</p>
</div><div>
<a href="https://open.spotify.com" target="_blank" rel="noopener">Spotify</a> ·
<a href="https://youtube.com" target="_blank" rel="noopener">YouTube</a> ·
<a href="https://discord.com" target="_blank" rel="noopener">Discord</a>
</div>🧷 Part 2 — Stickers (one URL per line)
Stickers are decorative image overlays. Add direct image URLs, one per line, for Slot A/B/C stickers.
Smaller files load faster. Transparent PNG/WebP looks best.
https://example.com/sticker1.png
https://example.com/sticker2.gif1–3 stickers looks premium. 12 giant GIFs looks like your profile is buffering in 2009.
🎨 Part 3 — Custom CSS Box (global profile styling)
This CSS is applied to your profile context and is best for global tweaks:
headings, links, button polish, minor layout fixes, theme overrides.
But again: it won’t automatically style your Slot HTML blocks.
- Small overrides when a UI setting can’t do it
- Extra polish (spacing, shadows, hover tweaks)
- Theme-wide accent consistency
📄 Part 4 — My CSS (read-only)
“My CSS” shows the CSS generated by your settings. Use it like a detective:
find the selector that controls something, then override it in Custom CSS Box (for global UI),
or inside your Slot HTML (for slot content).
🧪 Part 5 — Previewer
The Previewer is your test lab. Use it to verify Slot layout, sticker placement, and general styling changes without bouncing around.
Best workflow: change one thing → wait for Saved → preview → repeat.
🛠 Troubleshooting (fast fixes)
- Slot HTML looks unstyled: add inline styles or a
<style>block inside the Slot HTML. - HTML got stripped: scripts/unsafe tags are removed. Use safe tags only.
- Custom CSS doesn’t apply: your selector may be too weak — check My CSS and use a stronger selector (and
!importantonly when needed). - Stickers slow the page: use smaller PNG/WebP, reduce count, avoid huge GIFs.
- Preview differs from live: some elements only render on the full profile view — confirm on your real profile page after testing.
Slot A: welcome card · Slot B: link grid · Slot C: quote · 1 small sticker max · keep CSS tidy.
