Theme school

Theme Tutorials

Learn how to make a page that could only be yours - presets, GIF backgrounds, FX, and a real CSS sandbox with copy-paste snippets.

Theme Store FAQ Open my editor

1. The 60-second path

Go to your profile → Edit page.
Hit Customize Theme Live.
Look: pick a preset, then tweak colors, Tile GIF / Cover background, borders, radius, glow.
FX: particles + custom cursor.
CSS: click snippets or paste from this page. Changes apply live.
Optional: publish to the Theme Store so others can install your look.

2. What the visual editor can do

20 presets including Vapor VHS, Glitter Bomb, Toxic Slime, Y2K Chrome, Scrapbook Crush - many ship with baked CSS wow.
Background modes: solid, gradient, tiled GIF/image, full-bleed cover + fixed/scroll attachment.
Panel chrome: border style / width / radius + glow presets (soft, neon, gold).
11 palette slots including panel headers, links, borders.
8 particle FX + custom cursors.

3. CSS sandbox rules

Scoped to .flare-theme-scope (your profile page + music player). Top navigation is never themed.
Player hooks: .flare-music-player, .flare-music-bar, .flare-music-title. Prefer colors / borders - don't change position /display on the shell.
Blocked: @import, javascript:, expression(), binding hacks.
Allowed: @keyframes, filters, text-shadow, borders, transforms…
Cap: ~32k characters. Lint warnings show in the CSS tab.

4. Selector cheat sheet

Selector	Targets
.flare-profile-root	Whole profile page
.flare-panel	Any panel box
.flare-panel-header	Panel title bars
.flare-guestbook	Guestbook block
.flare-top8	Top Friends grid
.flare-webring	Web Ring strip
.flare-hero-photo	Main photo frame
.flare-status	Status line under name
.flare-sparks	Sparks / reactions panel
.flare-visitors	Visitors panel
.flare-music-player	Music player shell (safe to theme)
.flare-music-bar	Player bar card
.flare-music-title	Now-playing title
.flare-music-artist	Now-playing artist
.flare-music-btn	Player control buttons
.flare-music-seek	Seek / progress slider
.flare-music-panel	Radio / playlist popovers
.flare-music-add	Add-from-link box inside radio panel
.flare-music-songs	Songs playlist sheet
.flare-music-songs-btn	Songs button on the bar
a	Links inside your page
h1, h2, h3	Headings
img	Images (avatars, albums, hero)

5. Snippet library

Copy → paste into Theme Builder CSS tab (or use + buttons there).

Blink title

Classic blink on your display name

/* Blink display name */
.flare-hero-photo h1 {
  animation: flareUserBlink 1s steps(2, end) infinite;
}
@keyframes flareUserBlink {
  50% { opacity: 0; }
}

Glow status

Neon glow on status text

/* Glowing status */
.flare-status {
  text-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
  letter-spacing: 0.04em;
}

Dotted panels

Thick dotted borders + hot pink

.flare-panel {
  border-style: dotted !important;
  border-width: 3px !important;
  border-color: #ff00aa !important;
  box-shadow: 0 0 18px rgba(255, 0, 170, 0.45) !important;
}

Comic headers

Chunky comic headings

.flare-panel-header {
  font-family: "Comic Sans MS", "Trebuchet MS", cursive, sans-serif !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

Guestbook scrap

Lined paper guestbook vibe

.flare-guestbook {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 22px,
    rgba(255, 210, 60, 0.08) 22px,
    rgba(255, 210, 60, 0.08) 23px
  ) !important;
}
.flare-guestbook textarea {
  border-style: dashed !important;
}

Top 8 frames

Gold frames on Top Friends

.flare-top8 img {
  border: 3px double #ffd700 !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}
.flare-top8 a:hover {
  filter: brightness(1.15);
}

Rainbow links

Animated rainbow link colors

a {
  background: linear-gradient(90deg, #ff3d7a, #ffd23c, #3dffa8, #4d7cff, #ff3d7a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: flareLinkShift 3s linear infinite;
  font-weight: 700;
}
@keyframes flareLinkShift {
  to { background-position: 200% center; }
}

CRT scanlines

Extra scanlines over your page

.flare-profile-root::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 5;
}
.flare-profile-root { position: relative; }

Custom scrollbar

Chunky themed scrollbar (WebKit)

.flare-profile-root::-webkit-scrollbar { width: 14px; }
.flare-profile-root::-webkit-scrollbar-track { background: #12080e; }
.flare-profile-root::-webkit-scrollbar-thumb {
  background: linear-gradient(#ff3d7a, #ff8a3d);
  border: 2px solid #12080e;
}

Sparkle border

Animated glowing panel outline

.flare-panel {
  outline: 2px solid transparent;
  outline-offset: 2px;
  animation: flareOutline 2.4s steps(4, end) infinite;
}
@keyframes flareOutline {
  0%, 100% { outline-color: #ff3d7a; }
  33% { outline-color: #ffd23c; }
  66% { outline-color: #ff8a3d; }
}

Night invert

Soft night filter (careful!)

.flare-profile-root {
  filter: hue-rotate(-12deg) saturate(1.15) contrast(1.05);
}

Web Ring badge

Make the ring strip scream

.flare-webring {
  border-width: 3px !important;
  border-style: double !important;
  box-shadow: 0 0 20px rgba(255, 61, 122, 0.5);
}
.flare-webring a {
  font-size: 1.05em;
}

Photo frame (url)

Layer a frame PNG over the hero photo - swap the URL

/* Replace the URL with your https:// frame / sticker asset */
.flare-hero-photo {
  position: relative;
  isolation: isolate;
}
.flare-hero-photo::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0.85;
}

Tiled star GIF bg

Classic tiled gif behind panels

.flare-profile-root {
  background-image: url("https://i.imgur.com/8Km9tLL.gif");
  background-repeat: repeat;
  background-size: 80px 80px;
}
.flare-panel {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

Gaming HUD corners

Corner brackets like a game UI

.flare-panel {
  position: relative;
}
.flare-panel::before,
.flare-panel::after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #e8b84a;
  border-style: solid;
}
.flare-panel::before {
  top: 4px; left: 4px;
  border-width: 2px 0 0 2px;
}
.flare-panel::after {
  bottom: 4px; right: 4px;
  border-width: 0 2px 2px 0;
}

Court lines accent

Subtle padel/tennis court lines

.flare-profile-root::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background:
    linear-gradient(#7dffb3, #7dffb3) center/2px 70% no-repeat,
    linear-gradient(#7dffb3, #7dffb3) center/70% 2px no-repeat;
  z-index: 0;
}
.flare-profile-root { position: relative; }

Theme the player

Match the music bar to your palette (safe layout)

/* Music player follows your theme */
.flare-music-bar {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--flare-player-border) !important;
  background: color-mix(in srgb, var(--flare-player-bg) 92%, black) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--flare-player-accent) 45%, transparent) !important;
}
.flare-music-title {
  color: var(--flare-player-accent-2) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--flare-player-accent) 50%, transparent);
}
.flare-music-artist {
  color: color-mix(in srgb, var(--flare-player-text) 55%, transparent) !important;
}
.flare-music-btn-primary {
  background: linear-gradient(135deg, var(--flare-player-accent), var(--flare-player-accent-2)) !important;
}
.flare-music-panel {
  border-color: var(--flare-player-border) !important;
  background: color-mix(in srgb, var(--flare-player-bg) 96%, black) !important;
}

6. Starter template

/* ========== FLARE Custom CSS ==========
   Scoped to .flare-theme-scope (profile + music player)
   Does NOT touch the top navigation bar.
   Blocked: @import, javascript:, expression()
   Docs: /theme-tutorials
   ====================================== */

/* Panels */
.flare-panel {
  border-radius: 4px;
}

.flare-panel-header {
  letter-spacing: 0.08em;
}

/* Music player (colors/borders OK - keep flex/position) */
.flare-music-bar {
  border-color: var(--flare-player-border);
}

.flare-music-title {
  color: var(--flare-player-accent-2);
}

/* Links */
a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  filter: brightness(1.2);
}

/* Headings */
h1, h2, h3 {
  letter-spacing: 0.04em;
}

/* Guestbook */
.flare-guestbook {
  /* your scrapbook vibes here */
}

Pro tip

Start from a wow preset (Glitter Bomb / Vapor VHS), then layer 1–2 snippets. If it goes nuclear, Clear CSS and try again - the page should always be recoverable.