Safe Advanced Workflow

1. Build your base style in normal sections first (Theme, Background, Colors, Typography).
2. Add Slot A/B/C HTML content blocks.
3. Style each slot block inside that slot HTML using inline style="..." attributes.
4. Add static slot stickers (1-3 total to start).
5. If you want old-web runner motion, use Profile Screen Stickers controls (Position/Path/Direction/Speed/Size).
6. Use Custom CSS Box for global profile polish and My CSS for selector inspection.

Slot Styling Rule (Important)

When users want styling for HTML slot content, put the styling in the HTML slot content itself. Keep it element-level and explicit.

Slot HTML Example (Safe Pattern)

<div style="background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;">
  <h3 style="margin:0 0 8px;color:#f1f7ff;">Custom Slot Card</h3>
  <p style="margin:0;color:#cfe0ff;line-height:1.6;">
    This block is styled directly inside the slot.
  </p>
  <a href="https://society.simplysoundadvice.com" target="_blank" rel="noopener noreferrer"
     style="display:inline-block;margin-top:10px;color:#8df8ff;text-decoration:none;border-bottom:1px dashed rgba(141,248,255,.55);">
    Visit SSS
  </a>
</div>

Custom CSS Box vs Slot HTML

Custom CSS Box Learning Examples

These are profile-wide examples for Custom CSS Box. Start with one block at a time, save, and verify readability.

1) Neon Heading Flicker

/* Neon heading animation */
@keyframes sssFlicker {
  0%   { opacity: 1;   text-shadow: 0 0 10px #00ffee; }
  50%  { opacity: 0.7; text-shadow: 0 0 15px #00ffee; }
  100% { opacity: 1;   text-shadow: 0 0 10px #00ffee; }
}

h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 0 10px #00ffee, 0 0 30px #00ffee;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: sssFlicker 1.5s infinite alternate;
}

2) Links + Buttons + Inputs

/* Link style */
a {
  color: #00ffee !important;
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #00ffee;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 15px #00ffee;
}

a:hover::after { transform: scaleX(1); }

/* Controls */
button, .btn, .nav-link, .menu-item {
  background: transparent;
  border: 2px solid #00ffee;
  color: #00ffee !important;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

button:hover, .btn:hover, .nav-link:hover, .menu-item:hover {
  background: #00ffee;
  color: #000 !important;
  box-shadow: 0 0 15px #00ffee;
}

input, textarea {
  background: transparent;
  border: 2px solid #00ffee;
  color: #ffffff;
  padding: 10px;
}

input:focus, textarea:focus {
  box-shadow: 0 0 15px #00ffee;
  border-color: #00ffee;
}

3) Header Cover Glow

/* Header cover highlight */
.profile-header-cover {
  background: url('https://media1.tenor.com/m/hPtAvzKVMI8AAAAC/society-historyoftheentireworld.gif') center/cover fixed !important;
  box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.8);
  border: 3px solid rgba(0, 255, 255, 0.7);
}

Static Slot Stickers

• Use one direct image URL per line.
• Prefer PNG/WebP and reasonable dimensions for performance.
• Start with 1-3 stickers for a clean look.
• Slot stickers are static by design in the current stack.

https://example.com/sticker-1.png
https://example.com/sticker-2.webp

Screen Runners (Fixed Overlay)

Use this when you want old-internet style moving stickers that stay on screen while the page scrolls.

1. Paste direct URLs into Profile Screen Stickers (one URL per line).
2. Choose Position: Top, Middle, Bottom, or Mixed.
3. Choose Path: Horizontal Loop, Diagonal Loop, Float, Bounce, or Static.
4. Choose Direction, then tune Speed and Size.
5. Save and verify readability on desktop and mobile.

Common Fixes

• Slot looks unstyled: add inline style attributes directly in the slot HTML markup.
• HTML is stripped: remove scripts/event handlers and keep to safe tags/attributes.
• Embed disappears: use approved embed hosts and HTTPS URLs.
• Stickers not showing: verify direct image URLs (not pages) and valid file extension/response.
• Runner not moving: set Path to Horizontal/Diagonal Loop and confirm Direction is not blank.
• Runner in wrong area: change Position lane (Top/Middle/Bottom/Mixed).
• Custom CSS seems ignored: inspect My CSS, use more specific selectors for profile-level targets.

FAQs