Subeta - Pet Profile CSS - Customizable Pseudo Playlist *UPDATED*

this is something i've been wanting to make for a while... a "playlist" for my pets' profiles! i'm sure plenty of us have playlists for our characters, but you can't actually embed audio on subeta profiles. well, this is the next best thing: a custom div where you can name your playlist and list your pet's favorite songs, complete with album art! you can even link the title and songs to their real counterparts on spotify, 8tracks, youtube, or wherever you prefer to do these things.

live examples: Vivisect | Moonshiner

i used spotify's palette as the default, but you can of course change the colors, font, letter spacing, borders, positioning... if you need help figuring out how to customize something, or something breaks in the process, feel free to ask me about it.

this code is responsive, which means you can either paste the code as-is and the playlist will fill the width of whatever div it's inside, OR you can define your own width and everything inside will automatically adjust to fit. to define a width, simply find the section labelled ".playlist" and add the following line inside the curly brackets, using whatever number value you like. heck, you don't even have to use pixels; you could define it by percent, or em, or vw, if you're comfortable using those units.

width: __px;

with that said, here is the CSS that will go between the style tags on your pet's profile:

CSS

/* PLAYLIST CODE BY FRENCHI */
.playlist {
background: ;
color: ;
padding: 20px 20px 10px 20px;
border-radius: 20px;
}
.playlist a {color: inherit}
.playlist h1 {
color: white;
font-size: 1.3em!important;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
line-height: 115%;
margin-bottom: 1em;
}
.playlist hr {
width: 100%; margin: 0;
border-width: 1px 0 0 0;
border-color: ;
border-style: solid;
}
.playlist-title {
display: inline-block;
width: 100%;
margin-bottom: 0.5em;
text-align: center;
}
.song {
display: inline-block;
overflow-wrap: normal;
width: 100%; height: auto;
padding-top: 15px;
}
.song:hover {background: }
.song-img {
display: inline-block;
width: 50px; height: 50px;
vertical-align: middle;
}
.song-info {
display: inline-block;
width: calc(100% - 60px); height: auto;
vertical-align: middle;
margin: -70px 0 0 60px;
line-height: 100%;
}
.song-title {font-size: 0.9em; font-weight: bold; color: white}

.song-artist {font-size: 0.8em} /* END PLAYLIST CSS */

and the html, which will go outside of the style tags. this is where you'll add the links, images, song titles, artist names, and albums. (i recommend saving the album images yourself and uploading them to imgur for easy access to the image links.)

everything should be clearly labeled, but if anything is confusing, once again feel free to ask me.

HTML




Playlist Title






Song Title

Artist – Album







Song Title

Artist – Album







Song Title

Artist – Album







Song Title

Artist – Album







Song Title

Artist – Album

you can, of course, add fewer or more songs to your playlist by either deleting or copy-pasting the .song div (from to ). make sure to put a

between them for best visual results!

i might make alternate versions in the future, but if anyone wants to fiddle around with this code and make their own variants in the meantime, feel free! if you share your version with others, i'd appreciate credit for the base code. thanks :)

Logged Out

Pet Profile CSS - Customizable Pseudo Playlist UPDATED

Replies

Playlist Title