spacehey
Here’s the custom theme I use for my SpaceHey profile.
installation
Edit your profile and add this to one of the blurb sections. Feel free to use as is or modify to your liking.
SpaceHey theme code
<style>
:root{--blanc:#e4e4e4;--gris:#777;--gris-clair:#ccc;--noir:#030303;--accent:#202020}
/* declutter */
.profile-info,.url-info,
.friends-grid .person p,
.comments-table td > a:first-child,
.details-table tr:nth-child(4),
.comments-table td > p:first-of-type,
.friends:not(#comments) .inner > p,
.blog-preview,img.icon,
.comment-reply time.ago{display:none}
.contact,.table-section,.home-actions,.comment-replies,.comments-table,.comments-table td{border:0!important}
/* override */
body{font-family:"Inter","Roboto","Helvetica",sans-serif;line-height:1.62}
main{border-bottom:1px solid var(--gris);border-top:1px solid var(--gris);margin-top:1.62em;padding:1.62em 0;text-transform:lowercase}
body,main,footer,.top,.links{background-color:var(--gris-clair)!important;color:var(--noir)!important}
.logo{filter:invert(0.8)}
.links li a{text-shadow:none}
:not(:is(.report)) > a,.links a{color:var(--accent)!important}
.heading,:is(.details-table,.comments-table) td,h4{background-color:transparent!important;color:var(--noir)!important}
.heading{border-bottom:1px solid var(--gris)}
main h4{font-weight:400}
.count{color:var(--noir)}
:is(.contact,.blurbs,.table-section,.friends) .heading{font-size:0}
h4::before,.heading::before{font-size:.79rem}
.contact .heading::before{content:"contact"}
.blurbs .heading::before{content:"intro"}
.table-section:first-of-type .heading::before{content:"interests"}
.table-section:nth-of-type(2) .heading::before{content:"links"}
.friends{margin:20px 0}
.general-about{display:flex;flex-wrap:nowrap;align-items:flex-start}
.general-about .details > p:nth-child(1){margin:0;background-color:var(--noir);color:var(--blanc);border-radius:3px;padding:.79em;position:relative;width:fit-content;max-width:30ch}
.general-about .details > p:nth-child(1)::after{border:5px solid transparent;border-bottom:none;border-top-color:var(--noir);content:"";height:0;left:.79em;position:absolute;top:100%;width:0}
/* images */
:is(.comments-table,.person) img.pfp-fallback{filter:grayscale(100%);height:95px}
img.pfp-fallback:hover{filter:grayscale(0%)}
/* network */
.friends .heading::before{content:"network"}
.friends-grid{align-content:space-between;display:flex;gap:5px;justify-content:space-between;overflow-x:scroll}
.profile .friends .person{padding:0;width:auto}
/* logbook */
#comments .inner > p * {font-weight:400;color:var(--gris)!important}
.friends#comments .heading::before{content:"logbook"}
.comments-table{width:100%}
.comments-table td:first-child{text-align:left}
.comments-table tr td:nth-child(1){width:45px}
.comments-table tr td:nth-child(2){display:grid;grid-template-columns:1fr auto;padding-left:1em}
/* chat-esque style */
.comments-table td:first-child img:not(.icon){height:auto;width:100%}
.comments-table td > p:nth-child(2),.comment-reply > p:nth-child(1){background-color:var(--blanc);border-radius:3px;padding:.79em;position:relative;width:fit-content;max-width:30ch}
.comments-table td > p:nth-child(2)::after{border:5px solid transparent;border-bottom:none;border-top-color:var(--blanc);content:"";height:0;left:.79em;position:absolute;top:100%;width:0}
.comment-replies{display:grid;grid-column-end:3;grid-column-start:1;margin-top:.5em;padding:0 0 0 3.33em;width:100%}
.comment-reply:not(:first-child){border:0}
.comment-reply{display:grid;padding:0;justify-items:right}
.comment-reply > p:nth-child(1){background-color:#ddd}
.comment-reply > p:nth-child(1)::after{border:5px solid transparent;border-bottom:none;border-top-color:#ddd;content:"";height:0;position:absolute;right:.79em;top:100%;width:0}
.comment-reply p:nth-child(2){text-align:right;color:var(--gris)}
.comment-reply p:nth-child(2) *{color:var(--gris)!important}
.report{align-self:start;margin:0!important;max-width:8ch!important;text-align:right}
.report a{color:var(--gris-clair)!important}
.report a:hover{color:var(--gris)!important}
.comments-table a[href*="/deletecomment"]{grid-row-start:2;justify-self:right}
.comments-table a[href*="/addcomment"]{grid-row-start:end}
.comments-table button{background-color:transparent;border:0;color:var(--gris);font-size:.79em;text-transform:lowercase}
</style>notes
square photos
Users may have non-square profile pics. To have them be displayed in a more uniform size in the friend space grid and comments section:
.comments-table img, .person img {width: 95px; height: 95px; aspect-ratio: 1 }Although do note that this will stretch out images which may end up even more visually displeasing.
friends grid carousel
Rather than having the friends grid display your 8 most recently added friends in a 4×2 grid, you can turn it into a carousel:
.friends-grid {align-content: space-between; display: flex; gap: 5px; justify-content: space-between; overflow-x: scroll}
.profile .friends .person {padding: 0; width: auto}cleaning interests
If you have any empty sections in your interests table, you can hide them:
/* this hides the 4th row (television) */
.details-table tr:nth-child(4) {display: none}selectors
| “status” section | .general-about .details p:first-of-type |
| “mood” section | .mood p:first-of-type |
| “you” section | .general-about .details p:nth-of-type(2) |