Add to Favorites
View Layouts
View Profile
Report Layout
Tags: pride, twilight, logo, gradient, background
Description:
CURRENTLY BROKEN, SORRY
I've updated it so that if static.spacehey.net gets CORS it'll work, but I don't know if that's happening.
Ever wanted to give the SpaceHey logo a certain gradient but haven't been able to?
Or perhaps you wanna put a pattern image under it?
Don't want to bother with image editing just to see how it'd look? Here you go!
(This may not work on some browsers — mask is still an experimental CSS property! Check https://caniuse.com/css-masks for more info. This has been tested on latest desktop Chrome and latest desktop Firefox. If your browser doesn't support it, it should gracefully failback to the original logo.)
By default, this will put the SpaceHey logo in trans flag colors.
You can either replace the "background:" rule with
background: url([your image you want to use]), or replace it with one of these for more pride flags!(Please leave the credit comment in the style tag in when you use it!)
Preview:
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 14 of 14 comments ( View all | Add Comment )
★∙stormii∙★
Does it work for anyone else?? It’s not working for me, but a ton of comments on how they got it 2 work -.-
Sorry lol
by ★∙stormii∙★; ; Report
TiredNinjaSquall
How do you input whatever image you want for this? Do I just replace the gradients with a url?
ERROR.
Might use!
Deaths_Smile
Using!
test
what the fuck am i supposed to do
vampp9
Hi! I inserted the code that natalie found and as you can see on my profile its still the same...?
Natalie :3
using!!!! I was able to get it working but I had to edit the SVG to be black. basically, just replace the svg link with this and it *should* work :3
https://saucydiva.neocities.org/logo.svg
TY THIS WORKED!
by soy; ; Report
how im dumb
by jax!; ; Report
use this vvv
/* Logo modifier by Twilight Sparkle! https://layouts.spacehey.com/layout?id=1805 */
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
.top > .left > a > .logo {
display: none;
}
.top .left a {
background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%);
background-size: cover;
mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
mask-size: contain;
-webkit-mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
-webkit-mask-size: contain;
height: 42px;
width: 165px;
display: inline-block;
}
}
by soy; ; Report
thank you so much !!
by leo; ; Report
✧･*･ﾟ:*atlas*:･ﾟ*･✧
It doesnt work for me :(( like at all anything i try it just hides the logo
Natalie in these comments figured it out :)
heres the code they provided!
/* Logo modifier by Twilight Sparkle! https://layouts.spacehey.com/layout?id=1805 */
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
.top > .left > a > .logo {
display: none;
}
.top .left a {
background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%);
background-size: cover;
mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
mask-size: contain;
-webkit-mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
-webkit-mask-size: contain;
height: 42px;
width: 165px;
display: inline-block;
}
}
by Tea; ; Report
Zero
OMGGG TYSM!!!
psychonauts
its hiding the logo for me :(
GRIMXCIV
The trans flag ia ontop of spacehey instead of decorating it on the description page in the corner. How can I make it do that instead lol.
It was only broken in the layout description, the layout works fine. Fixed, regardless.
by Twilight Sparkle; ; Report
♡⃕nainu❜
I'm obsessed! love how it looks, ty
MagicalBean
Love it! I used the bi pride for my profile XD
Just replace the "background:" line with any of the "background:" lines from these: barchok
by Twilight Sparkle; ; Report