Use entirely different GUI with MP3-jPlayer?

  • I like the flexibility of this plug-in, but I don’t like the GUI (e.g., the tiny volume slider, and the thick bar which takes up too much space). I prefer a smaller, simpler design – but I still want the all the info displayed by this player (duration, elapsed time, volume slider, progress bar, etc).

    I’m wondering if it’s possible to use the ‘Blue Monday’ GUI available at the jplayer web site, and if so, how? I tried uploading the css and images, but didn’t know what else to do to get the plugin to see them.

    I’m a newb, and know only a small amount of html and css, and very little about php. I don’t mind jumping in and editing, so if anyone can walk me through it, or suggest where I might find the info, I’d appreciate it.

    Thanks in advance,

    Bob

    https://www.ads-software.com/extend/plugins/mp3-jplayer/

Viewing 1 replies (of 1 total)
  • Plugin Author simon.ward

    (@simonward-1)

    Hi Bob,
    you can skin the player however you’d like to.

    – Go to ‘settings->mp3-jplayer’ and find the select box labelled ‘players’
    – Select ‘custom’ and a field should come alive next to it
    – In that field enter the uri to where your stylesheet lives.

    That’s all you need to do to use your own stylesheet.

    To create a new skin:

    Start off by making a copy of one of the included stylesheets (eg. player-silver.css) and modify from there because there’s a lot of classes and you need to use the same class names for the player to pick up your style declarations.

    The included sheets have some comments in them so that you know which properties can be set by the plugin (mainly colours and opacities), leaving these unset in the sheet means that you’ll still be able to use the colour picker admin side.

    The included sheets also tell you how to set ‘mods’, the parameter available for widgets and shortcodes for additional tweaks.

    Note that the player doesn’t use standard jplayer css setup such as ‘blue monday’ skin, so if you want to use blue monday you’ll need to ‘translate’ it to the appropriate bits for the plugin.

    To help make sense of which bits of css affect which bits of player, put a player in a page and view the page source in a browser, looking at the player’s html and the classes will help out.

    Some declarations can be ditched completely for a particular theme and are only there for robustness across lots of different themes (though some themes still manage to poke things around).

    Make sure you keep your stylesheet somewhere other than the plugin’s folder otherwise it will get deleted if you update the plugin!

    Hope that helps,
    Simon

Viewing 1 replies (of 1 total)
  • The topic ‘Use entirely different GUI with MP3-jPlayer?’ is closed to new replies.