Jump to content

Emby theater Skin Mockups


Recommended Posts

shaefurr

So here's a more complete theme with a login and details page added.

 

59897b89aa03d_login.jpg

 

59897bdb0e6c2_home.jpg

 

59897b969da04_Details.jpg

  • Like 3
Link to post
Share on other sites
Angelblue05

I really like it. The green font is hard the read, maybe a darker tone would work better. I like it for the button, looks sharp.

Link to post
Share on other sites

So here's a more complete theme with a login and details page added.

 

59897b89aa03d_login.jpg

 

59897bdb0e6c2_home.jpg

 

59897b969da04_Details.jpg

I can recreate that login almost exactly, but the focus animation in the theater is driven by JavaScript and I can't find it anywhere. I need to stop the enlarging of the posters to make his theme work on the screen.

 

Dude this is working out! Wow.

 

Question: since we replaced the bottom row with the continue watching, I should put the 'favorites' and collections in the top menu?

Edited by chef
Link to post
Share on other sites

Finally got the continue watching elements seated under the spotlight.

 

I'll work on the white background next!

 

@@shaefurr

 

Just need to know where to place the 'all movies' tile.

 

I could try to attach it to the 'movies' link at the top.

 

Also I need to fix spacing of the Logo at the bottom of the screen. It's getting quite crowed down there!

 

Plus im at work on an XP machine... LOL!

 

Soooo much fun!

 

5989d67bd7a05_example1.png

Edited by chef
Link to post
Share on other sites

And I also just noticed you have the continue watching area span the entire screen with larger new releases on top beside the spotlight.

 

I can do that!

Link to post
Share on other sites

I'm doin' it dude! I got the 'continue watching' to span the entire bottom... hehe

 

Gotta fix the logo still, don;t know where to put it :)

 

5989f20d3cba8_example2.png

Link to post
Share on other sites
shaefurr

I'm doin' it dude! I got the 'continue watching' to span the entire bottom... hehe

 

Gotta fix the logo still, don;t know where to put it :)

 

5989f20d3cba8_example2.png

 

Lookin awesome dude!

 

I had planned that the favorites and such would be on the top bar with everything else like you said, movies, tv, collections etc, and clicking the movies tab would bring you to all movies. If you cant get it to work I think I know where you can put it.

 

As far as the logo for highlighted items, I just didn't plan on using it at all. I didn't want a cluttered skin lol. So I have no idea there, maybe just shrink everything a bit and stick it on the very bottom if you wanna keep it?

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

Looking good.  I really suggest increasing that text size if you plan on this being utilized in a 10-foot interface...

  • Like 2
Link to post
Share on other sites
shaefurr

Can I use this please?!

 

My theater skin is coming along but I really like the homepage here.

 

Do you care if I use it but the back ground is black?

 

Oh and the menu bar at the top might not look exactly the same... Because I'm new at this whole calling CSS classes from JavaScript and stuff.

 

Here is one with a dark background btw, forgot to post it last night.

598a03d7b9d3b_darkmockup1.jpg

Link to post
Share on other sites

Here is one with a dark background btw, forgot to post it last night.

598a03d7b9d3b_darkmockup1.jpg

 

I can recreate this almost entirely :)

 

I need to move the top menu into the header area, I'm going to try that now.

 

then create a "hr" which will act as the line under the menu.

Edited by chef
Link to post
Share on other sites

I'm close, I'm going to animate the line with some javascript, and it also needs to match better. 1px should do it.

 

You have an eye sir for the design.

 

I can't design it but I can make it work.

 

 

 

598a1b4a2a406_example3.png

Edited by chef
  • Like 3
Link to post
Share on other sites
shaefurr

I'm close, I'm going to animate the line with some javascript, and it also needs to match better. 1px should do it.

 

You have an eye sir for the design.

 

I can't design it but I can make it work.

 

 

 

598a1b4a2a406_example3.png

looks great, wish I knew how to code lol.

 

Gonna do one more for episode view.

  • Like 1
Link to post
Share on other sites

looks great, wish I knew how to code lol.

 

Gonna do one more for episode view.

Excellent! Keep 'em coming and we'll release a $hit ton of themes for the theater, and it'll be amazing!

Link to post
Share on other sites
shaefurr

Excellent! Keep 'em coming and we'll release a $hit ton of themes for the theater, and it'll be amazing!

heck yeah!

 

Episode view.

598a396298dcb_episode.jpg

  • Like 2
Link to post
Share on other sites
shaefurr

If you can't tell, I like the way episode view already looks lol.

 

Sent from my VS990 using Tapatalk

  • Like 1
Link to post
Share on other sites
LiquidFX

I kinda hijacked the theme and installed it on my test PC and what you have so far looked good. I know you are still working on it but I found a few things that could be an issue. 

The titles seem to take to long to load, the image will show before the title comes up.

The TV screen is a bit off, continue watching has a large image that is behind everything else.

  • Like 1
Link to post
Share on other sites

Looking good. I really suggest increasing that text size if you plan on this being utilized in a 10-foot interface...

text increased.

Link to post
Share on other sites

I kinda hijacked the theme and installed it on my test PC and what you have so far looked good. I know you are still working on it but I found a few things that could be an issue.

The titles seem to take to long to load, the image will show before the title comes up.

The TV screen is a bit off, continue watching has a large image that is behind everything else.

When I browsed to tv I realized the jumble of cards to.

 

I'll have to edit the html to look like the movies panel.

 

The problem I had was setting the scroll frame.

 

It is flexible and I can't find where it was set. If the recommendations list was set to 1 row then the scroll frame would shrink and cut off the "resume watching" area.

 

Even if i set the resume watching area with a z-index of 1 or 2 to try and bring it to the front it still got cut off.

 

So I changed the recommendation lists back to 2 rows and rescaled the primary images to force the scroll frame back in to position.

 

Looks better anyway...

 

The added "scrollLine" at the top needs to be positioned next. It should touch the underline of the "userViews" area (which is the list at the top (movies/tv, etc).

 

That will give the illusion of what @@shaefurr was going for with those views. The line is thicker under the selected view.

 

Finally, the "all movies"/"tv series" button needs to bind to the appropriate 'userView".

 

Luckily the kitchen isn't super busy this time of year... So, should have something awesome really soon!

 

Great job @@shaefurr your a talented man!

Edited by chef
Link to post
Share on other sites
Nick's MCE

598adf32c9e50_Screenshot20170809195323.p

 

Just trying to get discs and clear arts in the mix, maybe on the individual movie page. :0

 

Great work dude!

  • Like 1
Link to post
Share on other sites
shaefurr

You know what the theater has always been missing?....

 

A kick-ass emby splash page.

 

Let's add one to this theme! That's why I left a delay in the text animations.

 

 

What do you think?

awesome, we talking animated or a still splash?

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...