Turn Your Profile Tunes Box into an iPod

5 hours ago - by Kayla⟡ - Profile Tunes Skins - used 5 times

Change the color (#2386f4) and size (135px, 160px) as you desire. You can also change the screen size itself (58px)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>

/* =========================================
   MINI Y2K IPOD — PROFILE TUNES
   ========================================= */


/* IPOD BODY */
#profile-playlist-container .profile-playlist-widget {
  position: relative !important;

  width: 135px !important;
  min-height: 160px !important;

  margin: 10px auto !important;
  padding: 6px 6px 58px 6px !important;

  box-sizing: border-box !important;

  /* iPod blue  */
  box-shadow: inset 0 0 0 999px #2386f4 !important;

  border: 1px solid #b8b8b8 !important;
  border-radius: 12px !important;

  overflow: hidden !important;
}


/* HIDE "PROFILE TUNES" TITLE */
#profile-playlist-container .profile-playlist-widget h3 {
  display: none !important;
}


/* =========================================
   IPOD SCREEN
   ========================================= */

#profile-playlist-container .profile-playlist-widget ul {
  width: 100% !important;

  height: 58px !important;
  max-height: 58px !important;

  margin: 0 !important;
  padding: 3px !important;

  box-sizing: border-box !important;

  background-color: #c8d1c4 !important;

  border: 1px solid #899285 !important;
  border-radius: 0 !important;

  list-style: none !important;

  /* SCROLL THROUGH SONGS */
  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin !important;
  scrollbar-color: #7d8d82 #b8c4b6 !important;
}


/* SMALL SCROLLBAR */
#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar {
  width: 4px !important;
}

#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar-track {
  background-color: #b8c4b6 !important;
}

#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar-thumb {
  background-color: #7d8d82 !important;
}


/* =========================================
   SONG ROWS
   ========================================= */

#profile-playlist-container .profile-playlist-widget li {
  margin: 0 !important;
  padding: 2px 2px 3px 2px !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(80, 90, 80, 0.22) !important;

  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
}


#profile-playlist-container .profile-playlist-widget li:last-child {
  border-bottom: 0 !important;
}


/* =========================================
   SONG TITLE
   ========================================= */

#profile-playlist-container .profile-playlist-widget .song-info {
  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: bold !important;
  line-height: 1.05 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* =========================================
   ARTIST
   ========================================= */

#profile-playlist-container .profile-playlist-widget .song-artist {
  color: #333333 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  font-weight: normal !important;
  line-height: 1.05 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* SONG LINKS */
#profile-playlist-container .profile-playlist-widget .song-info a,
#profile-playlist-container .profile-playlist-widget .song-artist a {
  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  white-space: nowrap !important;

  text-decoration: none !important;
}


/* =========================================
   EMPTY PLAYLIST
   ========================================= */

#profile-playlist-container .profile-playlist-widget .profile-playlist-empty,
#profile-playlist-container .profile-playlist-widget .profile-playlist-empty em {
  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  line-height: 1.15 !important;

  text-align: center !important;
}


/* REMOVE SEPARATOR */
#profile-playlist-container .profile-playlist-widget hr {
  display: none !important;
}


/* =========================================
   CLICK WHEEL

          MENU

    ◀◀             ▶▶

          ▶❚❚
   ========================================= */

#profile-playlist-container .profile-playlist-widget::before {
  content: "MENU\A\A◀◀             ▶▶\A\A▶❚❚" !important;

  position: absolute !important;

  width: 64px !important;
  height: 64px !important;

  left: 50% !important;
  bottom: 6px !important;

  transform: translateX(-50%) !important;

  box-sizing: border-box !important;

  padding-top: 4px !important;

  background-color: #ffffff !important;
  color: #777777 !important;

  border: 1px solid #cccccc !important;
  border-radius: 50% !important;

  font-family: "Courier New", monospace !important;
  font-size: 5px !important;
  font-weight: bold !important;

  /* Slightly increased to push play/pause downward */
  line-height: 10.5px !important;

  text-align: center !important;
  white-space: pre !important;

  pointer-events: none !important;

  z-index: 2 !important;
}


/* =========================================
   CENTER BUTTON
   ========================================= */

#profile-playlist-container .profile-playlist-widget::after {
  content: "" !important;

  position: absolute !important;

  width: 31px !important;
  height: 31px !important;

  left: 50% !important;
  bottom: 22px !important;

  transform: translateX(-50%) !important;

  background-color: #2386f4 !important;

  border: 1px solid #cccccc !important;
  border-radius: 50% !important;

  pointer-events: none !important;

  z-index: 3 !important;
}

</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Profile Tunes Skins

« Back to Profile Tunes Skins | « All Profile Elements