WebMP Skin: BlueShift v4 (1 Viewer)

Dragy

Portal Pro
April 27, 2009
778
333
31
Home Country
Netherlands Netherlands
Skin file download is in the attachment
Place the folder in the Skin directory and restart IIS/WebMediaPortal service.
Old skin name was "BetterWebMP"

Curently, most energy will go out the the Bootstrap skin. You can contribute yourself!

CONTRIBUTE ON GITHUB

IMPORTANT
Don't use < IE9, it's a stupid browser and I don't really care how it looks over there. Though, it looks okay in IE9.
Also, use the latest version of you webbrowser, the skin uses HTML5 a lot.


To-do list:
- Suggestions are welcome! I will add everything I like myself.

Known bugs:
- You tell me
 

Attachments

  • BetterWebMPv1.zip
    35 KB
  • BetterWebMPv1.1.zip
    108.2 KB
  • BlueShiftv2.zip
    110.5 KB
  • BlueShiftv3.zip
    109.9 KB
  • BlueShiftv4.zip
    395.5 KB
Last edited:

mpsam

Portal Pro
June 16, 2009
179
75
Nice Job. And you are right, it is a better looking WebMP.
Just a few observations. The default skin and your earlier CSS file produced a page that fitted on a 1024X768 screen without horizontal scroll bars. BetterWebMP has a scroll bar. However, that is not critical, just not sure if is a consideration of web design so I mentioned it

One suggestion, I liked the clean look of the CSS file that you posted earlier. Mainly because of the lack of borders around the posters. Would it be possible to reduce the borders to the top and side and leave the bottom section as a background for the info presented.
Or alternatively remove the border completely and place a small object below the poster as a background for the info. The object could be placed so that the bottom of the poster covers its top so that the only rounded corners of the object is the bottom two. I am not good with graphics but I attached a pdf that shows my suggestion.
 

Attachments

  • suggestion.pdf
    514.3 KB
Last edited:

Dragy

Portal Pro
April 27, 2009
778
333
31
Home Country
Netherlands Netherlands
Thanks for the suggestion :) I'm planning to make a responsive design to it will also fit on smaller screen sizes.
 

Oxan

Retired Team Member
  • Premium Supporter
  • August 29, 2009
    1,730
    1,124
    Home Country
    Netherlands Netherlands
    Nice, great work!

    - I need some help with the 'active' menu's. Can someone please look to it how I can improve that so I don't have to place all possible menuoptions in the Menu.cshtml file
    Assuming you mean how to put the class="active" on the active menu item, that's an interesting question. I'm not sure whether we already support that. I'll take a look if I can add that to WebMP and let you know when I've found something ;)
     

    Dragy

    Portal Pro
    April 27, 2009
    778
    333
    31
    Home Country
    Netherlands Netherlands
    Nice, great work!

    - I need some help with the 'active' menu's. Can someone please look to it how I can improve that so I don't have to place all possible menuoptions in the Menu.cshtml file
    Assuming you mean how to put the class="active" on the active menu item, that's an interesting question. I'm not sure whether we already support that. I'll take a look if I can add that to WebMP and let you know when I've found something ;)
    Yes indeed, I now do it like this:
    @if (Request.RawUrl == Url.Action("Index", "TVShowsLibrary")) { <text>class="active"</text> }
    It's just something I found on the web, but this way I have to add this for all pages. When I am able to let Request.RawUrl only return the root view folder (eg "TVShowsLibrary" in this example), then I can match it with Url.Action("", "TVShowsLibrary") and so it matches all contents in that view directory. I think I may find it with Google, but if you know how to get the root view folder with the request URL, please, I like to know :)

    Thanks for the suggestion :) I'm planning to make a responsive design to it will also fit on smaller screen sizes.
    Maybe a dedicated mobile skin -> http://jquerymobile.com/ ? ;)
    I don't like jQuery Mobile. First I'm going to make a responsive design (almost finished) which also works very good for mobile devices.
     
    Last edited:

    umdanwait

    Portal Member
    July 30, 2008
    6
    4
    Home Country
    Canada Canada
    Nice look !

    Works well on IE10 (preview) but like all HTML5 web sites there is missings styles under previous versions of IE (tested 9 and 8). Maybe if you have acces to html headers, you can try adding < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> to have a better look under previous versions of IE. I have already try myself to override the headers in web.config but no luck (maybe my custom setup under apache doesn't support these customs header directives).
     

    Oxan

    Retired Team Member
  • Premium Supporter
  • August 29, 2009
    1,730
    1,124
    Home Country
    Netherlands Netherlands
    You can only configure HTTP headers in web.config, not HTML "headers". The <meta> tag can be added in Shared/_Layout.cshtml if I remember correctly.
     

    Dragy

    Portal Pro
    April 27, 2009
    778
    333
    31
    Home Country
    Netherlands Netherlands
    Okay, I will add that tag, though I never saw that before. I trust on you that it works :p

    Yes, it must be added to _Layout.cshtml

    Edit:
    I've found how I can check the page easier, with Request.RawUrl.Contains("Schedule")
    So that problem is solved :)
     
    Last edited:

    Users who are viewing this thread

    Top Bottom