So... you want to customize your profile?

If you're here, there's a pretty good chance you remember when social media profiles actually felt like your own little corner of the internet.

Back then, you didn't just pick a profile picture and call it a day. You changed the background. You changed the colors. You moved things around. You added music. You found some ridiculous CSS trick at 2 AM and somehow managed to make your entire profile look completely different from everyone else's.

That's the part of MySpace I actually miss.

FriendRewind brings a lot of that back, and one of the biggest reasons I like it is that you can actually customize the damn thing.

I've been messing around with my own profile, posted the layouts in previous blog posts, and bascially converted it into an old MySpace-style with FriendRewind-ideas, testing CSS, moving things around, breaking things, fixing them, and then usually breaking something else in the process.

So I figured I'd put everything I've learned into one place.

What's in here?

• Backgrounds
• Fonts and text
• Links
• Profile name styling
• About Me / Blurbs
• Friends / Top 8
• Contact sections
• Details tables
• Comments
• Navigation
• Images
• Custom cursors
• Scrollbars
• Animations
• Positioning
• Left/right profile flipping
• Old-school MySpace layouts
• Converting old MySpace CSS

1. Start With the Basics

Before doing anything crazy, I usually start with a basic reset. It gives you a clean foundation to build on.

body {
    background: #99A9B0 !important;
    color: #333 !important;
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 12px;
}

main {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

a {
    color: #51351E;
    text-decoration: none;
}

a:hover {
    color: #725339;
    text-decoration: underline;
}

The important thing to remember is that FriendRewind is designed for custom HTML and CSS, so you can go way beyond simply changing colors.

2. Change the Background

This is probably the first thing everybody thinks about when they hear "MySpace customization."

Solid Color

body {
    background-color: #000 !important;
}

Background Image

body {
    background-image: url("YOUR-IMAGE-URL") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

Fixed Background

body {
    background-attachment: fixed !important;
}

Full-Screen Background

body {
    background-image: url("YOUR-IMAGE-URL") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

Old-School Tiled Background

body {
    background-image: url("YOUR-IMAGE-URL") !important;
    background-repeat: repeat !important;
}

3. Fonts: Because Arial Is Boring

There is absolutely nothing wrong with Arial. There is also absolutely nothing wrong with making your profile look like it was designed by someone who discovered fonts at 3 AM. lol.

Change Everything

body {
    font-family: "Courier New", monospace !important;
}

Change Headings

h1,
h2,
h3 {
    font-family: Georgia, serif !important;
}

Import a Google Font

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

body {
    font-family: 'Press Start 2P', cursive !important;
}

You can also mix fonts. Personally, I think using one crazy font for everything usually makes a profile harder to read.

4. Make Text Glow

h1,
h2,
h3,
a {
    text-shadow:
        0 0 5px #fff,
        0 0 10px #ff00ff,
        0 0 20px #00ffff;
}

Yes, it's excessive. That's kind of the point.

5. Customize Links

a {
    color: #ff00ff !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

a:hover {
    color: #00ffff !important;
    text-decoration: underline !important;
}

Glowing Links

a {
    color: #fff !important;

    text-shadow:
        0 0 5px #fff,
        0 0 10px #ff00ff;
}

6. Customize Your Profile Name

.profile h1 {
    color: #fff !important;
    font-family: Georgia, serif !important;
    font-size: 40px !important;
    text-align: center !important;
}

Make It Huge

.profile h1 {
    font-size: 70px !important;
}

Hide It

.profile h1 {
    display: none !important;
}

7. Your About Me / Blurbs

This is where things start getting interesting.

The old MySpace terminology and the newer FriendRewind-style structure aren't always identical, but the concept is basically the same: your profile sections can be styled independently.

.profile .blurbs {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}

Change the Heading

.profile .blurbs .heading {
    background: #000 !important;
    color: #fff !important;
    text-align: center !important;
}

Make It Transparent

.profile .blurbs {
    background: transparent !important;
}

Glass Effect

.profile .blurbs {
    background: rgba(0,0,0,.5) !important;
    backdrop-filter: blur(8px);
}

8. Friends / Top 8

If you're going for the classic MySpace feeling, don't forget the friends. The Top 8 was half the fun.

.profile .friends {
    background: transparent !important;
}

Friends Heading

.profile .friends .heading {
    background: #000 !important;
    color: #fff !important;
    text-align: center !important;
}

Friend Names

.profile .friends .person p {
    color: #fff !important;
}

Friend Pictures

.profile .friends .person img {
    border: 2px solid #fff !important;
}

Make Friend Pictures Circular

.profile .friends .person img {
    border-radius: 50% !important;
}

Keep Them Old-School and Square

.profile .friends .person img {
    border-radius: 0 !important;
}

9. Contact Box

.profile .contact {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

Hide It

.profile .contact {
    display: none !important;
}

10. Details / Profile Information

.details-table {
    background: transparent !important;
}

.details-table td {
    background: transparent !important;
    color: #fff !important;
}

.details-table td:first-child {
    background: #222 !important;
    color: #fff !important;
    font-weight: bold !important;
}

Hide Details

.details-table {
    display: none !important;
}

11. Comments

Hide Comments

.comments-table {
    display: none !important;
}

Style Comments

.comments-table {
    background: transparent !important;
}

.comments-table td {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

Round Comment Pictures

.comments-table td:first-child img:not(.icon) {
    border-radius: 50% !important;
    border: 2px solid #fff !important;
}

12. Navigation

.main-nav-wrapper {
    background: #000 !important;
    border: 2px solid #fff !important;
}

.main-nav-wrapper a {
    color: #fff !important;
}

.main-nav-wrapper a:hover {
    color: #ff00ff !important;
}

You can hide navigation too, but I'd be careful with that. Sometimes you end up making your profile look awesome and then realize you hid the button you needed to get back home.

nav {
    display: none !important;
}

13. Images

Square

img {
    border-radius: 0 !important;
}

Round

img {
    border-radius: 50% !important;
}

Pixelated

img {
    image-rendering: pixelated;
}

Black and White

img {
    filter: grayscale(100%);
}

Sepia

img {
    filter: sepia(100%);
}

14. Custom Cursor

Yes, we're bringing this one back too.

* {
    cursor: url("YOUR-CURSOR-URL"), auto !important;
}

Just replace the URL with your cursor image.

15. Custom Scrollbars

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #666;
    border: 2px solid #111;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

Neon Version

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #ff00ff;
    border-radius: 10px;
}

16. Animations

Rainbow Text

@keyframes rainbow {
    0%   { color: red; }
    20%  { color: orange; }
    40%  { color: yellow; }
    60%  { color: lime; }
    80%  { color: cyan; }
    100% { color: magenta; }
}

.profile h1 {
    animation: rainbow 3s linear infinite;
}

Blinking Text

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.blink {
    animation: blink 1s steps(1) infinite;
}

Then add:

<span class="blink">ONLINE!</span>

Wobble

@keyframes wobble {
    0%, 100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

.element {
    animation: wobble .5s infinite;
}

17. Moving Stuff Around

This is where you can start getting into the really old-school layout stuff.

Move Something Right

.element {
    position: relative;
    left: 200px;
}

Move Something Left

.element {
    position: relative;
    right: 200px;
}

Put Something in the Bottom Right

.corner {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

Put Something in the Bottom Left

.corner {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

18. The Left ↔ Right Profile Flip

This one deserves its own section because I specifically wanted to figure out how to recreate the old MySpace effect where the stuff that was on the left ended up on the right, and vice versa.

There is an important difference between reversing a layout and mirroring the entire screen.

If you use:

transform: scaleX(-1);

you get a true mirror. Unfortunately, your text becomes backwards too. That's probably not what you want unless you're trying to confuse everybody.

For an actual layout reversal, try:

.profile {
    display: flex;
    flex-direction: row-reverse;
}

Or for a two-column section:

.profile-content {
    display: flex;
    flex-direction: row-reverse;
}

Another technique is:

.profile {
    direction: rtl;
}

.profile * {
    direction: ltr;
}

The exact method depends on how the profile section you're modifying is structured, so don't be surprised if you have to target a more specific container.

19. The TRUE Mirror Trick

If you actually want the entire profile visually mirrored:

main {
    transform: scaleX(-1);
}

That will also mirror the text.

You can flip the contents back:

main {
    transform: scaleX(-1);
}

main * {
    transform: scaleX(-1);
}

Personally, I'd use the flexbox method if the goal is simply to swap the left and right sides.

20. Hide Stuff

The classic CSS trick:

.element {
    display: none !important;
}

Hide the URL Section

.profile .url-info {
    display: none !important;
}

Hide Friends

.profile .friends {
    display: none !important;
}

Hide Comments

.comments-table {
    display: none !important;
}

Hide Something Without Removing Its Space

.element {
    visibility: hidden;
}

21. Make It Look Like Old MySpace

This is the part I personally like the most.

The goal isn't necessarily to make FriendRewind look modern. The whole point is that sometimes you want it to look like you just stepped back into 2007.

body {
    background: #99A9B0 !important;
    color: #333 !important;
    font: 12px Arial, Verdana, sans-serif !important;
}

main {
    width: 729px !important;
    margin: 0 auto !important;

    background: #fff !important;

    border: 1px solid #777 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}

a {
    color: #51351E !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

a:hover {
    color: #725339 !important;
    text-decoration: underline !important;
}

.profile h1 {
    color: #54361C !important;
    font: 30px Arial, sans-serif !important;
}

.profile .blurbs .heading,
.profile .friends .heading,
.profile .contact .heading {
    background: #334149 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.profile .blurbs,
.profile .friends,
.profile .contact,
.profile .table-section {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.details-table td:first-child {
    background: #334149 !important;
    color: #fff !important;
}

.details-table td {
    background: #fff !important;
    color: #333 !important;
}

.profile .friends .person img {
    border-radius: 0 !important;
    border: 1px solid #555 !important;
}

22. Converting Old MySpace CSS

This is probably the biggest thing I've learned while messing with old layouts: don't automatically throw away the old code.

A lot of the ideas still work. The problem is that old MySpace layouts were built around MySpace's old page structure.

For example, you might find old code like:

div#topnav
div.profileLayout
div.blurbsModule
div#modulebasicInfo
.commentsModule
.friendSpaceModule
.blogsModule
.musicPlayerModule
div#footer

Those selectors were specific to the old MySpace page.

On FriendRewind, you generally want to work with the current profile sections instead.

23. The Selector Toolbox

If you're working on a layout, these are some of the selectors worth knowing:

body

main

.profile

.profile h1

.profile .blurbs

.profile .blurbs .heading

.profile .friends

.profile .friends .heading

.profile .friends .person

.profile .friends .person img

.profile .friends .person p

.profile .contact

.profile .contact .heading

.profile .url-info

.details-table

.details-table td

.details-table td:first-child

.comments-table

.comments-table td

.main-nav-wrapper

.main-nav

24. When CSS Isn't Working

This happens.

You change something, save it, refresh the page and... nothing.

Before assuming the code is broken, try adding:

!important

For example:

color: red !important;

instead of:

color: red;

Don't put !important on absolutely everything. But when you're trying to override an existing stylesheet rule, it can make the difference.

25. My Basic Dark Profile

body {
    background: #000 !important;
    color: #fff !important;
}

main {
    background: #111 !important;
    color: #fff !important;
    border: 2px solid #333 !important;
}

.profile .blurbs,
.profile .friends,
.profile .contact,
.profile .table-section {
    background: #181818 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}

a {
    color: #00ffff !important;
}

a:hover {
    color: #ff00ff !important;
}

26. MySpace-Style 729px Layout

body {
    background: #99A9B0 !important;
}

main {
    width: 729px !important;
    margin: 0 auto !important;
}

.profile {
    width: 729px !important;
}

That 729px width is especially useful if you're converting one of those old MySpace layouts that was designed around the classic fixed-width profile.

27. Don't Forget HTML

CSS isn't the only thing you can use. FriendRewind also supports custom HTML, which means you can combine your styling with actual content.

For example:

<div class="my-box">

    <h2>Welcome</h2>

    <p>
        Welcome to my little corner of the internet.
    </p>

</div>

Then style it:

.my-box {
    background: #111;
    color: #fff;
    border: 1px solid #555;
    padding: 20px;
}

28. My General Rule for Profile Design

Don't try to make your profile look like everybody else's.

That's kind of the entire reason I like this stuff in the first place.

I like tech. I like gaming. I like making things. I like messing with layouts and seeing what I can get a page to do.

But I also don't think everything needs to be perfectly polished. Sometimes the weird little imperfections are what make a profile feel like someone actually made it instead of some company designing it for you.

If you want a completely black profile with neon text, go for it. If you want some ridiculous animated GIF from 2008, knock yourself out. If you want something like I have the clean minimalist profile, that's fine too.

The point is that you get to decide.

29. MySpace → FriendRewind: The Short Version 

You know... Incase you don't want to read everything else. But you should!!!

<b><u>OLD MYSPACE</u></b>

#topnav
.profileLayout
.blurbsModule
#modulebasicInfo
.commentsModule
.friendSpaceModule
.blogsModule
.musicPlayerModule
#footer


<b><u>FRIENDREWIND</u></b>

main
.profile
.profile .blurbs
.profile .friends
.profile .contact
.comments-table
.details-table
.main-nav-wrapper

<b><u>THE BASIC IDEA</u></b>

Keep the design.
Keep the colors.
Keep the images.
Keep the positioning ideas.

Replace the old <b>MySpace-specific</b> selectors
with the <b>FriendRewind-compatible</b> ones.

The old MySpace era had something that modern social media mostly killed: personality.

Everyone had the same basic profile structure, but nobody's profile actually looked the same.

One person had a black-and-red gothic layout. Someone else had glitter everywhere. Someone had a music video autoplaying. Someone had their profile completely upside down. And somebody definitely had a giant blinking "WELCOME 2 MY PROFILE!!!" banner.

And honestly? That was part of the fun.

FriendRewind gives us a chance to mess around with that idea again without having to use the exact same templates everyone else gets handed.

So take your pick from the code above, change it, break it, experiment with it, and make something that actually feels like you.