Make your profile feel like yours~!

Did you know verified members can customize their profiles with their own backgrounds, colors, decorations, animations, and even cute little cursors?

Where do I start?

Head over to Settings and open the section called Custom Profile HTML & CSS

Then:

1. Check Enable my custom profile
2. Add your customization
3. Save your settings
4. Visit your profile and admire your creation! 

You’ll see two boxes:

• HTML is where you add things like sparkles, text, or decorative pictures
• CSS is where you choose the colors, background, placement, and animations

Lets start with a background!

This would go in your CSS box:

body {
background: linear-gradient(
135deg,
#fce7f3,
#ede9fe,
#dbeafe
);
}

This will give you a soft pink, purple, and blue background, head on over to HTML Color Code Picker to replace the colors above with colors you would prefer!

Want a background image instead?

Then instead of the color coded one above, place this one in your css box:

body {
background-image: url("https://images.pexels.com/photos/38247462/pexels-photo-38247462.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

You'll want to replay that .jpeg with an image of your choice! Backgrounds support many image types, feel free to use any like .png, .jpg. etc!

Want some floating ~SPARKLES~??

This would go into your HTML!

<div class="sparkle sparkle-one">✦</div>
<div class="sparkle sparkle-two">✧</div>
<div class="sparkle sparkle-three">✦</div>

((You can change these to anything! Even if you wanna add little floating images, just use <img src="URL.PNG"> in place of the stars!

And then to get those sparkles to float/animate, you'll want to add this below your 'body' in your CSS box!

.sparkle {
position: fixed;
color: white;
font-size: 32px;
animation: float 3s ease-in-out infinite;
}

.sparkle-one {
top: 12%;
left: 8%;
}

.sparkle-two {
top: 25%;
right: 10%;
animation-delay: 1s;
}

.sparkle-three {
bottom: 15%;
left: 18%;
animation-delay: 2s;
}

@keyframes float {
0%, 100% {
transform: translateY(0);
opacity: 0.5;
}

50% {
transform: translateY(-12px);
opacity: 1;
}
}

Want some cute corner art?

Heres a quick corner art snipper, just add this to your HTML and the CSS below everything else!

<img
class="corner-art"
src="https://example.com/my-decoration.png"
alt=""
>

CSS:

.corner-art {
position: fixed;
right: 20px;
bottom: 20px;
width: 180px;
max-width: 35vw;
}

Want a CURSOR?!

Yes! The old MySpace days when people had galloping dolphin cursors is upon us!

Just add this to your CSS:

body {
cursor: url("https://example.com/my-cursor.png"), auto;
}

I get my cursors from HERE

• I pick a cursor I like, and I navigate to the page by clicking the image of it
• And then I click into the .cur
• You do not have to save it, I just right click the cursor and click copy image link
• And then i paste that URL into the cursor URL in the CSS

More about the Custom Profile!

Your custom design stays in the background, and your profile cards become a little see-through so all your cute decorations can peek through!

Everything is kept nice and safe, so scripts won’t run and your decorations won’t get in the way of any buttons, And if someone prefers the regular look, they can tap View standard profile whenever they’d like

Other than that, have fun with it! Add sparkles, hearts, clouds, lace, stars, or anything else that feels like you

You don’t have to make something super fancy right away, either!

Start with a pretty background, save your changes, and slowly add more as you get comfortable

Most importantly, have fun decorating—we’re so excited to see what you come up with!