th0ms's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Custom SpaceHey Logos



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!



59 Kudos

Comments

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

tirotastic

tirotastic's profile picture

Thanks a lot! Personally I had some issues w/ initially setting it up, I'm still not sure why, maybe it was conflicting with another code. But if anyone's possibly having those same issues, with the spacehey logo colour not changing this is what I wrote instead:

style

.logo{
filter: invert(47%) sepia(56%) saturate(930%) hue-rotate(14deg) brightness(93%) contrast(102%);
}

style

(i did put the actual "style" command with the >< >/< and all)


Report Comment

vivian

vivian's profile picture

Hi is there any code to change the ‘a space for friends’ text?


Report Comment

Ryan!

Ryan! 's profile picture

TYSM!! USED :3


Report Comment

Ria bo bia

Ria bo bia's profile picture

is there anything I can enter to change the size??


Report Comment

Ghost

Ghost's profile picture

Using! Thnx a ton!! <3


Report Comment

Squeezynutz

Squeezynutz's profile picture

Thank youuu


Report Comment

𝓕𝓡𝓔𝓐𝓚𝓨 👅 OLIVE!

𝓕𝓡𝓔𝓐𝓚𝓨 👅 OLIVE!'s profile picture

how exactly do I change the image so it's the same size as the spacehey logo?


Report Comment

⋆༺𓆩Xenomorph𓆪༻⋆

⋆༺𓆩Xenomorph𓆪༻⋆'s profile picture

thank youuu!!! <3


Report Comment

BabyD2sh♡_♡

BabyD2sh♡_♡'s profile picture

Heey! It helped me a lot (now I'll have to look for an image hehe, but it worked!)


Report Comment

xofrnk

xofrnk's profile picture

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

𝓈𝒶𝓇𝒶𝒽 💋

𝓈𝒶𝓇𝒶𝒽 💋's profile picture

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 ๋࣭ ⭑

Pineie / Charlie ๋࣭ ⭑💻's profile picture

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

roe xx's profile picture

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

Chalamlangla

Chalamlangla's profile picture

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

mr.owen's profile picture

thank you so much!!!!


Report Comment

wilbo baggins

wilbo baggins's profile picture

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...

nina...'s profile picture

ty this helped a lot


Report Comment

Cocaine Angel

Cocaine Angel's profile picture

Thank you for this .


Report Comment

Rat

Rat's profile picture

you are amazing thank you!!!


Report Comment