Color code resources: https://htmlcolorcodes.com/ https://www.color-hex.com/ https://loveberry.nekoweb.org/resources/text Highlighted are what's edited! mark { /* Changed the name to “mark” */ font-family: DigiBop; /* added font */ background-image: url("IMG LINK HERE"); /* add ur own background image */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.625em; /* changed font size from 2 to 1.625 */ font-weight:bold; width:fit-content; margin:0 auto; /* this is to center, if needed */ /* add below if you want an outline, if not remove */ filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black); } https://khang-nd.github.io/7.css/#window Highlighted are what's edited! If you copy and paste this, DELETE MY COMMENTS OR CODE WILL NOT WORK!
/* added this for positioning */
/* changed the width number & added some styling */
name’s webspace ^_^
/* added font & changed title text */
/* deleted this */
/* deleted this */ https://khang-nd.github.io/7.css/#menubar Highlighted are what's edited! If you copy and paste this, DELETE MY COMMENTS OR CODE WILL NOT WORK!
/* added this line */ https://i4.glitter-graphics.org/pub/1575/1575014z1cafzz3yq.gif // offline pixel for tabs, can be kept or deleted! https://khang-nd.github.io/7.css/#progressbar Highlighted are what's edited! If you copy and paste this, DELETE MY COMMENTS OR CODE WILL NOT WORK!
/* added width & positioning */
https://codepen.io/grwm/pen/azoYrbL Music player Highlighted are what's edited!
Track Artist
/* changed font size and color, added font*/ #miniplay { width: 25.5em; /* adjusted width and height */ height: 8.875em; font-family: "Inter", serif; background: rgb(255, 255, 255); background: linear-gradient(180deg, #D4E4BC 0%, white 100%); border: 1px solid black; /* changed bg & border colors */ border-radius: .625rem; box-shadow: inset 10px 0px 6px -10px #CCC, inset -10px 0px 6px -10px #CCC, inset 0px 10px 6px -10px #FFF, inset 0px -10px 6px -10px #CCC; padding: 12px; cursor: move; position: relative; top: 1.5em; /* added positioning */ } .track-art { width: 4em; height: 4em; /* adjusted width and height */ object-fit: cover; border-radius: 4px; border: 1px solid white; /* added this line */ background-size: cover; background-position: center; } .current-time, .total-duration { color: #666; font-family: MS San Serif; /* changed font */ font-size: 12px; padding: 4px; } .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb { cursor: pointer; /* delete this */ } .now-playing, .track-name, .track-artist { color: white; font-family:'kiwi'; font-size: 20px; /* changed color & font size + added font */ font-weight: 500; line-height: 1.3; filter: drop-shadow(0px 1px #0689e4) drop-shadow(0 -1px #0689e4) drop-shadow(1px 0 #0689e4) drop-shadow(-1px 0 #0689e4) drop-shadow(0px 1px #0032db) drop-shadow(0 -1px #0032db) drop-shadow(1px 0 #0032db) drop-shadow(-1px 0 #0032db); /* added this */ } i.fa-play, i.fa-pause, .prev-track, .next-track { cursor: pointer; /* delete this */ } Obviously, the songs, track art, name, and artist have also been changed! Cursor i used: