Home» Forum» Web & Tech» Overlays and Tunes box

Overlays and Tunes box

Back to Web & Tech

Hey ya'll, this is my 2nd day on here, and I am busy working on my profile; however, I can not seem to figure out how to get the tunes box to actually take an image or to change the color of text in the same box. It is annoying me. Also, could someone walk me through how to go about overlays again?  I am after autumn leaves falling down. 

Hey glad you're here! I hope this is helpful, go to other people's profile and press F12 (or right click for 'inspect element') to see their coding for things you like (: Here are codes I've used for my profile:


/* PROFILE TUNES BOX */


#profile-playlist-container .profile-playlist-widget {

  background:

    linear-gradient(

      rgba(35, 18, 8, 0.45),

      rgba(35, 18, 8, 0.45)

    ),

    url("PASTE-DIRECT-IMAGE-URL-HERE")

    center / cover no-repeat !important;


  border: 2px solid #8b542f !important;

  border-radius: 8px !important;

  color: #f5d6a0 !important;

}


/* "Profile Tunes" heading */


#profile-playlist-container .profile-playlist-widget h3,

#profile-playlist-container .profile-playlist-widget .pp-header,

#profile-playlist-container .profile-playlist-widget .pp-title {

  color: #f2b85b !important;

}


/* Song titles */


#profile-playlist-container .profile-playlist-widget .song-info {

  color: #fff1d2 !important;

}


/* Artist names */


#profile-playlist-container .profile-playlist-widget .song-artist {

  color: #d99a54 !important;

}


/* Buttons and drag icon */


#profile-playlist-container .profile-playlist-widget button,

#profile-playlist-container .profile-playlist-widget .pp-drag {

  color: #fff1d2 !important;

}


/* Currently playing song */


#profile-playlist-container .profile-playlist-widget li.current {

  background: rgba(91, 45, 20, 0.75) !important;

}


#profile-playlist-container .profile-playlist-widget li.current .song-info,

#profile-playlist-container .profile-playlist-widget li.current .song-artist {

  color: #ffffff !important;

}



</p><p>.falling-leaves {</p><p>  position: fixed;</p><p>  inset: 0;</p><p>  background: url("<span style="background-color: rgb(255, 255, 0);">PASTE-LEAVES-GIF-HERE</span>") repeat;</p><p>  background-size: 500px auto;</p><p>  pointer-events: none;</p><p>  z-index: 9999;</p><p>}</p><p>

Crap, it doesn't want to show the second codes for the falling leaves. Here is a screenshot from my R 

@Kayla⟡  Okay, so I think I figured out the overlay for now; well, I am satisfied at the moment, lol.

For the tunes, where would I insert that code?  Because right now I am just doing the basic, easy part where it has you put the image in, but again nothing is happening. 

@classic_livvy yay! okay question first, so are you using the black box at the bottom of the edit page? 

Yes, after I used what they provided to help, I copied the code it built for me, and I put it in the black box on the edit profile section at the bottom. 

@classic_livvy okay so paste the code at end of your existing code -- look for </style> and paste it right before it. am i making sense? it's late lol 

Okay, going to check it out now and give it a go. Thank you! 

You must be logged in to reply.