Jump to content
shaefurr

Emby theater Skin Mockups

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Angelblue05

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

 

 

Sent from my iPhone using Tapatalk

Share this post


Link to post
Share on other sites
Luke

Looks very nice

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Luke

Those are very nice !

Share this post


Link to post
Share on other sites
knottz

They look great! 

Edited by knottz

Share this post


Link to post
Share on other sites
Luke

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

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
monkeyslapper

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

 

Great ideas.

  • Like 1

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
Luke

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

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
Luke

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

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
Luke

Yes exactly.

  • Like 1

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
Luke

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

Share this post


Link to post
Share on other sites
knottz

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)

Share this post


Link to post
Share on other sites
Luke

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

Share this post


Link to post
Share on other sites
knottz

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 :)

Share this post


Link to post
Share on other sites
knottz

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

Share this post


Link to post
Share on other sites
knottz

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

  • Like 4

Share this post


Link to post
Share on other sites
Luke

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

  • Like 1

Share this post


Link to post
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...