a lil tut on how to make custom spacehey logos for your page!
reminder: covering up the spacehey logo is against spacehey's html rules. so if you want a custom logo, at least have the name on there!
css codes to customize logo:
if you want to use a photo, use this code:
if you want a logo like mine, download the spacehey logo at:
[ https://spacehey.com/brand ]
and then edit it however you want. remember, fully covering the logo is against the rules!
<style>
.logo {
content:url("DIRECT_PHOTO_LINK_HERE");
}
</style>
if you want to only edit the color of the logo, use this code:
<style>
.logo{
nav img.logo {
filter: invert(87%) sepia(32%) saturate(400%) hue-rotate(179deg) brightness(600%) contrast(100%);
\\the code above changes the color of your logo. to find the color of your choice, find it at https://codepen.io/sosuke/pen/Pjoqqp and replace the old code with the code it gives you
!important;
}
</style>
FAQ - Read this before asking anything!
"how do i add this into my layout?!":
copy the css code of your choice and paste it into your about me.
if you already have a css code in your about me, you can ignore the <style>'s and copy whats inbetween. After that you can paste it in the middle of your code, just remember that it has to be inbetween <styles>'s.
"how do i edit logos?":
download the resources from [ https://spacehey.com/brand ]
then use any photo editor of your choice to edit it how you want. i just used picsart for mine.
"my logo is stretched out/squished!":
your logo needs to be the exact same size as the spacehey logo photo.
have fun! if your question isnt on the FAQ, i will try to help in comments!
Comments
Displaying 15 of 15 comments ( View all | Add Comment )
Squeezynutz
Thank youuu
Report Comment
Olive!!! JSCHLATT'S #1 FAN!!!!!!
how exactly do I change the image so it's the same size as the spacehey logo?
Report Comment
⋆༺𓆩Xenomorph𓆪༻⋆
thank youuu!!! <3
Report Comment
BabyD2sh♡_♡
Heey! It helped me a lot (now I'll have to look for an image hehe, but it worked!)
Report Comment
xofrnk
mine's not working. Here's the code I used: .logo{
nav img.logo{
filter: invert(15%) sepia(26%) saturate(6537%) hue-rotate(347deg) brightness(92%) contrast(93%);
!important;
}
does it need to be in a specific part of my full code or is part of it wrong?
Report Comment
Idk why the original post specific to add an extra ".logo{." This should work:
nav img.logo{
filter: invert(15%) sepia(26%) saturate(6537%) hue-rotate(347deg) brightness(92%) contrast(93%);
!important;
}
by Izzy; ; Report
thanks!! I got it to work
by xofrnk; ; Report
𝓈𝒶𝓇𝒶𝒽 💋
I used this and it worked, but it compresses my image and makes it short, how can I fix this? I already tried making the original image longer but it still does the same thing.
Report Comment
Pineie / Charlie ๋࣭ ⭑
I put a custom logo on my blog but the theme has the logo set to be purple and I can’t get rid of that. I’m trying to look for this type of code but I can’t, can anyone help?
Report Comment
nvm I figured it out!! ctrl + f and then the word “filter”
by Pineie / Charlie ๋࣭ ⭑; ; Report
roe xx
what is the exact code that you used for your spacehey logo bar? i do not know how to code at all, ty xx
Report Comment
elk
i try to change it to my custom logo but it wont show :(
Report Comment
Same, Mabye the code is outdated?
by Starz; ; Report
mr.owen
thank you so much!!!!
Report Comment
wilbo baggins
im trying to change it to red and it's not working:( i copied your code and replaced the color like u said and it doesn't do anything
Report Comment
nina...
ty this helped a lot
Report Comment
slenders_kid
what are the measurements for the spacehey logo?
Report Comment
Cocaine Angel
Thank you for this .
Report Comment
Rat
you are amazing thank you!!!
Report Comment