[Resolved] Audio player styling

Home Forums Support Audio player styling

  • This topic has 5 replies, 3 voices, and was last updated 2 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1372026
    Kim

    Hey guys,

    I know this isn’t strictly GP specific but I’d really appreciate any advice or links to articles that may help.

    I’m working on a WooCommerce build which will be selling audio tracks as products. The client would like to have audio previews, which I will be adding as audio player elements in the product short description.

    We would like the option to highlight a specific preview if necessary (some tracks are special releases) by changing the audio player colour. Obviously, using the wysiwyg editor in the short description means there is limited options for styling the audio player.

    Is there any kind of custom field I could add or function that could be created to facilitate this?

    Many thanks for your help!

    #1372067
    David
    Staff
    Customer Support

    Hi there,

    it may be possible to identify them if they have a taxonomy – category or tag.
    If you want to add a Tag of say featured and provide a link to the site I can take a look ?

    #1372450
    Kim

    Hey David,

    Do you mean adding those taxonomies to the actual product listing?

    Here’s a link to an example to better illustrate how we’re set up: https://dubtunes.uk/track/dub-tune-one/

    #1372701
    Tom
    Lead Developer
    Lead Developer

    Yes, for example if you want to style all of the players that have a specific tag/category, you would do this:

    .product_cat-my-category .mejs-container .mejs-controls {
        background: blue !important;
    }
    #1373340
    Kim

    Hey guys,

    I’ve utilised the tags and a nth selector to add the feature colour to the last player in the description.

    Thanks for the help 🙂

    #1373762
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.