Jump to content


Photo

Emby theater Skin Mockups

skin mockup emby emby theater design

  • Please log in to reply
144 replies to this topic

#1 shaefurr OFFLINE  

shaefurr

    Freelance Photoshop Designer

  • Super Testers
  • 2202 posts
  • Local time: 03:14 AM
  • LocationNew Mexico

Posted 04 November 2016 - 08:34 PM

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, 04 November 2016 - 08:40 PM.

  • MrWebsmith, Erik, LiquidFX and 6 others like this

#2 monkeyslapper OFFLINE  

monkeyslapper

    Advanced Member

  • Members
  • 73 posts
  • Local time: 11:14 AM

Posted 14 November 2016 - 11:07 AM

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

 


  • shaefurr likes this

#3 Angelblue05 OFFLINE  

Angelblue05

    Advanced Member

  • Developers
  • 12616 posts
  • Local time: 04:14 AM

Posted 14 November 2016 - 11:38 AM

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


Sent from my iPhone using Tapatalk

#4 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 14 November 2016 - 01:18 PM

Looks very nice

#5 shaefurr OFFLINE  

shaefurr

    Freelance Photoshop Designer

  • Super Testers
  • 2202 posts
  • Local time: 03:14 AM
  • LocationNew Mexico

Posted 22 November 2016 - 09:02 PM

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, 24 November 2016 - 02:46 AM.

  • Archon likes this

#6 shaefurr OFFLINE  

shaefurr

    Freelance Photoshop Designer

  • Super Testers
  • 2202 posts
  • Local time: 03:14 AM
  • LocationNew Mexico

Posted 22 November 2016 - 09:02 PM

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, 12 April 2017 - 05:35 PM.

  • MrWebsmith likes this

#7 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 22 November 2016 - 10:20 PM

Those are very nice !



#8 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 23 November 2016 - 05:06 PM

They look great! 


Edited by knottz, 23 November 2016 - 05:07 PM.


#9 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 23 November 2016 - 05:13 PM

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.


  • shaefurr likes this

#10 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 23 November 2016 - 05:28 PM

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.


  • shaefurr likes this

#11 monkeyslapper OFFLINE  

monkeyslapper

    Advanced Member

  • Members
  • 73 posts
  • Local time: 11:14 AM

Posted 24 November 2016 - 10:27 AM

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

 

Great ideas.


  • shaefurr likes this

#12 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 25 November 2016 - 12:44 PM

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, 25 November 2016 - 12:54 PM.


#13 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 25 November 2016 - 01:42 PM

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

 

https://github.com/M...y-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.


  • chef and shaefurr like this

#14 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 25 November 2016 - 05:02 PM

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

 

https://github.com/M...y-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.


  • chef likes this

#15 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 25 November 2016 - 05:43 PM

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



#16 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 25 November 2016 - 05:52 PM

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



#17 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 25 November 2016 - 06:02 PM

Yes exactly.


  • knottz likes this

#18 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 25 November 2016 - 06:04 PM

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)

Spoiler

  • chef likes this

#19 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 140284 posts
  • Local time: 05:14 AM

Posted 25 November 2016 - 06:06 PM

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



#20 knottz OFFLINE  

knottz

    Advanced Member

  • Members
  • 68 posts
  • Local time: 11:14 AM
  • LocationYorkshire, United Kingdom.

Posted 25 November 2016 - 06:18 PM

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)







Also tagged with one or more of these keywords: skin, mockup, emby, emby theater, design

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users