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
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;
}
Hi. So helpful. Looking for the code for the “buffering bar” to change the color from blue. Know what it is? Thanks, Katie