Custom Code Tutorial (CSS)

1i What Is Custom CSS?

CSS is the language that controls how your profile looks - colors, fonts, borders, backgrounds, everything visual. The Advanced CSS tab lets you paste raw CSS and take full control, exactly like classic MySpace.

2🎯 How to Open the CSS Tab

1. Go to My Layouts → Create New Layout.
2. Click the 💻 Advanced CSS tab at the top of the editor.
3. You'll see a code editor on the left with a small "Quick Reference" on the right.
4. Paste or type CSS into the editor. It saves when you hit the Create Layout button in the sidebar.

3🧱 How CSS Works (2-Minute Primer)

Every CSS rule has three parts:

selector {
    property: value;
}

Example: make the entire page pink with a custom font:

body {
    background: #ffccee;
    font-family: 'Comic Sans MS', cursive;
    color: #000;
}

• Selector = what you're styling (body = the whole page)
• Property = which aspect (background, color, font-family)
• Value = what to set it to (#ffccee, 'Comic Sans MS')

4�️ FriendRewind Layout Structure

Before the selector list, here's how an FR profile is laid out so the selectors make sense:

body.profile-page
 ├─ nav                       (the header. contains both bars)
 │    ├─ nav .top             (top strip: logo + search)
 │    └─ nav .links           (bottom strip: page links)
 ├─ .master-container         (960px wrapper around the profile)
 │   └─ .row.profile          (flex row)
 │        ├─ .col.w-40.left   (LEFT column - 40% width)
 │        │    ├─ .profile-pic    (your picture)
 │        │    ├─ .mood / .online (status lines)
 │        │    ├─ .contact    (Add/Message/Follow)
 │        │    ├─ .profile-playlist-widget (Profile Tunes)
 │        │    ├─ .general-about (Basic Info)
 │        │    ├─ .url-info   (Website)
 │        │    └─ .table-section (Interests, details, etc.)
 │        └─ .col.right       (RIGHT column. the rest)
 │             ├─ .blurbs     (About Me / Who I'd Like to Meet)
 │             ├─ .blog-preview
 │             ├─ .photos-preview
 │             ├─ .videos-preview
 │             ├─ .friends    (Top Friends + .friends-grid)
 │             └─ #comments   (Comments. contains .comments-table)
 └─ .music-bar                (bottom music player - fixed to screen)

Every section has an inner .heading block at the top (the colored title bar) and an inner .section (the white body). Style .heading to change all section title bars at once.

58 Essential Selectors

These are the class names you target to style each part of your profile. Pick a selector, open a { } block, set properties, done.

/* ===== FriendRewind native selectors ===== */

body.profile-page          /* the whole profile page. scope rules here */
.master-container          /* the 960px wrapper around the profile */
.row.profile               /* flex row containing both columns */
.col.w-40.left             /* LEFT column (contact, basic info, top friends) */
.col.right                 /* RIGHT column (blurbs, comments, etc.) */
.profile                   /* the overall profile area */

/* ===== Section boxes (all work natively in FR) ===== */

.contact                   /* Add/Message/Follow button panel */
.blurbs                    /* About Me / Who I'd Like to Meet */
.friends                   /* Top Friends list */
.friends-grid              /* grid of friend avatars */
.general-about             /* Basic Info box */
.details-table             /* key-value info table inside boxes */
.url-info                  /* Website / URL box */
.blog-preview              /* Blog preview box */
.photos-preview            /* Photos preview box */
.videos-preview            /* Videos preview box */
.table-section             /* Generic table-style section */
#comments                  /* Comments area (ID. use for higher specificity) */
.comments-table            /* the actual comments table inside #comments */
.section                   /* Generic wrapper applied to section contents */

/* ===== Section headings ===== */

.heading                   /* colored title bar at top of every box */
.heading h1, .heading h4   /* the actual heading text */

/* ===== Navigation (FriendRewind Standard) ===== */

nav                        /* the whole header / nav bar */
nav .top                   /* top strip. logo + search */
nav .links                 /* bottom strip. page links */
nav .links a               /* individual links inside the nav */
nav .links a:hover         /* link on mouse-over */

/* ===== Profile bits ===== */

.profile-pic               /* your profile picture box */
.profile-pic img           /* the picture itself (round it, border it) */
.mood                      /* the Mood line under your name */
.online, .offline          /* the Online!/Offline status pill */
.last-login                /* "Last login" line */
.bio-text                  /* the quote/bio under your picture */
.friends-grid              /* Top Friends avatar grid */
#top8-grid                 /* the Top 8 grid (ID form) */
.badges-list               /* badges row */
.badge-item                /* one badge */
.interest-content          /* the text inside each Interests row */
.details-table td:first-child  /* the label cell (General / Music / ...) */

/* ===== Comments ===== */

#comments                  /* whole comments area */
.comments-table            /* the comments table */
.cb-author-name            /* commenter display name */
.cb-content-cell           /* the comment text cell */
.comment-reply             /* a nested reply */
.cb-like-btn               /* the 👍 like button */

/* ===== Typography ===== */

h1, h2, h3, h4             /* general headings */
a                          /* every link */
a:hover                    /* link on mouse-over */
img                        /* all images */

6🎵 Music Player & Profile Tunes

The bottom music bar and the Profile Tunes playlist can both be themed to match your layout. One rule: put !important on every declaration. The player's own styles load after your CSS, so without !important yours lose - this is the #1 reason player CSS "doesn't work".

/* ===== Bottom music bar (needs !important on EVERY line) ===== */

.music-bar                 /* the whole bar */
.music-bar::before         /* black glass texture overlay (hide for transparency) */
.music-bar .bar-title      /* song title */
.bar-now-playing           /* "NOW PLAYING:" label */
.bar-time-display          /* elapsed time */
.bar-time-total            /* total time */
.bar-progress              /* progress track */
.bar-progress-fill         /* progress fill (the moving part) */
.music-bar .bar-btn        /* all buttons (prev/play/next/volume) */
.volume-slider             /* volume slider track */

/* ===== Profile Tunes widget (needs !important too) ===== */

.profile-playlist-widget                       /* the whole card */
.profile-playlist-widget h3                    /* "Profile Tunes" heading */
.profile-playlist-widget li                    /* one song row */
.profile-playlist-widget li.current            /* the row that's PLAYING now */
.profile-playlist-widget .song-info            /* song title text */
.profile-playlist-widget .song-artist          /* artist name (inside the title) */
.profile-playlist-widget li.played             /* rows that already played */
.pp-equalizer span                             /* the 4 animated EQ bars (color via background) */
.pp-drag                                       /* the ☰ drag handle */

Working example - gradient bar, custom colors, themed playlist:

/* Theme the player to match your layout */

/* Bar: gradient background + custom title color */
.music-bar {
    background: linear-gradient(90deg, #eb7a32, #86bda1) !important;
}
.music-bar::before { display: none !important; } /* kill the glass overlay */
.music-bar .bar-title { color: #ffffff !important; }
.bar-progress-fill { background: #86bda1 !important; }

/* Transparent bar instead? */
/* .music-bar { background: transparent !important;
                backdrop-filter: none !important; } */

/* Profile Tunes: green title while playing, orange EQ bars */
.profile-playlist-widget { background: rgba(0,0,0,0.4) !important; }
.profile-playlist-widget li.current .song-info { color: #86bda1 !important; }
.pp-equalizer span { background: #eb7a32 !important; }

7🍳 Quick Recipes

The most-asked-for tweaks, ready to paste:

Round profile picture:

.profile-pic img {
    border-radius: 50%;
    border: 3px solid #ff66cc;
}

Make the profile wider (default is 960px):

.master-container { max-width: 1200px; }

Hide a section you don't use (example: videos preview):

.videos-preview { display: none; }

Restyle all the section title bars at once:

.heading {
    background: linear-gradient(90deg, #ff006e, #8338ec);
    border-radius: 8px 8px 0 0;
}
.heading h4, .heading h1 { color: #fff; }

Style your Top Friends grid:

.friends-grid img {
    border-radius: 8px;
    border: 2px solid #ff66cc;
    transition: transform 0.2s;
}
.friends-grid img:hover { transform: scale(1.08); }

Recolor the Interests labels (the General / Music / Movies cells):

.details-table td:first-child {
    background: #330033;
    color: #ff66cc;
}

8🌈 Changing Colors & Backgrounds

Solid color:

body { background: #ffccee; }

Tiled image (small repeating pattern):

body {
    background: url('https://example.com/tile.gif') repeat;
}

Stretched image that stays put when scrolling:

body {
    background: url('https://example.com/big.jpg') no-repeat center center fixed;
    background-size: cover;
}

Gradient (modern look, no image needed):

body {
    background: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
    background-attachment: fixed;
    color: #fff;
}

9F Custom Fonts

You can load any font from Google Fonts and use it on your profile:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
}

Steps to add any Google Font:

1. Go to fonts.google.com and pick a font.
2. Click Get font → Get embed code → copy the @import url(...) line.
3. Paste at the top of your CSS, then use the font name in font-family.

10C Custom Cursor

Bring back the cursors-4u classic look:

body, body * {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-11/cur1069.cur'), auto;
}

The trailing , auto is a fallback - if the cursor URL fails to load, the default pointer shows up so nobody's stuck with no cursor at all.

Archives with free .cur cursors: cursors-4u.com, rw-designer.com.

11A Animated Backgrounds & GIFs

Animated GIFs work just like any other background image. The animation plays automatically:

body {
    background: url('https://media.giphy.com/media/xxxx.gif') repeat;
}

For a transparent overlay that sits over everything (sparkles, falling snow, hearts):

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('https://example.com/sparkles.gif');
    pointer-events: none;
    opacity: 0.3;
    z-index: 9999;
}

126 Styling Content Boxes

Give every content section the same styled look at once:

.section, .blurbs, .friends, .comments-table {
    background: #fff;
    border: 2px solid #ff66cc;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(255, 102, 204, 0.3);
}

Or go full glassmorphism (transparent frosted effect):

.section, .blurbs, .friends, .comments-table {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 16px;
}

Style just the headings of boxes:

.section h2, .blurbs h2, .friends h2 {
    background: linear-gradient(90deg, #ff006e, #8338ec);
    color: #fff;
    padding: 8px 12px;
    margin: -16px -16px 12px;
    border-radius: 10px 10px 0 0;
}

13🌟 Cool Patterns to Copy

Glowing text (neon effect):

h1, h2, h3 {
    color: #ff00ff;
    text-shadow:
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 0 20px #ff66ff,
        0 0 40px #ff66ff;
}

Custom scrollbar:

/* Works in Chrome, Safari, Edge */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #ffccee; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(#ff006e, #8338ec);
    border-radius: 6px;
}

/* Firefox */
html { scrollbar-color: #ff006e #ffccee; scrollbar-width: thin; }

Styled marquee banner:

/* Put this HTML in your About Me:
   <marquee class="my-marquee">★ welcome to my profile ★</marquee>
*/
.my-marquee {
    font-size: 1.5em;
    color: #ff66cc;
    font-weight: bold;
    text-shadow: 2px 2px 0 #000;
    padding: 8px;
    background: linear-gradient(90deg, #000, #330033, #000);
}

Rainbow animated links:

\@keyframes rainbow {
    0%   { color: #ff006e; }
    25%  { color: #ffd60a; }
    50%  { color: #00f5d4; }
    75%  { color: #8338ec; }
    100% { color: #ff006e; }
}

a { animation: rainbow 3s linear infinite; }

14📋 Copy-Paste Starter Templates

Can't decide where to start? Paste one of these into the CSS tab as a foundation and tweak the colors.

Pink Scene:

/* --- Pink Scene Starter --- */
body {
    background: #ffccee url('https://example.com/sparkles.gif') repeat;
    font-family: 'Courier New', monospace;
    color: #550033;
}
a { color: #ff0066; text-decoration: none; }
a:hover { color: #ff66cc; text-decoration: underline wavy; }
h1, h2, h3, h4 {
    color: #ff0088;
    text-shadow: 1px 1px 0 #ffffff, 0 0 6px #ff66cc;
}
.section, .blurbs, .friends, .comments-table {
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed #ff66cc;
    border-radius: 12px;
}

Dark Gothic:

/* --- Dark Gothic Starter --- */
body {
    background: #0a0a0a;
    font-family: 'Times New Roman', serif;
    color: #c0c0c0;
}
a { color: #8b0000; }
a:hover { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
h1, h2, h3, h4 {
    color: #8b0000;
    font-style: italic;
    letter-spacing: 2px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}
.section, .blurbs, .friends, .comments-table {
    background: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.3);
}

For more done-for-you layouts, browse the community layout gallery - one click applies them directly.

15🔗 Importing Pre-Made Layouts

Already have a custom layout you want to use - a classic MySpace layout, a layout you wrote on another revival site, or a layout a friend sent you? Paste it directly into the CSS tab. It will just work - FriendRewind translates compatible selectors automatically, no conversion needed.

If a pasted layout looks almost right but one area is off, open DevTools (F12), inspect the element, and update that one selector to match what you see. Usually a one-line fix.

16S What's Blocked (Safety)

FriendRewind runs your CSS through a safety filter before saving to prevent injection attacks. The filter is generous - it blocks malicious stuff and allows everything legitimate. Specifically:

Allowed: all properties (background, color, transform, filter, animation, keyframes, @import for Google Fonts, etc.), pseudo-elements (::before, ::after), pseudo-classes, custom scrollbar styling, backdrop filters.

Blocked:

• javascript: URLs inside url(...)
• expression(...) (ancient IE exploit)
• SVG files containing <script>
• <script> tags in CSS-embedded HTML

If your CSS saves but an effect doesn't appear, it's almost never the filter - it's usually a typo, a wrong selector, or the browser caching your old CSS.

17? Debugging Tips

My CSS saved but the page looks the same.

• Hard-refresh your profile: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). Browsers aggressively cache CSS.
• Make sure your CSS is wrapped in <style>...</style> if you pasted it that way, or not wrapped if you pasted raw CSS. The editor auto-handles both.

One rule isn't working.

• Selectors are case-sensitive. .Blurbs won't match .blurbs.
• Missing ; at the end of a property kills everything after it until the next }. Check your semicolons.
• Use !important to override stubborn defaults: color: #ff0088 !important;.

How do I figure out the class name of something specific?

• Right-click the element on your profile → Inspect.
• DevTools shows the element's class names in the Elements panel.
• Use the most specific class you see.

My profile broke completely after adding CSS. Open the layout to edit, clear the CSS tab, hit save. You'll be back to normal. Then re-add CSS a few rules at a time to find the culprit.