!!

!!

This is what I found worked when I was fixing my Neospring theme's CSS after the new update

For page dolls and image borders remove the /api/v0/util/ext/image?img= in url("/api/v0/util/ext/image?img=https://image.link.com"), it should just be url() with your image link in the brackets, url("https://image.link.com") (The recommended way to use url() in CSS is to add quotes around your image link but Neospring allows it without quotes)

For fonts you remove the /api/v0/util/ext/image?img= as well, if it still doesn't work you can try adding !important before the semi-colon under the CSS that sets your font

@font-face {
        font-family: font;
        src: url("https://font.link.com");
}

* {
        font-family: font !important;
}

Do keep in mind that /api/v0/util/ext/image?img= will be added after saving the theme and refreshing, so each time you want to update your theme you'll have to remove those again otherwise it will stack and break your code

Edit: The above has been fixed https://neospring.org/+r/5cfbc1066b

Not sure if you’re asking about how I have the cat in the corner or the animation for it so I’ll just give you both codes

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0.5rem;
    width: 12rem;
    height: 12rem;
    background: url(your image link);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: float 4s infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1rem); }
} 

If you don’t want the animation then remove the animation and @keyframes property, otherwise leave it be and change your image link to a link to your image

display: grid; under #profile_card under @media screen and (max-width: 900px)

@media screen and (max-width: 900px) {
    #profile_card {
        display: grid;
        grid-template-areas: ".profile_avatar";
    }
} 

If anyone uses this credit would be appreciated A Ton because I feel very proud of myself for figuring this out by myself...

Not quite sure if this is what you're asking about, if not feel free to send another ask, but this is what I used for the border radius

.card-nest {
    border-radius: 0.60rem !important;
}

GELPPP alrighty so this is my code

.profile_avatar {
    animation: float 3s infinite;
}

@keyframes float {
    0% { transform: translateY(-0.5rem); }
    50% { transform: translateY(0rem); }
    100% { transform: translateY(-0.5rem); }
}

.profile_avatar selects only the avatar in my profile card, animation is the shorthand for the animation property and the float is the animation name, @keyframes float is for you to specify the keyframes of a certain animation, 0%, 50%, and 100% are the keyframes, and transform is what made it float

You can read up on the css animation property on w3schools, that can explain it better than I can

The only being able to see his head thing is on purpose, he pops up when you tap or hover over him so he doesn’t obstruct view too much

For the loading gif I imported it in my bio using the <img/> tag and gave it an id

And for the css code

#gif-id-name {
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 100%;
    display: inline;
    animation: fade 5s forwards;
    pointer-events: none;
}

@keyframes fade {
    100% { opacity: 0%; display: none; }
}

Do keep in mind that width and height will stretch or squish the gif to fit the screen, it’s intentional as I thought it looked funny if he were to be very squished on mobile and very stretched on pc and/or iPad

Thank you! For the animations I suggest reading up on the css animation property, it's how I animated everything on my profile

An example code I have is below

.profile_avatar {
    animation: float 3s infinite;
}

@keyframes float {
    0% { transform: translateY(-0.5rem); }
    50% { transform: translateY(0rem); }
    100% { transform: translateY(-0.5rem); }
}

.profile_avatar selects only the avatar in your profile card, and animation specifies the name, duration, and timing function of the animation, @keyframes [animation name] specifies which animation you'd like to specify the keyframes of, and the 0%, 50%, and 100% inside are the keyframes which made my profile avatar float
Of course more information about other animation properties are talked about in the w3schools link above so I highly recommend reading it

image background is just like how you would in css, url(imagelink)

and the header is a transparent linear gradient, do note that the gradient will be on other elements with the primary colour, it's not that bothersome on my theme because of how dark everything else is but on lighter themes it'll probably be more noticeable linear-gradient(colour, transparent)

you could also just make the header transparent with rgba(0, 0, 0, 0) ⠀ i hope that by answering this question you will be able to come up with some cool themes ^_