# Audio Player
**URL:** https://community.elfsight.com/c/css-codes/audio-player/170.md
[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)
---
## [Change color of track progress bar and slider](https://community.elfsight.com/t/change-color-of-track-progress-bar-and-slider/162904)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 4, 2026, 12:05pm UTC](https://community.elfsight.com/t/change-color-of-track-progress-bar-and-slider/162904 "2026-06-04T12:05:11Z")
Add the code below to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: \[class\*='ProgressBar\_\_Thumb-sc'\] { background-color: green !important; } \[class\*='ProgressBar\_\_FakeTrack-sc'\] { bac…
---
## [Remove empty space in floating player](https://community.elfsight.com/t/remove-empty-space-in-floating-player/129159)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 3, 2025, 5:29pm UTC](https://community.elfsight.com/t/remove-empty-space-in-floating-player/129159 "2025-07-03T17:29:09Z")
Add the code below to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: .global-styles, \[class\*="Playlist\_\_Component-sc"\] { height: auto !important; max-height: calc(100% - 72px); }
---
## [Remove border from the images](https://community.elfsight.com/t/remove-border-from-the-images/129157)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 3, 2025, 5:25pm UTC](https://community.elfsight.com/t/remove-border-from-the-images/129157 "2025-07-03T17:25:41Z")
Add the code below to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: .global-styles, \[class\*="Image\_\_Container-sc"\]::before { border: none !important; }
---
## [Change border radius of the Embed player](https://community.elfsight.com/t/change-border-radius-of-the-embed-player/129155)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 3, 2025, 5:22pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-embed-player/129155 "2025-07-03T17:22:27Z")
Add the code below to Custom CSS field on your Audio Player widget’s Settings tab: \[class\*='Embed\_\_Container-sc'\] { border-radius: 16px; }
---
## [Set custom font for all elements in floating mode](https://community.elfsight.com/t/set-custom-font-for-all-elements-in-floating-mode/25200)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 4:06pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-in-floating-mode/25200 "2023-11-10T16:06:35Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Audio Player widget’s Settings tab: .…
---
## [Change font, font size and font style for all elements in floating mode](https://community.elfsight.com/t/change-font-font-size-and-font-style-for-all-elements-in-floating-mode/24946)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 5:41pm UTC](https://community.elfsight.com/t/change-font-font-size-and-font-style-for-all-elements-in-floating-mode/24946 "2023-11-08T17:41:43Z")
Add this code to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: /\* Font of all elements\*/ .global-style, \[class\*='Playlist\_\_Component'\], \[class\*='FloatingBar\_\_StyledPlaylist'\], \[class\*=…
---
## [Reduce space between tracks titles in the playlist](https://community.elfsight.com/t/reduce-space-between-tracks-titles-in-the-playlist/24945)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 5:30pm UTC](https://community.elfsight.com/t/reduce-space-between-tracks-titles-in-the-playlist/24945 "2023-11-08T17:30:15Z")
Add the code below to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: \[class^='ProgressBar\_\_Component'\], \[class^='Full\_\_Controls'\]{ margin-top: 4px; } \[class^='Full\_\_InfoContainer'\] { p…
---
## [Hide Playlist button](https://community.elfsight.com/t/hide-playlist-button/55936)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 6, 2024, 5:15pm UTC](https://community.elfsight.com/t/hide-playlist-button/55936 "2024-06-06T17:15:51Z")
Add the code below to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: .global-syles, \[class\*='PlaylistButton\_\_PlaylistButtonComponent'\] { display: none; } Guys, if this code was h…
---
## [Set custom font for all elements in embed mode](https://community.elfsight.com/t/set-custom-font-for-all-elements-in-embed-mode/24938)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 5:08pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-in-embed-mode/24938 "2023-11-08T17:08:18Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Audio Player widget’s Settings tab: \[…
---
## [Move playlist to the left for Bottom Center position in floating mode](https://community.elfsight.com/t/move-playlist-to-the-left-for-bottom-center-position-in-floating-mode/24947)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 5:44pm UTC](https://community.elfsight.com/t/move-playlist-to-the-left-for-bottom-center-position-in-floating-mode/24947 "2023-11-08T17:44:41Z")
Add this code to the Custom CSS field on the Settings tab of your Audio Player widget’s settings: .global-styles, \[class\*="FloatingBar\_\_StyledPlaylist"\] { left: 0; right: auto; }