WordPress makes it easy to add an mp3 player to our post and pages, but it can be a bit boring.
You can make the player stand out by tweaking the css.
This is an image of the standard player that comes with WordPress
![](https://media.publit.io/file/w_629,h_31,c_fit,q_80/websiteImages/williamclarkson/player.png)
and here is my modified player
You can use a plugin to set custom css code (I use simple custom css)
/* yellow focus */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}
/*background color*/
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url('') !important;
background-color: red !important;
}
/* text color */
.mejs-currenttime,
.mejs-duration {
color: white !important;
}
.mejs-horizontal-volume-current
{
background:#0073aa!important;
}
Hi William, nice code. It was a starting point to achieve what I needed. I added some radius to make the player more good looking.
/* Amarillo al enfocar */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}
/* Color de fondo con bordes redondeados */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url(”) !important;
background-color: red !important;
border-radius: 10px; /* Puedes ajustar el valor segĂșn tus preferencias */
}
/* Color del texto */
.mejs-currenttime,
.mejs-duration {
color: white !important;
}
/* Volumen horizontal actual */
.mejs-horizontal-volume-current {
background: #0073aa !important;
}