Jump to content

Emby theater Skin Mockups


shaefurr

Recommended Posts

chef

awesome, we talking animated or a still splash?

Animated for certain.

 

We can pretty much create anything we want for it, and animate it all sorts of ways using CSS.

 

But it should get to the app quickly :)

 

If you decided you have time and want to whip something together, send me it in pieces and I can code it up.

 

In the mean time, I'll finish the dark theme and go through to change it to light, like you pictures are :)

Edited by chef
Link to comment
Share on other sites

shaefurr

Animated for certain.

 

We can pretty much create anything we want for it, and animate it all sorts of ways using CSS.

 

But it should get to the app quickly :)

 

If you decided you have time and want to whip something together, send me it in pieces and I can code it up.

 

In the mean time, I'll finish the dark theme and go through to change it to light, like you pictures are :)

Sweet, I'll see what I cam come up with, have an idea for a name for the theme, or is there none?

 

Also, one more fix, forgot to add buttons to episode view.

598b5369af96b_episode.jpg

Link to comment
Share on other sites

chef

splash.html

 

This isn't good.... But this file has some cool css attributes which make the emby logo float on the screen.

 

 

Link to comment
Share on other sites

shaefurr

attachicon.gifsplash.html

 

This isn't good.... But this file has some cool css attributes which make the emby logo float on the screen.

that looks cool, way better than a static image.

 

You can use something like this for a promo image or something, I just made up a name as a placeholder.

598b618b18ad6_promo1.jpg

Link to comment
Share on other sites

chef

that looks cool, way better than a static image.

 

You can use something like this for a promo image or something, I just made up a name as a placeholder.

598b618b18ad6_promo1.jpg

Love it! I'll add it to the task list for tonight. Great job!

Link to comment
Share on other sites

chef

598bdd5cc427e_tvembymedia.png

 

Ah man! Can't have a splash because there is a contingency in the theater to load things slowly for slow browsers.

 

I gave it a shot but because everything is loaded by JavaScript (with timers to load things like the views at the top) I couldn't get the splash to interrupt it properly without messing up load times (and a spinning loading circle).

 

Kind of disappointing because our theme deserves its name on the screen for the 600 milliseconds. Lol!

 

Good news is that the tv layout on the home screen looks good. But those backdrop tiles need to be 'height-i-er'...

 

Now on to the season selection :)

Edited by chef
Link to comment
Share on other sites

shaefurr

I don't use live TV, can one of you guys send a screenshot of the guide so I have something to work from

 

Sent from my VS990 using Tapatalk

Link to comment
Share on other sites

It would be so great if you could also get the line underneath the selection of the libraries to be bold like in shaefurr example because that really made it stand out. Can't wait to try it out. 

 

 

598bf1a19565a_Capture.png

 

Web client

 

598bf7e54eac0_Capture2.png

 

 

Edited by denz
Link to comment
Share on other sites

Guest asrequested

I don't use live TV, can one of you guys send a screenshot of the guide so I have something to work from

 

Sent from my VS990 using Tapatalk

 

How it looks in Chrome browser

 

598bf8399cf8f_Snapshot_106.jpg

 

Denz already posted one of theater, but here's another. This is in TV mode.

 

598bf9019e276_Snapshot_107.jpg

Edited by Doofus
Link to comment
Share on other sites

chef

It would be so great if you could also get the line underneath the selection of the libraries to be bold like in shaefurr example because that really made it stand out. Can't wait to try it out.

 

The line is there in the theme, it didn't show up in the screenshot for some reason :)

Link to comment
Share on other sites

Upcoming TV

 

598a9526ada21_upcoming.jpg

 

I generally love your designs but this one sure seems to have a lot of screen white-space in it...  Not that that is necessarily a bad thing because too much on screen is, well, too much but this one seems to compact too much information into too small of a space...  I dunno, it just doesn't "feel" as good as most of your other screens.

 

Just friendly feedback because you have set a high standard :).

Link to comment
Share on other sites

chef

Looks like we might get a  splash page working after all.

 

Might have to just call "loading.hide();" on the !document, then set a timeout function on the splash div before hiding it.

 

We might get your 600ms of fame after all... lol!

Link to comment
Share on other sites

chef

Starting to look up :)

Still need a gradient inside the spotlight, transparent black from the bottom so we can get rid of the black box around the media title and just have plain white text.

Also, Latest media row title needs to change color to dark. :)

 

598c7c3e88bcf_example4.png

Edited by chef
  • Like 1
Link to comment
Share on other sites

shaefurr

I generally love your designs but this one sure seems to have a lot of screen white-space in it...  Not that that is necessarily a bad thing because too much on screen is, well, too much but this one seems to compact too much information into too small of a space...  I dunno, it just doesn't "feel" as good as most of your other screens.

 

Just friendly feedback because you have set a high standard :).

Ya I agree, When I started the upcoming I was using thumbs, then switched to posters, then banners. Didn't want to double column them because it looked weird, but I totally see what you're saying. I'll see what I can do with it.

Link to comment
Share on other sites

shaefurr

Still working on the guide page, takes a lot longer than you think to make all the program boxes :P

  • Like 1
Link to comment
Share on other sites

shaefurr

Ok, so I was a bit lazy on this one so I just populated some random stuff lol. What I should have said "Use the Web UI guide with light colors and larger fonts"

 

 

Edit: just noticed I left off any kind of info box for selected items.

598d040b014d6_guide2.jpg

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

Emby Theater guide needs to have a lot of improvements to be functional but visually it has just too much blank space if it was a bitter narrower another channel could squize in. For Repeats instead of displaying Repeat it should just be a bit transparent R so it doesn't stand out as much same for New etc. 

Edited by denz
Link to comment
Share on other sites

chef

Emby Theater guide needs to have a lot of improvements to be functional but visually it has just too much blank space if it was a bitter narrower another channel could squize in. For Repeats instead of displaying Repeat it should just be a bit transparent R so it doesn't stand out as much same for New etc.

denz I haven't looked at the guide code yet, but if it is like any of the other classes there is probably the option to request more data on the screen.

 

Is that what you mean? You'd like to see more channels at once?

Edited by chef
Link to comment
Share on other sites

chef

Ok, so I was a bit lazy on this one so I just populated some random stuff lol. What I should have said "Use the Web UI guide with light colors and larger fonts"

 

 

Edit: just noticed I left off any kind of info box for selected items.

598d040b014d6_guide2.jpg

You know when you fork the main default theme for the theater it actually has two themes in one.

 

One is the horizontal theme that we've been creating and the other mimics the web UI.

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