Jump to content

Emby theater Skin Mockups


shaefurr

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 comment
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 comment
Share on other sites

chef

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 comment
Share on other sites

chef

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 comment
Share on other sites

chef

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 comment
Share on other sites

chef

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 comment
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 comment
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 comment
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 comment
Share on other sites

chef

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 comment
Share on other sites

chef

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 comment
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 comment
Share on other sites

chef

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 comment
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 comment
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 comment
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 comment
Share on other sites

chef

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 comment
Share on other sites

chef

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