Style Parameter Help - MP3-jPlayer


The style parameter gives you a way to modify the look of individual players. It takes a list of names separated by spaces (the names refer to css classes).

Eg. [mp3t style="bigger3" track="http://sjward.org/seven.mp3"]
Eg. [mp3-jplayer style="dark smaller" tracks="http://sjward.org/seven.mp3"]

The table below shows a list of the available names that are ready to be used.


If you're comfortable writing css then you can define your own modifications in a custom stylesheet. Use the 'players-1-8-silver.css' file in the plugin's css folder as a starting point. Here's how to set it up:

  1. Copy 'players-1-8-silver.css' to a folder outside of the plugins folder on your domain.
  2. Set the style option to 'Custom' on the plugin settings page, and point it to your css file using the 'uri' field.


Available Class Names For Use In style Parameter

NAME EFFECT WORKS WITH
     
bigger1 Makes player a bit bigger [mp3t], [mp3j]
bigger2 A bit bigger still [mp3t], [mp3j]
bigger3 Even bigger [mp3t], [mp3j]
bigger4 Quite big [mp3t], [mp3j]
bigger5 Big [mp3t], [mp3j]
     
outline Button graphic variation [mp3j], [mp3-jplayer], [mp3-popout]
     
dark Same as 'Dark' player style *1 [mp3-jplayer], [mp3-popout]
silver Same as 'Silver' player style *2 [mp3-jplayer], [mp3-popout]
text Similar to 'Text' player style *3 [mp3-jplayer], [mp3-popout]
noscreen removes titles, uses thin bars *4 [mp3-jplayer], [mp3-popout]
     
nolistbutton Removes playlist toggle button [mp3-jplayer], [mp3-popout]
nopopoutbutton Removes popout button [mp3-jplayer], [mp3-popout]
nopn Removes prev/next buttons [mp3-jplayer], [mp3-popout]
nostop Removes stop button [mp3-jplayer], [mp3-popout]
     
smaller Smaller fonts [mp3-jplayer], [mp3-popout]
     
bars100 Moves bars/titles 100px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
bars150 Moves bars/titles 150px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
bars200 Moves bars/titles 200px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
bars250 Moves bars/titles 250px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
bars300 Moves bars/titles 300px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
bars350 Moves bars/titles 350px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]]
bars400 Moves bars/titles 400px to the right (eg. useful if using artwork images) [mp3-jplayer], [mp3-popout]
     
wtransbars White very transparent bars (eg. useful if using waveform images) [mp3-jplayer], [mp3-popout]
btransbars Black very transparent bars (eg. useful if using waveform images)) [mp3-jplayer], [mp3-popout]

*1 Available from 'Silver' style only.

*2 Available from 'Dark' style only.

*3 Available from 'Dark' and 'Silver' style only. There are some differences between using this and the actual 'Text' player style option on the settings page.

*4 Only works in conjunction with 'text' class at the moment, eg. [mp3-jplayer style="text noscreen"]