Pidgeon's profile picture

Published by

published

Category: Web, HTML, Tech

UPDATED Guide to making your own Spacehey profile! (beginner friendly)

Hello! This is my updated guide for making your own profile! This is not perfect, so if you need any help troubleshooting, feel free to comment. Let's get right into things! :3


Helpful websites!


Templates

**All of the following templates go within style tags,

<style>

(YOUR CONTENT)

</style>


1) Loading Screen

**This is a gif/image that will appear as your profile is loading**


body:before {

 

content: " ";

 

height: 100vh;

 

width: 100vw;

 

display: block;

 

position: fixed;

 

top: 0;

 

left: 0;

 

z-index: 100;

 

background-image: url('YOUR URL GOES HERE');

 

background-size: cover;

 

background-repeat: no-repeat;

 

background-position:center;

 

animation: yourAnimation 2s ease 1s 1 normal forwards;

 

pointer-events: none;}

 

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;}

}


2) Header

**This will appear right between your profile and the home/browse/ect buttons


main:before {

 

               width: 100%;

 

               height: 230px ;

 

               display: block;

 

               content: "";

 

               background-image: url('YOUR URL GOES HERE');

 

               background-position: center center;

 

               background-size:100%;

 

}


3) Overlay

**use a transparent gif here. It will cover your whole page**


html:before {

 

  animation: grain 8s steps(10) infinite;

 

  background-image: url(‘YOUR URL GOES HERE’);

 

  content: "";

 

  height: 250%;

 

  left: -50%;

 

  opacity:.175;

 

  position: fixed;

 

  top: -110%;

 

  width: 200%;

 

  pointer-events:none;

 

}


tips: You can alter the opacity to make it more/less transparent. You can also mess with the width % to change the size of the gifs, since this is a repeating image type thing.


4) Online Now

**This changes the online now logo**

.online { visibility: hidden; } .online img { content: url("YOUR URL GOES HERE"); animation-name: none; visibility: visible; height: 35px; width: 120px; }


TIPS: The height and width can both be changed depending on your image/gif


5) GIF profile picture

.general-about .profile-pic img {content: url(YOUR URL GOES HERE);

}


6) Background (behind center area)

Image background:

body

 

        {background-image: url(URL); background-size:cover;

 

}


Color background:

body

 

        {background-color: #(COLOR NUMBER);

 

}


TIPS: For the image background, you can change the size. You can use %'s, px, or commands like cover.


7) Detail colors

:root {

 

        --logo-blue: #(COLOR NUMBER); <<Banner behind search users/spacehey logo>>

 

        --darker-blue: #( COLOR NUMBER); <<’view more’ in blog area, and details in contact box>>

 

        --lighter-blue: #(COLOR NUMBER); <<’home’ banner, contact box, url box, user interest box outline>>

 

        --even-lighter-blue: #(COLOR NUMBER); <<interest box, left column>>

 

        --lightest-blue: #(COLOR NUMBER); <<interest box, right column>>

 

        --dark-orange: #(COLOR NUMBER); <<text for blurbs/about me/who I’d like to meet>>

 

        --light-orange: #(COLOR NUMBER); <<profile comments, left column>>

 

        --even-lighter-orange: #(COLOR NUMBER); <<profile comments, right column>>

 

        --green: #(COLOR NUMBER); <<not gonna lie, I have NO IDEA what this does lol>>

 

    }


8) Image/Color behind 'Blog'

Image:

.profile .blog-preview {

background-image: url("URL GOES HERE");

padding: 4px

}


Color:

.profile .blog-preview {

background-color: #(COLOR NUMBER);

padding: 4px

}


9) Symbols in contact box

**I included my own emojis, but obviously you can swap them for whatever emojis you want :)**


.profile .friends {background-image: url('URL GOES HERE');

}

 

.count, .friends  P {

     color: #(COLOR NUMBER GOES HERE);

}

 

.contact .inner a img {

    font-size: 0;

}

.contact .inner a img:before {

    font-size: 1em;

    display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

               /* Add to Friends */

               content: "👁️"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

               /* Add to Favorites */

               content: "🫀"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

               /* Send Message */

               content: "💬"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

               /* Forward to Friend */

               content: "👻"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

               /* Instant Message */

               content: "💌"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

               /* Block User */

               content: "🪦"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

               /* Add to Group */

               content: "🦴"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

               /* Report Profile */

               content: "🚩"

}


10) Snowflakes

<div class="snowflakes">

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

 

  <div class="snowflake">

    <img src=" URL GOES HERE" width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

 

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

 

 

body{

  background:#ededed;

}

/* customizable snowflake styling */

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial;

  text-shadow: 0 0 1px #000;

}

 

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s;animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s;animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s}


***The following will go in the 'Interest' section:


<div class="snowflakes">

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

</div>


TIPS: The size of the 'snowflakes' can be changed, just swap out the width #.


11) Image/Color in center area

Image:

.profile {

background-image: url(“URL GOES HERE”);

}


Color:

.profile {

background-color: #(COLOR NUMBER GOES HERE);

}


**For the following few sections you can split them up. You should be able to, in theory, use all of the starting words before your background stuff, and make all of them the same background


12) Image/Color behind 'contacting user' box

Image:

.profile .contact {background-image: url("URL GOES HERE");

}


Color:

.profile .contact {background-color: #(COLOR NUMBER);

}


13) Image/Color behind 'Friends List' and 'Comments'

Image:

.profile .friends {background-image: url("URL GOES HERE");

padding: 4px

}


Color:

.profile .friends {background-color: #(COLOR NUMBER);

padding: 4px

}


14) Banner behind top of 'Contact' and 'Interests' boxes

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #(COLOR NUMBER GOES HERE);

  color: #(COLOR NUMBER ALSO GOES HERE);

}


15) Getting rid of your URL box

.profile .url-info {

    display: none;

}


16) Adding a shadow to your 'Blog preview' title

.blog-preview h4{

 

     text-shadow: 2px 2px 2px #(COLOR NUMBER);

}


17) Blog titles

.blog-preview p{

 

     color: #(COLOR NUMBER);

}


18) Name shadow

h1

{

               color:

h1

{         color: turquoise;

               //text-shadow: 1px 1px #(COLOR NUMBER);

              

};

               text-shadow: 2px 2px 2px #(COLOR NUMBER), 0 0 2px #(COLOR NUMBER), 0 0 8px black;



Templates for stuff outside of the <style tags>

1) Autoplay music

<iframe width="0" height="0" src="(URL GOES HERE)?autoplay=1&loop=1 playlist=(LAST SECTION OF URL GOES HERE)" title="snow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=" loading=" data-ruffle-polyfilled="">

</iframe>


2) Want to add a Spotify playlist?

This is actually really easy, the step by step is really simple. Open Spotify (I use the app on my computer)

Find your playlist/album that you want to add to your profile.

Next, click the three dots. Go to 'share playlist' and click 'embed playlist'

Now you can pick what color you want the lil box to be, and what size! Then just copy the code and transfer it to your profile!


3) Adding a new row to the 'Interests' box

<tr>

  <td>

    <p>LABEL FOR SECTION</p>

  </td>

  <td>

    <p> WHATEVER YOU WANT ON THE RIGHT COLUMN OF THE ROW </p>

  </td>

</tr>


4) How to split up text/images/GIFS

use, <p> (your content) </p>



That's all for now! I hope this is helpful to everyone! <3


54 Kudos

Comments

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

*+:.。𝓓𝓮𝓪𝓭𝓑𝓾𝓽𝓣𝓪𝓵𝓴𝓲𝓷 ⛧。.。:+*

*+:.。𝓓𝓮𝓪𝓭𝓑𝓾𝓽𝓣𝓪𝓵𝓴𝓲𝓷 ⛧。.。:+...'s profile picture

thank u so much for this, I wish u the best!!!!


Report Comment

sillycat

sillycat's profile picture

Thank u, maybe i will use this


Report Comment

jodii

jodii's profile picture

you are a lifesaver tysm for this!! i hate coding sm >.<


Report Comment

junotonium

junotonium's profile picture

How do you color/change fonts?


Report Comment