Jump to content

Emby theater Skin Mockups


shaefurr

Recommended Posts

shaefurr

Figured id start a post for anyone that might want to make a new skin for emby theater in the future. These mockups were already posted in the emby theater thread, but figured id start with these and add more in the future. One of the reasons I love Kodi is all the different skins. Would be cool to have that with emby someday, skins to suite everyone's tastes. Id love to make some myself but I cant code for the life of me. So Ill stick to just drawing up some ideas for others. :P

 

Mockup 1

ARRAY: An enhanced version of the default emby theater skin.

57f83e283b327_login.jpg

 

57f8432dea1fd_home2.jpg

 

57f84340bf78d_movieshome2.jpg

 

57f8434ff3173_moviebrowse2.jpg

 

57f81e1c1f3df_Moviedetail.jpg

Edited by shaefurr
  • Like 9
Link to comment
Share on other sites

  • 2 weeks later...
monkeyslapper

Can't Code Either.. but you got my VOTE! Not seeing to many coders here that would like to code... This is a perfect time to use a movie QUOTE...

 

" Teacher: Bueller?... Bueller?... Bueller? " 

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
shaefurr

Still a WIP, only the login, movies and detail page done.

 

Mockup 2

ORBIT: A simple, uncluttered user friendly skin

5834ea72d9836_logincopy.jpg

 

5834ea99b619d_MOVIES.jpg

 

58368c9647233_details.jpg

 

Edited by shaefurr
  • Like 1
Link to comment
Share on other sites

shaefurr

Update: 4/12/17

 

Working on a disparity type theme

 

Mockup 3

DISPARITY: A Darker skin with selected items highlighted for maximum contrast.

 

58ee9cf1b4933_Home.jpg

 

Edited by shaefurr
  • Like 1
Link to comment
Share on other sites

They look great! 

 

If you are interested in building a skin I will commit to doing the core work that is needed to have a skin catalog and easy installation, etc.

  • Like 1
Link to comment
Share on other sites

If you are interested in building a skin I will commit to doing the core work that is needed to have a skin catalog and easy installation, etc.

I will be fiddling around in my spare time with the skin, I messed around with branding and other things on the web client previously and had it nicely customised  but for me it is a learning experience. I have fun experimenting with stuff like this so who knows I might come up with something. I do love the idea of people skinning this though.

  • Like 1
Link to comment
Share on other sites

If you are interested in building a skin I will commit to doing the core work that is needed to have a skin catalog and easy installation, etc.

I have been trying to create a skin but it seems there are certain parts of the css hidden away that I cannot find in what's available? for instance ".cardimage {" or even ".coveredimage {" on its own?

 

looks like i need to be able to edit... 

/bower_components/emby-webcomponents/cardbuilder/card.css

Edited by knottz
Link to comment
Share on other sites

These are shared components used by both Emby Theater and the built-in web app. You can find them here:

 

https://github.com/MediaBrowser/emby-webcomponents

 

These components are there to help you. Your skin does not have to use them if you do not want to. You cannot actually edit them directly, but what you can do is add styles to your own css files to override them. If you need deeper customization of a component, then you would need to copy the component into your skin and have your skin use your own custom version instead of the shared one.

  • Like 2
Link to comment
Share on other sites

These are shared components used by both Emby Theater and the built-in web app. You can find them here:

 

https://github.com/MediaBrowser/emby-webcomponents

 

These components are there to help you. Your skin does not have to use them if you do not want to. You cannot actually edit them directly, but what you can do is add styles to your own css files to override them. If you need deeper customization of a component, then you would need to copy the component into your skin and have your skin use your own custom version instead of the shared one.

 

Okay, are you basically saying that if i was to open up noflex.css and add a new line with .cardimage { - whatever i write in there will override the existing styleset? Is there a way I can make the plugin/theme load up another css file altogether? this would be awesome. I could then write all custom css into the single file and it would be far more manageable.

  • Like 1
Link to comment
Share on other sites

Sorry for this but I am really not good with js...

Is this what you mean?
'css!' + pluginManager.mapPath(self, 'css/style'),

so could i just add another line like so

'css!' + pluginManager.mapPath(self, 'css/customstyle'),

which would then load customstyle.css

Link to comment
Share on other sites

Great, I shall see what I can cook up. When adding a custom skin by the way, it duplicates the option "default skin" in the settings area. Not sure if that is meant to happen, i'd guess not? (check spoiler)

 

5838b5858564b_screenie.png

 

 

  • Like 1
Link to comment
Share on other sites

Well you have to go into your custom skin and change some of the names.

 

Thanks, should have looked deeper, line 221 on plugin.js is the line that needs to be changed. (You could add this info to the readme.md)

Link to comment
Share on other sites

Yes thanks. That was accidentally hard-coded. I will just have it use self.name and the readme won't need to be updated.

Link to comment
Share on other sites

Alright cool, I'll just leave my change in there, suppose it can't hurt. besides, most of my changes will involve my custom file now, thanks for that great bit of info, makes life a lot easier, just messing around now :)

Link to comment
Share on other sites

Just a little more for you that I noticed.

 

5838bf77e4e87_shots.png

 

 

 

Just want to mention, top left which should say custom skin name is after i changed line 221, so not sure where that is pulling the words "default skin" from.

Edited by knottz
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...