Changing the audio module appearance

[rjbayerl]

I’d like to add an image to the audio module and possibly change the color. I’m thinking it can be done with css but don’t yet see how to do it. Still looking. Thanks. A test page is at http://www.novichoralaires.org/wp/holiday-concerts-2013/concert-tidbits/
Dick Bayerl

[rjbayerl]

I do see how to add custom css to the audio module but don’t know about classes or ids to make changes. Like another color other than the dark grey. And putting an image in the square in the upper left.

[Rattus]

To add image to mp3 file go to Gmedia Library -> enter Edit Mode -> find mp3 and add to “Cover” field link to image or better just paste image ID from Library
Almost every browser have devtools to inspect source code. You need just click right mouse button on element and choose “Inspect Element”. Then you could see code with classes and ids.
If your browser have no “Inspect Element” feature you could install Firebug extention to your browser.

[tacochamp]

Hi rjbayerl,

Did you figure out how to do this?

Two customization questions for the music player ( I’m sorry if this is a duplicate, I don’t see an easy way to search the forum)

1. How can I change the color of the background? I’d like to change the black/grey to something lighter

2. How can I add my own image for the album cover ? It defaults to just a basic music icon.

I’m assuming this is through custom css, but can’t find any guides or instructions anywhere…

Thanks in advance!

https://wordpress.org/plugins/grand-media/

[tacochamp]

OK, I was able to change the color with this:

/* Custom Styling */
div.gm-music-player {
background-color: #8D4A17;
}

However, I cannot figure out how to get an album image to show. I tried just placing the URL in the “Cover” field of each track, but this doesnt work. What it does is change the image from a small music symbol to a large music symbol with an “audio” label… I don’t understand.

I also tried adding custom CSS like this:

div.gmmp-album-cover {
gmmp-img: url(https://dharmasangha.org/wp-content/uploads/2010/10/Zentatsu.jpg);
}

div.gmmp-img {url(https://dharmasangha.org/wp-content/uploads/2010/10/Zentatsu.jpg);
}

But neither take.

Here is the gallery I’m working with:
http://dharmasangha.org/gmedia/4

Please advise!

[Rattus]

Here is how to add image to audio (video):
Enter Edit Mode -> find your audio file -> and fill “Cover” field with image url OR with image ID from Gmedia Library (just numbers) -> click anywhere outside of input field to save changes -> Exit Edit mode or reload page to see changes.

As for changing styling or colors the only way now is to add custom CSS.

[Author]

Posts