Description:

This is the latest version I have of SpaceHey Music. I have adjusted quite a few details, modified several elements, and trimmed the CSS file using the @import url(""); directive. This prevents cluttering the profile or making code errors. Furthermore, it makes future updates easier: whenever I modify the CSS stylesheet, users will automatically receive the changes.

I have created 4 versions in total: two inspired by the 2007 layout and two by the 2008 layout. They are based on the MySpace Music (around 2007 to 2010) interface to offer as close to that retro aesthetic as possible.

Below, I explain how you can customize each section of your profile.

1. Customization via CSS Variables

In the first part of the code, you will find this block of variables:

Logos: In the --music-logo property, you can change the image link to use alternative logos. You have options available at the following links:

- SpaceHey Music logos: View SpaceHey Music logos

- Classic MySpace Music logos: View MySpace Music logos

User Information:

- In --user-name: "User"; write your SpaceHey username (the one that appears above your profile picture), always inside the quotes.

- In --user-genres: "Genre 1 / Genre 2 / Genre 3"; enter the three music genres that represent your project (for example: "Rock / Pop / Rock"). Try to keep the spaces to prevent the text from looking cramped.

Ad Banners:

In the --banner-top, --banner-bottom, and --banner-sidebar variables, you can include promotional images for your band, releases, or events. They serve a purely aesthetic function. You can use formats such as JPG, PNG, GIF, or WebP.

2. Adjusting Banner Dimensions

If you wish to change the height of your banners, you can add the following CSS snippet to your code:

To adapt these sizes specifically for mobile devices, use this Media Query block:

3. Editing the Navigation Bar (HTML)

In the HTML code, inside the section labeled as <!-- SpaceHey Music -->, you must customize these three links:

Setup Instructions:

- my music: Replace the link with the platform where you host your music (Spotify, SoundCloud, YouTube Music, Audiomack, etc.).

- music videos: Add the URL where you publish your music videos (YouTube, VidLii, Vimeo, etc.).

- shows: I recommend linking the section using your ID number instead of your custom URL. That way, if you change your username in the future, the link will continue to work without issues.

You can find your ID in the settings section: Account Settings.

Example of a structured link with ID: https://spacehey.com/profile?id=0000000 (replace the zeros with your corresponding ID).

4. Concert Table Setup (Upcoming Shows)

The show table has initial capacity to publish events. Each row has the following structure:

Fields to modify:

- MM/DD/20XX: Event date (Month/Day/Year).

- 00:00: Show start time.

- Generic Concert Venue: Venue or event name linked to the ticket sales website.

- City, ST: City and state/province of the event.

If you need to add more shows, simply duplicate the <tr>...</tr> block as many times as necessary. If you don't have confirmed dates at the moment, you can leave the table empty like this:

5. General Information Table (Alternative 2007 and 2008 versions)

In the two alternative versions (2007 and 2008), I have modified the traditional interests table to transform it into the General Info section. You can fill in the fields with your project's details:

- Member Since: Enter the year you started your musical project.

- Band Members: Names of the members of the band or project.

- Influences: Artists, genres, or sources of inspiration.

- Sounds Like: Describe your sound or which bands you sound like.

- Record Label: Name of your record label or "Unsigned" / "Independent".

- Type of Label: Classify the type of label (for example: "Independent", "DIY", "Major").

Description:

This is an alternative version of SpaceHey Music inspired by the MySpace Music interface (around 2004 to 2007). Unlike the main version, this layout specifically modifies the appearance of the navigation table to offer an even more accurate retro aesthetic from that era.

All other features, CSS variables, and settings remain exactly the same as explained in the main version.