Twilight Sparkle's profile picture

Layout published by Twilight Sparkle

published
updated

View Layouts

View Profile

Report Layout

Animate your profile picture (works on profiles, blogs, and bulletins!)

Tags: animated, profile, picture, avatar, profile picture, blogs, bulletins, twilight

Description:

Tired of having lame, motionless avatars? Wish you could animate your avatar? Well, I have most of a solution for you! This only works on places you can put CSS in, so your posts and profiles only, basically.
Note that your profile picture should be square and 160x160 or greater.
It is possible to edit the CSS to not have this requirement, though! Thanks to Bela for pointing out how to make it easier with the background-size – just change it however you'd like, now. If you want my recommendation for how to ensure it stays properly fitted (do this twice, once for blogs & bulletins, once for profiles):
  1. Upload your gif to https://ezgif.com/resize
  2. Look at the width/height under the image. Whichever one has the bigger number, go down to the input fields and only fill that one in — the first time, you fill it in with 110, the second, fill it in with 160. (This only applies for the default layout, your layout may make the profile image bigger! Consult your local layout wizard for more info.)
  3. You don't have to use the actual gif that gets outputted, just note down what it says the width and height are.
  4. Change the numbers for whichever section you're on to match the numbers ezgif outputs.
  5. With that, it should be perfectly fitted to your gif, and fitted to the default sizes!

Preview:

Layout Screenshot
click on the image for a larger preview

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.


Comments

Displaying 7 of 7 comments ( View all | Add Comment )

❅.$NØWFL4KE.GHØ$TY.❅

❅.$NØWFL4KE.GHØ$TY.❅'s profile picture

I'm curious, having some issues. I'm new to this site and code. I've gotten it to work but I can't get it to be where the profile picture is Not sure what I've done wrong it appears directly under my profile picture no matter what I try


Report Comment

Narcotix

Narcotix's profile picture

Thanks still works


Report Comment

bunny

bunny's profile picture

so dope!


Report Comment

𝕻𝖊𝖗𝖘𝖊𝖕𝖍𝖔𝖓𝖊

𝕻𝖊𝖗𝖘𝖊𝖕𝖍𝖔𝖓𝖊's profile picture

this is awesome!


Report Comment

Katie

Katie's profile picture

How do you make it so it's picture on say bulletins as well


Report Comment



Switch to HTML mode once you're done with your post, and paste the code in.

by Twilight Sparkle; ; Report

Thank you!

by Katie; ; Report

For some reason that's not supported on my browser beyond on my profile still not disappointed tho because it did work that way at least

by Katie; ; Report

Bela

Bela's profile picture

adding a tip to anyone who needs it:
to change the size of the gif, change the background-size to cover, then the height and width to whatever size you want.
:)


Report Comment



Knew there was something I was missing. Can I update it with this?

by Twilight Sparkle; ; Report

yeah! ^^

by Bela; ; Report

Added! Also added a guide on how to get the proper width/height to use instead of being lazy :P

by Twilight Sparkle; ; Report

haha great! I'm definitely using your way lol I was using a different code but it only changed my profile pic on my pro but not anywhere else so yeah I'm using yours xD

by Bela; ; Report

Ah, you can usually just paste styles into the HTML version of bulletins (that's what you're supposed to do for this one too) to get your layout anywhere, but I like to specifically design mine so they'll work either way.

by Twilight Sparkle; ; Report

Katie

Katie's profile picture

I just tested it out so can confirm it works. It's not something I'm looking for personally but I know many who are so I'll send them to this


Report Comment



*looking for at the moment

by Katie; ; Report

Actually a gif profile pic would be awesome I'm gonna use it and I've linked this on my bulletins

by Katie; ; Report