- April 27, 2009
- 778
- 333
- 32
- Home Country
-
Netherlands
My second contribution to the WebMP skinning contest is this skin based on Bootstrap. It still looks pretty basic, but believe me when I say that it took more work then the BlueShift skin. It has some nice features, like different views for the lists, TVGuide and a cool CPU plot for the TVServer status page.
Also, it works perfectly on mobile devices. The new image lazy loading keeps your bandwith usage low, since it only downloads images when they are in your viewport. This also increases loading speed on desktop browsers.
Main new features compared to the standard skin:
- Choose between different list views (list, coverlist, covers, big covers)
- 2 TVGuide styles, standard and list
- Grouped recordings
- CPU/Memory usage plot on TV Status page
- Seeking in video player is possible in fullscreen
- New music player layout
![Movies overview.png Movies overview.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170327_Movies_overview.png)
![TVServer Status.png TVServer Status.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170332_TVServer_Status.png)
![TVShow Seasons.png TVShow Seasons.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170336_TVShow_Seasons.png)
![TVShow Episodes.png TVShow Episodes.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170334_TVShow_Episodes.png)
![TVShow Details.png TVShow Details.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170333_TVShow_Details.png)
Enjoy!
Installation:
Copy the Bootstrap folder to c:\Program Files (x86)\MPExtended\WebMediaPortal\www\Skins
When upgrading, copy (and thus overwrite) the contents of the Bootstrap folder in the zip (new version) to the Bootstrap folder in above path (old version). To have no rudimentary files left on your PC, it may be best to remove all the contents from the Bootstrap folder and replace it with the new files.
Todo:
- Views for Recordings list.
Changelog:
v1: Initial release
v2:
- Fixed big banner view for smaller screens (forced small banners)
- New Album Music player! (used JWPlayer 5 because of forcing duration, which makes seeking possible)
- Updated to Bootstrap base v2.3.1
v3:
- New backdrop for movie and tvshow detail view
- New sub-title for some views with extra info
- Add actors to tvshows
- Localize 'Episode' in breadcrumb
- Fixed a small responsive design bug at 779px
- Sorted recordings by date
- Added nummer of recordings per group to group title
- Fixed an issue when clicking on a recording, closing the group
- Extended album musicplayer with playing indicator
- Gave a nice color to the music player itself
- Added duration to track music player
- Added cover to track music player
- Aligned the duration in the list to be more in the middle
- Added refreshrate indicator in dropdown button
v4:
- Fixed rounded corners of fanart in webkit browsers
- Fixed width of coverlist item images in IE
- Fixed loading of non existent default fanart-image
- Fixed images only load when scrolling
- Added fade animation when cha nging view
- Added year to album list
- Added breadcrumbs to music
- Added artist in front of track title in playlist
- Added fast dynamic filter for movies and music
- More consistency between track and album musicplayer
- Placed breadcrumbs at left plane, making more place for the cover
v5:
- Only show 'players' dropdown list when more then one player
- Added current chosen genre (for movies and tvshows) to title of the page
- Statuspage CPU/Memory usage history persistent after refresh/leaving page
- Add new WebMP 0.5.4 feature: watched status for movies (not working right?)
- updated to Bootstrap base v2.3.2 (no time to test the new v3 RC yet)
v5.1:
- Reverted update from Bootstrap base v2.3.2 to v2.3.1 because it caused problems.
- Fixed aspect ratio of videos in Flash player (change stretching: 'exactfit' to stretching: 'uniform')
Also, it works perfectly on mobile devices. The new image lazy loading keeps your bandwith usage low, since it only downloads images when they are in your viewport. This also increases loading speed on desktop browsers.
Main new features compared to the standard skin:
- Choose between different list views (list, coverlist, covers, big covers)
- 2 TVGuide styles, standard and list
- Grouped recordings
- CPU/Memory usage plot on TV Status page
- Seeking in video player is possible in fullscreen
- New music player layout
![Home.png Home.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170325_Home.png)
![Movies overview.png Movies overview.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170327_Movies_overview.png)
![Movie Details.png Movie Details.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170326_Movie_Details.png)
![Music Albumplayer.png Music Albumplayer.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170328_Music_Albumplayer.png)
![Recordings overview.png Recordings overview.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170329_Recordings_overview.png)
![TVServer Guide list.png TVServer Guide list.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170330_TVServer_Guide_list.png)
![TVServer Guide wide.png TVServer Guide wide.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170331_TVServer_Guide_wide.png)
![TVServer Status.png TVServer Status.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170332_TVServer_Status.png)
![TVShow overview.png TVShow overview.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170335_TVShow_overview.png)
![TVShow Seasons.png TVShow Seasons.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170336_TVShow_Seasons.png)
![TVShow Episodes.png TVShow Episodes.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170334_TVShow_Episodes.png)
![TVShow Details.png TVShow Details.png](https://forum.team-mediaportal.com/download/2013/03/thumb/170333_TVShow_Details.png)
Enjoy!
Installation:
Copy the Bootstrap folder to c:\Program Files (x86)\MPExtended\WebMediaPortal\www\Skins
When upgrading, copy (and thus overwrite) the contents of the Bootstrap folder in the zip (new version) to the Bootstrap folder in above path (old version). To have no rudimentary files left on your PC, it may be best to remove all the contents from the Bootstrap folder and replace it with the new files.
Todo:
- Views for Recordings list.
Changelog:
v1: Initial release
v2:
- Fixed big banner view for smaller screens (forced small banners)
- New Album Music player! (used JWPlayer 5 because of forcing duration, which makes seeking possible)
- Updated to Bootstrap base v2.3.1
v3:
- New backdrop for movie and tvshow detail view
- New sub-title for some views with extra info
- Add actors to tvshows
- Localize 'Episode' in breadcrumb
- Fixed a small responsive design bug at 779px
- Sorted recordings by date
- Added nummer of recordings per group to group title
- Fixed an issue when clicking on a recording, closing the group
- Extended album musicplayer with playing indicator
- Gave a nice color to the music player itself
- Added duration to track music player
- Added cover to track music player
- Aligned the duration in the list to be more in the middle
- Added refreshrate indicator in dropdown button
v4:
- Fixed rounded corners of fanart in webkit browsers
- Fixed width of coverlist item images in IE
- Fixed loading of non existent default fanart-image
- Fixed images only load when scrolling
- Added fade animation when cha nging view
- Added year to album list
- Added breadcrumbs to music
- Added artist in front of track title in playlist
- Added fast dynamic filter for movies and music
- More consistency between track and album musicplayer
- Placed breadcrumbs at left plane, making more place for the cover
v5:
- Only show 'players' dropdown list when more then one player
- Added current chosen genre (for movies and tvshows) to title of the page
- Statuspage CPU/Memory usage history persistent after refresh/leaving page
- Add new WebMP 0.5.4 feature: watched status for movies (not working right?)
- updated to Bootstrap base v2.3.2 (no time to test the new v3 RC yet)
v5.1:
- Reverted update from Bootstrap base v2.3.2 to v2.3.1 because it caused problems.
- Fixed aspect ratio of videos in Flash player (change stretching: 'exactfit' to stretching: 'uniform')
Attachments
Last edited: