alok's profile picture

Published by

published
updated

Category: Blogging

View alok's Blog

View alok's Profile

Report Blog Entry

changing spacehey colors in HTML

while I appreciate the old school GeoCities approach with GIFs everywhere (and my myspace used to look like that), now I prefer a simpler, minimal look. the bare minimum CSS you need to change to change your color palette is below, using my colors as an example:


<style>
/* background of the page (i.e. left and right of your profile) */
body {
  background-color: #111;
}

/* your profile itself. main does not encompass the header/footer, which I prefer to leave alone */
main {
  background-color: #333;
  color: #ccc;
}

/* links within main. --green is a variable from spacehey's own CSS */
main a {
  color: var(--green);
}

/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: 1px solid #111;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #444;
  color: #bbb;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #333;
  color: #ccc;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
  color: #bbb;
}
</style>

Add this to any one of your profile items.

Edit: Add this for friends' comments I didn't have any at first (womp womp)!

.profile .friends .comments-table td {
  background-color: #333;
}


25 Kudos

Comments

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

Betsy

Betsy's profile picture

Thank you so much, this has really helped me!

One thing I can't seem to figure out is how to change the color of the "about me" and "who I'd like to meet" text... Any chance you could help me with that?


Report Comment

LunaKniteWolfe13

LunaKniteWolfe13 's profile picture

The friends comment one only seems to change the font color but not the actual box? Did I do something wrong?


Report Comment

♡ auders ♡

♡ auders ♡'s profile picture

bless this xx thank u so much!


Report Comment

cherryseed

cherryseed's profile picture

wait where do I type all this stuff


Report Comment



copy and paste it into your about me section once you've click on "edit profile"~ xx hope this helps!

by ♡ auders ♡; ; Report

cherryseed

cherryseed's profile picture

thank you gonna try it out rn


Report Comment

Kaila Long

Kaila Long's profile picture

where do you go to paste it i have no clue where to it


Report Comment



in your "about me" section :3

by ♡ auders ♡; ; Report

dyl

dyl's profile picture

wondering how you might make the space between the blurbs translucent?


Report Comment



i believe you have add a transparency value to the hex color code of the thing you want to make translucent, eg. #ffffff80 for white at 50% capacity. this has a list of what % transparency is what letter/number, but i'm pretty sure that the #66000000 example is wrong and would give you a completely transparent dark red instead of 40% opacity black.

by pyro ♪(^∇^*); ; Report

Casey Ruple Keeton

Casey Ruple Keeton's profile picture

Thankyou!


Report Comment

⚡Brittni Twoeyes⚡

⚡Brittni Twoeyes⚡'s profile picture

Hey, how would we add images to the background? Thanks for all the help.


Report Comment

alok

alok's profile picture

Glad it helped!


Report Comment

Bog

Bog's profile picture

This saved my life. Thank you


Report Comment

alok

alok's profile picture

Crap, spacehey took my tags literally. I meant to say copy everything inside the style tags:



...


Report Comment

alok

alok's profile picture

Hey Brittany! Yeah, copy the whole thing, from (and including) to . I also added the friends comments edit, which you can stick just before .


Report Comment

Brittany

Brittany's profile picture

do you copy this whole thing to put in about me section?


Report Comment

Brittany

Brittany's profile picture

do you copy this whole thing to put in about me section?


Report Comment

mercury

mercury's profile picture

This helped like, so incredibly much. I cant thank u enough!!


Report Comment

alok

alok's profile picture

Glad it helped you!


Report Comment

clive

clive's profile picture

Aha, thank you for this cheat sheet! Very useful


Report Comment