If you're handy with CSS style sheets, you can design a player using standard CSS rather than relying on Skin Machine.
A CSS player can operate in conjunction with an existing wimpy player, or it can operate completely stand-alone.
For example, you can set up a normal Wimpy Player that doesn't include a visible playlist, then set up a CSS Player that you'll use as the playlist. Since the built-in playlist is limited design-wise, this scenario provides extra flexability for presentation.
Check out the examples in the main wimpy download ZIP package -- look in the "test" folder for the wimpyCssPlayer1.html and wimpyCssPlayer2.html files.
Setting up a CSS Player
1. To define a wimpy CSS player, use the "data-wimpyCssPlayer" attribute on a DIV tag:
You can place additional HTML within the wimpyCssPlayer DIV that is not related to wimpy. You have complete control over all the HTML and CSS styling.
2. You can use a wimpyCssPlayer in conjunction with normal wimpyPlayer, or as stand alone.
When using a CSS Player in conjunction with a standard wimpyPlayer, specify the ID for the wimpyPlayer in the data-forPlayer.
<!-- A normal wimpyPlayer -->
<div id="myPlayer" data-wimpyPlayer></div>
<!-- A CSS player that controls the normal player -->
<div data-wimpyCssPlayer data-forPlayer="MyPlayer"></div>
When using a stand-alone CSS player, set up player options, including the playlist, using the same "data-OPTION" that we use for a traditional wimpy player as attributes within the wimpyCssPlayer DIV.
<div data-wimpyCssPlayer data-media="track1.mp3"></div>
3. Within the wimpyCssPlayer DIV, define controls using the "data-" attribute.
<div data-pause>Pause</div> </div>
Wimpy automatically searches all the HTML code within the wimpyCssPlayer DIV looking for elements that have "data-CONTROL", where "CONTROL" is a key-word specific to a player control. A complete list of controls are listed below.
For each element that is assigned as a wimpy control, you're free to style these elements any way you want using CSS classes.
Wimpy automatically "wires" mouse/touch events to each control, so all you need to focus on is the CSS styling.
|stop||Stops the player and resets the track.||Button|
|next||Goto next track||Button|
|previous||Goto previous track||Button|
|coverart||Displays image for current track/playlist||Image Container.|
|artist||Displays the current tracks into as defined in the playlist / track data set.||Text|
|album||Sames as above||Text|
|title||Sames as above||Text|
|random||Toggles random feature||Button|
|loop||Toggles loop feature||Button|
|thinker||This element will rotate, so it should be a perfect square.||Box/Text|
|current||Displays track timing info||Text|
|remaining||Same as above||Text|
|total||Same as above||Text|
|seek||A timeline bar that user can click to "scrub"||Box/Container|
|loading||A bar indicating percentage loaded.||Box|
|playlist||A container for playlist items.||Container|
|playlist-item||A container for a single playlist item||Container|
|item-image||A box to display an associated track or playlist image within. This is dependant on the "image" field of the track data set defined in the playlist||Box|
|item-title||Displays the text info as defined in the associated track data set field.||Text|
|item-artist||Same as above||Text|
|item-album||Same as above||Text|