code i use !!

here's all of the code i use for my profile!! im learning html and css as i go so this should be super user friendly ☆

my original layout was black star layout by gods_worst_angel but i've changed everything from it lol

☆ AB0UT M3 S3CT10N ☆

all of the following things go in the about me box, & i have them in this order

☆ F0NTS ☆

@import url('https://fonts.googleapis.com/css2?family=YOUR+FONT+HERE:ital,wght@0,300;0,700;1,300;1,700&display=swap');

go to google fonts and find the font you want, then put the title separated by plus signs (ie Times+New+Roman) here to import it to your website

then under the body section add it next to "font-family:"

☆ B4CKR0UND ☆

body{

background:url(link to background image);

font-family: 'Font Name Here', sans-serif; <- the part that says "sans-serif" is the backup that's used if it can't load your selected font

}

☆ G3N3R4L F0RM4TT1NG ☆

main{

  background: #020202; <- profile info background (can be an image or flat color) 

  color:white; <- text color

  border: solid 3px white; <- border for profile info

  margin-top: 20px; <- margin underneath navigation bar

  text-align: left; <- center, left, or right align your text

  opacity:0.8; <- make your background image show through - opacity goes from 0.0-1.0

}

#comments{

  height: 200px;

  overflow-y: scroll;

} change format of comment boxes

.logo{

  color:black; 

} change the spacehey logo by either adding content:url() or setting it to a color

.icon{

content:url("https://64.media.tumblr.com/14dbda497d798e98b3ec21a558146ce3/ea5dbef8cbfcf576-24/s400x600/7f6e52fa55231f6805263ff01424691a01aa6593.pnj");

} change the icons for add friend, view blog/bulletins, etc

nav .top{

  background: black;

  color: white;

  border: solid 3px white;

  margin-bottom: 20px;

} change navigation bar colors and layout

nav .links{

  background: black;

  color: white; again, "color:" always means TEXT color, background color is "background:"

  border: solid 3px white;

  font-size: smaller;

  text-align: center;

}

footer{

  background: black;

  color: white;

  border: solid 3px white;

  font-size: smaller;

  text-align: center;

} recolor the footer ! DO NOT CHANGE FOOTER CONTENT it's against spacehey rules !

a{

  color: white;

} change color of links

a:hover, nav .links a:hover, nav .top a:hover, button:hover{

  color: grey !important;

} change color of links when hovered over

button{

  color: white !important;

  background: none;

  border: none;

} change button colors

.online { visibility: hidden; margin-left: 12px;} .online img { content: url("gif/stamp here"); animation-name: none; visibility: visible; color: white; height:50px;} <- online alert / area next to profile picture

change "color:" to change the color of the text for status and mood

change "height:" and "width:" to adjust the size of any image/gif you put in this section

☆ C0L0RS 0N Y0UR P4G3 ☆

you can change the default colors for headers, body paragraphs, etc using this:

:root {

--logo-blue: white;

--darker-blue: white;

--lighter-blue: none;

--even-lighter-blue: none;

--lightest-blue: none;

--dark-orange: white;

--light-orange: none;

--even-lighter-orange: none;

--green: white;

}

if you look at the original layout, logo-blue, darker-blue, etc. correspond to the color for each type of text (headings, body paragraph, etc.) and you can set the color AFTER the colon to what you want YOUR colors to be. 

☆ CURS0R ☆

body, body a:hover{

  cursor: url(LINK TO IMAGE OR GIF HERE)

☆ BL1NK13S & B10 T3XT ☆

wherever you want to put your blinkies, just add <img src="LINK TO BLINKIE/STAMP"> (keep the quotations around the link) 

don't put blinkies inside the style tags! they're regular content

tags for text:

<p>text here</p> for paragraphs

<b>text</b> for bold, <i>text</i> for italics

for headings you can do <h1 style="text-size:50px", etc, your formatting here>

make sure you put each piece of formatting (ie text size, color, font) in a separate pair of quotations

<br/> for line break

<hr/> for a divider line

☆ 1NT3R3ST C4T3G0R13S ☆

you can change the names of your six interests from movies, tv shows, heroes... to whatever you want using this piece of code:

<style>

:not(.table-section) + .table-section {

border: solid 1px white !important;

}

.table-section:nth-of-type(even):{

height: 90px;

overflow-y: auto;

transition: all 0.3s ease!important;

}

:root {

  --topic1: "about me"; <- here's where you put your desired category titles

  --topic2: "music ";

  --topic3: "movies";

  --topic4: "authors";

  --topic5: "local bands";

  --topic6: "other";

if you want more/less categories just delete a line here or add "--topic7: "topic";"

}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{

  color:white !important;

  letter-spacing:normal !important;

   text-shadow: 0px px black !important;

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{

  content: var(--topic1); 

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{

  content: var(--topic2);

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{

  content: var(--topic3);

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{

  content: var(--topic4);

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{

  content: var(--topic5);

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{

  content: var(--topic6);

}

.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after{

  content: var(--topic7); 

if you want to add an extra category copy one of these lines and change it to "var(--topic 8);" or 9 or 10 for each category

};

now underneath that big chunk you can add other formatting details ie border:

border: solid 1px white !important;

</style>

that is all the code i use!! i'll update this when i add more stuff to my blog (probably going to add a floating image on the side for example)

i hope this helps !!