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):
- Upload your gif to https://ezgif.com/resize
- 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.)
- You don't have to use the actual gif that gets outputted, just note down what it says the width and height are.
- Change the numbers for whichever section you're on to match the numbers ezgif outputs.
- With that, it should be perfectly fitted to your gif, and fitted to the default sizes!
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 20 of 287 comments ( View all | Add Comment )
Percy
using!! ᓚᘏᗢ
Report Comment
Lakek
using <3
Report Comment
edinn
using!!
Report Comment
this idiot
Using!! (≧▽≦)
Report Comment
raymond
can u give the layout code to how ur layout looks currently?
Report Comment
hey, here it is:
.url-info{display:none;}
/* top */
:root{--logo-blue: rgba(29,78,216,0.4);
--light-orange: transparent;
--dark-orange: black;
font-size-adjust:0.6}
nav .links{background-color: rgba(96, 165, 250, 0.4)}
body{background-image:url('https://external-media.spacehey.net/media/sFw42Mv4_obIV1SvVRn_Y1z88F5E7-AIi_NT7vJ4L7rE=/https://elixi.re/i/nmxm.png');
background-attachment: fixed;
background-size: cover;}
footer{padding:0px;background:none;color:white;}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
color:white;
}
#q {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
color: white;
}
button { border: none; } /* shrivel */
/* tables */
.details-table td:first-child{color: white;}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions{border:none;
--even-lighter-blue: #132248;
--lightest-blue: #132248;
--lighter-blue: #652D87;
--darker-blue:#8D5DA4;}
#comments > .heading,.blurbs > .heading {display:none;}
/* etc */
.online img{display: none;}
.profile .mood {display:inline;}
h4{margin:unset;}
.blurbs .section h4:first-child{display:none;}
#comments{margin-top:25px;}
.blog-preview { text-align:center; }
.profile .blurbs .inner,main{padding:0px;}
.col { display: block; }
/* links */
.contact-links{
margin: 0;
list-style: none;
font-size: 0.875em;
padding: 0;
text-align: center;
}
.contact-links li {
display: inline-block;
}
.contact-links li:not(:last-child)::after {
content: " | ";
color: black;
}
.contact-links a{
text-decoration: none;
color: #132248;
font-size: 0.98em;
}
.contact-links a:hover{
text-decoration: underline;
color: #040c5c;
}
/* header */
.left > .table-section { display: none; }
.blurbs > .inner > .section > h1 { text-align: center; }
main .left, main .right {padding:0px;}
main .left { padding-top: 10px; text-align: center; }
.col.w-40 { width: 100%; }
.general-about .profile-pic { float: unset; margin: unset; margin-bottom: 5px; }
.profile .mood p { margin: unset; }
.profile .mood p:first-child > b { display: none; }
.general-about .details p { margin: 0px; }
.profile .blurbs{ margin: unset; }
.contact > .heading { display:none; }
.f-row,.f-col {display: inline; margin: 0px!important;font-size: 0.98em;font-weight: unset;text-transform:lowercase;}
.f-col a[href="/soon"]{display:none;}
/* friends */
.profile .friends .person { width: 144px; }
.profile .friends .person img {max-width: 100px;max-height:100px;}
/* fuck */
#content { border-top: 1px solid gray; border-bottom: 1px solid gray; padding: 10px; 50px; }
#music { position:fixed; bottom:10px; left:10px; width: 80px; transition: 0.5s width;}
#music:hover { width: 360px; }
.comments-table td:first-child { width: 20%; }
.details :last-child { text-transform: lowercase; }
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://external-media.spacehey.net/media/s5Y0gMEQbNUiIzBa2zL0ji5QmH118172y0iQybkty4j8=/https://totallygay.website/i/zxp3.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: 110px 110px; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: 160px 160px; width: 160px; height: 160px; } /* profile */
by áine; ; Report
thank uu !
by raymond; ; Report
funtime toby !! ★--
usingg this looks cool :3
Report Comment
N4TH4N13L
Using tysm!!
Report Comment
N4TH4N13L
Using tysm!!
Report Comment
fefetasprite
can someone help me with this :((
Report Comment
How can I help?
by Helena; ; Report
If you can help me too I would be glad...
by ZabKent; ; Report
Sure, what do you need help with?
by Helena; ; Report
☆𝔖𝔱𝔬𝔩𝔞𝔰☆
Using!
Report Comment
Mazzyy
using
Report Comment
Nicou
uzing 0_0
Report Comment
˚₊‧꒰ა Webbed fingers ໒꒱ ‧₊˚
Imma try use tysm >.<
Report Comment
ConeyIslandd0_o
USING!!!!
Report Comment
Shotozzzz ☆
USING!! >_<
Report Comment
sillygoobert:3
usin!
Report Comment
urs expired uh oh!!
by kitkat the silly <3; ; Report
wonderful
by sillygoobert:3; ; Report
EpicgamerMCCola
Using!!
Report Comment
★ : RIA !
It keeps going under my pfp, any suggestions?
Report Comment
Airy / Craig
Using
Report Comment
Refunded
using!
Report Comment