« SpaceHey Groups

Spacehey Music

Spacehey Music: Last Update: March 21, 2025, 6:15 PM

What is Spacehey Music?

Spacehey Music is a custom HTML code that you are creating to enhance the profiles of music artists and bands on Spacehey. With this code, artists will be able to add elements such as:

- An additional navigation bar with options such as "My Music", "Music Videos", "Featured Playlists", "Top Artists", "Shows", "Classifieds" and "Forums"

- A "General Information" table with fields to add information such as members, website, influences, similar sounds, record label, and label type.

- An "Upcoming Concerts" table with eight boxes to add information about live concerts, such as date, location and how to attend

The goal of Spacehey Music is to facilitate the promotion of music and the connection between artists and their fans on Spacehey. It is a very useful and exciting project! Spacehey Music is, in essence, a recreation of Myspace Music, with the aim of reviving the essence of the original platform on Spacehey.

Myspace Music 2008.gif

Spacehey Music 2025.gif

Video

N4TH4N43L XP - Spacehey's Music Tutorial

I'm thinking of making a video tutorial to show how the code works, and I also want you to see how you can modify it to your liking.

Spacehey Music Code

Code Part 1

Copy and paste to About me:

/*INSERT SPOTIFY / SOUNDCLOUD CODE HERE, SET width="100%" height="260" */

</div>

<style>

:root {

--Banner1_image: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);

--Banner2_image: url(https://images2.imgbox.com/e5/50/59sFPBPh_o.png);

--Banner3_image: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);

}

main {

position: relative;

}

.spaceheymusic {

position: relative;

position: absolute;

top: 385px; left: 333.80px; width:467px;

}

.links:not(footer .links)::after {

background: linear-gradient(#f6f6f6 13%, #CFCFCF);

background-repeat: repeat;

display: flex !important; content: '';

width: 800.1px; height: 38px; padding-left: 10px;

border-bottom: 1px solid black;

text-shadow: 1px 1px 1px black;

}

.links:not(footer .links)::after {

margin-left: -16px;

margin-top: 3px;

margin-bottom: -3.5px;

}

#MusicNav {width:809px; border-bottom:1px solid #000; background-color:#990033; color:#FFFFFF;}

#Music_Nav a {color:#FFFFFF; font-weight:normal; font-size:90%; display:inline-block;}

#Music_Nav {position: relative; position: absolute; top: -36px; left: -2px; width:809px;}

#Music_Nav td {color:#999999;}

#Music_Nav a {color:Navy; font-weight:normal; font-size:11px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; display:inline-block; padding-left:5px;padding-right:5px;

}

/*Genre List*/

.profile h1 {

inline-size: 190px;

width: auto;

}

.profile h1::after {

font-size: 8pt;

font-weight: bolder;

content: "\A Genre 1 / Genre 2 / Genre 3 ";

white-space: pre;

}

/*Banner 1*/

main:before {

width: auto; height: 250px;

display: block;content: "";

background-color:#1D4ED7;

background: var(--Banner1_image);

background-repeat: repeat;

background-position: center center;

background-size: 300px;

border-style:solid;

border-width:3.3px;

border-color:#000000;

}

/*Mini Banner*/

main .right:before{

width: auto; height: 92px;

display: block;content: "";

background-color:#1D4ED7;

background: var(--Banner2_image);

background-repeat: repeat;

background-position: center center;

background-size: 300px;

border-style:solid;

border-width:3.3px;

border-color:#000000;

margin-bottom: 530px;

}

/*Banner 3*/

footer:before{

width: auto; height: 150px;

display: block;content: "";

background-color:#1D4ED7;

background: var(--Banner3_image);

background-repeat: repeat;

background-position: center center;

background-size: 300px;

border-style:solid;

border-width:3.3px;

border-color:#000000;

}

.edit-link{

display:none;

}

.profile .url-info {

margin-bottom: 189px;

}

.profile .general-info,

.profile .upcoming-hows{

width: 100%;

border: 2px solid #60A5FA;

border: 2px solid var(--lighter-blue);

margin: 10px 0;

}

.profile .general-info .heading,

.profile .upcoming-hows .heading{

background: #60A5FA;

background: var(--lighter-blue);

color: white;

padding: 2px 7px;

}

.profile_GeneralInfo {

position: relative; position: absolute;

top: 718px; left: 9.80px; width:305px;

}

.profile_UpcomingHows {

position: relative; position: absolute;

top: 656px; left: 333.80px; width:467px;

}

/*mobile version settings*/

@media (max-width: 600px) {

.spaceheymusic {display:none;}

}

@media (max-width: 600px) {

.links:not(footer .links)::after{width: 414.60px;}

}

@media (max-width: 600px) {

#Music_Nav {width: 411px;}

}

@media (max-width: 600px) {

#Music_Nav a {font-size:9px;}

}

@media (max-width: 600px) {

main:before {auto; height: 180px; background-size: 400px;}

}

@media (max-width: 600px) {

main .right:before {width: auto; height: 80px; background-size: 380px;

margin-bottom: 30px; }

}

@media (max-width: 600px) {

footer:before{width: auto; height: 100px; background-size: 400px;}

}

@media (max-width: 600px) {

.profile .url-info { margin-bottom: auto;}

}

@media (max-width: 600px) {

.profile_GeneralInfo {display:none;}

}

@media (max-width: 600px) {

.profile_UpcomingHows {display:none;}

}

</style>

</a></td>

<a href="xxxxxxxxx">my music</a> |

<a href="xxxxxxxxx">music videos</a> |

<a href="xxxxxxxxx">featured playlists</a> |

<a href="https://blog.spacehey.com/entry?id=1490680">top artists</a> |

<a href="https://blog.spacehey.com/entry?id=1492368">shows</a> |

<a href="xxxxxxxxx">classifieds</a> |

<a href="https://groups.spacehey.com/myspaceheymusic">forums</a>

</td></table>

Code Part 2

Copy and paste to General:

<h4>You name's General Info</h4></div>

<tbody>

<tr><td><p>Members</p></td><td><p>

xxxxxxxx

</p></td></tr>

<tr><td><p>Website</p></td><td><p>

xxxxxxxx

</p></td></tr>

<tr><td><p>Influences</p></td><td><p>

xxxxxxxx

</p></td></tr>

<tr><td><p>Sounds Like</p></td><td><p>

xxxxxxxx

</p></td></tr>

<tr><td><p>Record Label</p></td><td><p>

xxxxxxxx

</p></td></tr>

<tr><td><p>Type of Label</p></td><td><p>

xxxxxxxx

</p></td></tr></tbody></table></div></div></div>

Code Part 3

Copy and paste to Music:

<h4>Upcoming Shows</h4></div>

<tbody>