Step 4: Customizing your Audio Player appearance on the Style tab

In this step-by-step guide, we'll walk you through the process of adjusting the appearance of your Audio Player widget to make it uniquely yours. Let's dive in!

Elfsight Audio Player app's Style tab gives you the flexibility to adjust the appearance of the widget.

Colors

First, you have the possibility to choose between two default Color Schemes — Light or Dark. In case you prefer to select all the colors yourself, feel free to select a Custom color scheme and play around with the settings:

Accent Color is applied to the controls selected active in the widget:

Here's what it looks like in our widget:

Fonts

Then, you can set the widget's Font — either apply the font installed on your website, or select one of the list:

Custom CSS

In case you need to apply advanced changes to the widget's looks, you're free to add a CSS code to the Custom CSS section:

For example, you can use a CSS code to adjust colors of specific elements. We've decided to change the color of the song's title. Here's the CSS code we've used:

[class^='Full__Title-sc'],[class^='Small__Title-sc'] {
  color:#fa3261;
}

And here's what it looks like in the widget:

Done! You're all set now. Feel free to proceed to the widget's installation - Installation Tutorials by Platform (CMS).