So I have tried everything from editing my CSS, uploading different files, renaming them into something super simple and double checking them being less than the upload size (one is 57kb, the other is 13kb. But everything I do causes the default SpaceHey profile pic, or a broken image icon to show up.
When trying to open the broken image in a new tab i get directed to an HTPP error 404 page with
Now could totally be missing something in my own CSS, so here it is if anyone could double check it for me:
<iframe width="0" height="0" src="https://www.youtube.com/embed/0UPDBODtxzw?autoplay=1&loop=1&controls=0&playlist=0UPDBODtxzw" title="Dracula - Tame Impala" frameborder="0" allow="autoplay; clipboard-write; encrypted-media" allowfullscreen="" loading="lazy">
</iframe>
<style>
/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
/* Entire page */
body,
.profile,
main {
background: #000000 !important;
color: #d8d8d8 !important;
font-family: "Cinzel", Georgia, serif !important;
}
/* Main profile boxes */
.profile .blurbs,
.profile .friends,
.profile .comments,
.profile .contact,
.profile .interests,
.profile .details,
.profile .table-section,
.profile .url-info {
background: #111111 !important;
border: 1px solid #7a1f1f !important;
}
/* Headers */
.heading,
.profile h4,
.profile h3,
.profile .table-section .heading {
background: #111111 !important;
color: #b11c1c !important;
border-bottom: 2px solid #7a1f1f !important;
text-transform: uppercase;
}
/* Tables */
table,
tr,
td,
th {
background: #111111 !important;
border-color: #7a1f1f !important;
color: #d8d8d8 !important;
}
/* Navigation */
.navbar,
footer,
.top {
background: #1a1a1a !important;
border-bottom: 1px solid #7a1f1f !important;
}
/* Links */
a,
a:visited {
color: #9f2b2b !important;
}
a:hover {
color: #b11c1c !important;
}
/* Remove default blue */
.profile .contact .heading,
.profile .interests .heading,
.profile .friends .heading,
.profile .comments .heading,
.profile .blurbs .heading {
background: #111111 !important;
color: #b11c1c !important;
}
/* Top navigation bar */
nav,
.navbar,
.top,
.top table,
.top td,
.top div {
background: #111111 !important;
border-color: #7a1f1f !important;
}
/* Navigation links */
.top a,
.top a:link,
.top a:visited,
nav a,
nav a:link,
nav a:visited {
color: #9f2b2b !important;
text-decoration: none !important;
}
.top a:hover,
nav a:hover {
color: #b11c1c !important;
}
/* Nuke the blue header */
.top,
.top *,
nav,
nav *,
header,
header * {
background-color: #111111 !important;
background-image: none !important;
border-color: #7a1f1f !important;
}
/* Force link colors */
.top a,
.top a:visited,
.top a:link,
nav a,
nav a:visited,
nav a:link {
color: #9f2b2b !important;
}
.top a:hover,
nav a:hover {
color: #b11c1c !important;
}
.online {
color: #b11c1c !important;
}
/* Apply the filter to all images EXCEPT the profile picture */
img:not(.profile-pic img) {
filter: contrast(105%) brightness(90%);
}
/* Explicitly reset the profile picture filter */
.profile-pic img {
filter: none !important;
display: block !important;
visibility: visible !important;
background: transparent !important;
}
/* Make sure your profile content isn't hiding the background */
main {
background: transparent !important;
}
/* Set the background on the body */
body {
background-image: url('https://i.pinimg.com/736x/35/2e/0a/352e0acb3c5e61957b0c3301d61b51bd.jpg') !important;
background-size: cover !important;
background-attachment: fixed !important;
background-position: center !important;
z-index: -1;
}
/* --- RECOLOR SPACEHEY ONLINE SVG ICON --- */
img[src*="green_person.svg"] {
filter: grayscale(1) brightness(0.38) sepia(1) saturate(22) hue-rotate(-28deg) contrast(1.35) !important;
}
.online-status img {
filter: hue-rotate(300deg) saturate(5) brightness(0.8) !important;
}
</style>