[andywusterParticipant]

Hello X-Men,

I want to know if there is a way to use the x icons/plain text with the x audio player for a simple play button. Just as another option to play short audio that doesn’t need the loading bar.

Thanks so much,
The X theme is great,

Andy, a lowly non-mutant.

[NicoModerator]

Hi There,

Thanks for writing in.

Would you mind sharing us your URL so we could check your setup and would you mind sharing us some screenshot of where do you want to add play button.

Meanwhile you could try adding this in your customizer’s custom CSS:

.mejs-time-rail{
display:none;
}

Let us know how it goes.

Thanks

– Wolverine here 🙂

[andywusterParticipant]

Hi Wolverine!

Big fan, sorry for the late reply.

My site is taiwanchineseacademy.com

Not sure how to add screen shots so here is good example page.

http://taiwanchineseacademy.com/chinese/greetings/

First one is for the word good morning ( I know you like Japanese though 😉 ) I played around with the player ( pun unintended ) and didn’t like the mutation that happened. (No offense. Please don’t hurt me.)

For the second one it was interesting. So cool how the code you gave me worked.

Third one would be great if I can just click on the icon and play a 2 second audio.

Also, I appreciate you and the X-Men a lot. But to be honest, even though I just knew Wolverine would be helping me… I was really hoping for the Professor so that we can do this telepathically.

Thanks

Andy

PS. Maybe lower the volume if you want to play the audio.

[ZeshanMember]

Hi Andy,

If you wish to show a button like this: http://prntscr.com/6zheup, add a custom CSS class of icon-red to each your [x_audio_player] shortcode that you want to target. Then, add following under Custom > CSS in the Customizer:

.icon-red .mejs-controls {
    border: none;
    box-shadow: none;
    background: none;
    font-family: 'fontawesome';
}

.icon-red .mejs-controls .mejs-button button {
    font-family: 'fontawesome';
    border: none;
}

.icon-red .mejs-controls .mejs-button button:before {
    content: "";
    speak: none;
    line-height: 1;
    color: #ff0000;
    font-size: 24px;
}

Hope this helps. 🙂

Thank you.

[andywusterParticipant]

Did not work.

Content: “”;  shows up as a rectangle in the customizer and did not change things with:

[x_audio_player mp3=”http://taiwanchineseacademy.com/wp-content/uploads/audio.mp3″ class=”icon-red;”]

I appreciate the help!

Thanks!

Also, just wanted to say I’m trying to learn some of the basics of web dev so it’s totally fine that it didn’t work. Just more opportunity to learn. X theme has been great. I really do appreciate the help. X is such a great value.

[Rue NelModerator]

Hey There,

Sorry if it didn’t quite work well. Please remove the previous code we gave and try this one instead.

Your shortcode should be like this:

[x_audio_player mp3="http://taiwanchineseacademy.com/wp-content/uploads/audio.mp3" class="icon-red"]

After having the shortcode, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.icon-red .mejs-controls {
    border: none;
    box-shadow: none;
    background: none;
    font-family: 'fontawesome';
}

.icon-red .mejs-controls .mejs-button button {
    font-family: 'fontawesome';
    border: none;
}

.icon-red .mejs-controls .mejs-button button:before {
    speak: none;
    line-height: 1;
    color: #ff0000;
    font-size: 24px;
}

.icon-red .mejs-controls .mejs-button.mejs-play {
    content:"\f144";
}
.icon-red .mejs-controls .mejs-button.mejs-pause {
    content:"\f04c";
}

.icon-red .mejs-button.mejs-playpause-button {
    border: none;
}

.icon-red .mejs-time-rail {
    display: none;
}

If everything is set, the output should look like this when the audio is played.

Please let us know how it goes.

[andywusterParticipant]

Thank you sir! It is so beautiful 🙂

[FriechModerator]

You’re more than welcome, glad we could help, Cheers!

[Author]

Posts