WebMP Skin: BlueShift v4 (1 Viewer)

[Dragy]

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

 

[mpsam]

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.

 

[Dragy]

Thanks for the suggestion I'm planning to make a responsive design to it will also fit on smaller screen sizes.

 

[Oxan]

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

 

[DieBagger]

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/ ?

 

[Dragy]

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.

 

[umdanwait]

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]

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]

Okay, I will add that tag, though I never saw that before. I trust on you that it works

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

 

[umdanwait]

Thanks for the tip _Layout.cshtml, I tried it but same issue for the css backgrounds under IE.