Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Listy: detaching playlist, customizing with CSS

I am trying to use Listy (made by James Herrieven) to style an rss playlist with CSS and add a search box:

Listy is really great and seemingly easy to implement, but I am not very good with CSS and I cannot get the detached elements to move to the fixed positions that I want them in.

I want everything to be static because I need the player/playlist to fit on an existing page, but most of the examples on the Listy page are dynamic. This is the page that I want to use it in, but I can't get the player on the left, the playlist to its right, and the searchbox on top of the playlist:

My attempts:

You can see the CSS/HTML code on the detached page.

I also wanted to ask how to display the duration of the videos in the playlist. I tried adding "duration":{"label":"Duration:","value":"mm:ss"}, to the javascript but haven't been able to get it to work. Can the display include hours (hr:mm:ss)?


1 Community Answers


0 rated :

Hi Carlos

I saw your Tweet and was about to respond, but then saw this!

Thanks for using Listy, I'm glad you find it useful.

I've put together a quick example of what you are after here:

Given your container is a fixed width, the CSS is really very simple. You just need to have another container in order to load the detached playlist into.

Regarding the duration, you basically need to have the duration parameter added to each playlist item - it's not dynamically generated. I'm not sure if the duration is a valid option in RSS however...

I hope this helps. I'm now on holiday for a week, but would be happy to help with any further questions when I return.

James Herrieven

This question has received the maximum number of answers.