Emby theater Skin Mockups

[shaefurr 1339]

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.

 

Mockup 1

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

 

 

 

 

Edited November 5, 2016 by shaefurr

[monkeyslapper 11]

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

 

[Angelblue05 4131]

It looks really nice, I'd want a skin like this in Kodi hah

 

 

Sent from my iPhone using Tapatalk

[Luke 38874]

Looks very nice

[shaefurr 1339]

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

 

Mockup 2

ORBIT: A simple, uncluttered user friendly skin

 

 

 

Edited November 24, 2016 by shaefurr

[shaefurr 1339]

Update: 4/12/17

 

Working on a disparity type theme

 

Mockup 3

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

 

 

Edited April 12, 2017 by shaefurr

[Luke 38874]

Those are very nice !

[knottz 9]

They look great! 

Edited November 23, 2016 by knottz

[Luke 38874]

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.

[knottz 9]

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.

[monkeyslapper 11]

Damn that looks GREAT! clean, simple, easy to follow.

 

Great ideas.

[knottz 9]

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 November 25, 2016 by knottz

[Luke 38874]

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.

[knottz 9]

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.

[Luke 38874]

Yes, just look at plugin.js where it is loading the css files and add your own file.

[knottz 9]

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

[Luke 38874]

Yes exactly.

[knottz 9]

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)

 

 

 

[Luke 38874]

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

[knottz 9]

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)

[Luke 38874]

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

[knottz 9]

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

[knottz 9]

Just a little more for you that I noticed.

 

 

 

 

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 November 25, 2016 by knottz

[knottz 9]

I'm fiddling with a skin, seems relatively easy even for a rookie like me.

[Luke 38874]

Very nice I'm working on the changes you mentioned regarding the titles.