Jump to content

New theme - Plex inspired look


fillidill

Recommended Posts

hygorfragas
2 minutes ago, chef said:

Just wanted to say thank you for the work you've done. It is inspiring. 

thanksCSS.thumb.png.de360082be9395289bcfc6efe001eb1c.png

hello are those icons on the side menu functional? you can show ? 

Link to comment
Share on other sites

tomnjerry74

Just for clarification, in the now playing music view, was the repositioning of the back arrow and de-centering of the album art intentional? Thanks again for this awesome theme :)

image.thumb.png.f16c3cf5447812822011c245c9178ba8.png

Link to comment
Share on other sites

chef
6 minutes ago, hygorfragas said:

Utorrent does it really work or is it just the icon?

Uh... Well.. yes it does. 😆

Edited by chef
Link to comment
Share on other sites

fillidill
1 hour ago, chef said:

Just wanted to say thank you for the work you've done. It is inspiring. 

thanksCSS.thumb.png.de360082be9395289bcfc6efe001eb1c.png

That looks great! 😊👌

1 hour ago, tomnjerry74 said:

Just for clarification, in the now playing music view, was the repositioning of the back arrow and de-centering of the album art intentional? Thanks again for this awesome theme :)

image.thumb.png.f16c3cf5447812822011c245c9178ba8.png

Hmm the cover no, but the arrow yes. It looks a bit weird when you don't have a logo unfortunately. Both the video player and the audio player share the same code so I can't make specific changes for the audio player I'm afraid. 

I will try to fix the audio cover however as soon as I have time. 

 

1 hour ago, tomnjerry74 said:

Looks like these buttons are defaulted to Times New Roman on mobile
42D1FC04-0DBE-4E60-A41C-7F3D61008C59.jpeg.91e04bd6d869962f8d6c52859ecd11f0.jpeg

I don't think I have made any font changes if I remember correctly. Can you check if this happens without my css? If so, where are these buttons? 

Link to comment
Share on other sites

tomnjerry74
2 minutes ago, fillidill said:

Hmm the cover no, but the arrow yes. It looks a bit weird when you don't have a logo unfortunately. Both the video player and the audio player share the same code so I can't make specific changes for the audio player I'm afraid. 

I will try to fix the audio cover however as soon as I have time. 

 

I don't think I have made any font changes if I remember correctly. Can you check if this happens without my css? If so, where are these buttons? 

Okay cool, thanks for the clarification. And they are the buttons displayed when you are viewing a movie, show, etc. Here is a SS without the custom CSS:

B6AA0D26-9855-44A7-9016-A61B03AE5DAC.thumb.jpeg.f98cf5570bef95bbea37cc146eaa1467.jpeg

Link to comment
Share on other sites

Happy2Play
7 hours ago, tomnjerry74 said:

Just for clarification, in the now playing music view, was the repositioning of the back arrow and de-centering of the album art intentional? Thanks again for this awesome theme :)

image.thumb.png.f16c3cf5447812822011c245c9178ba8.png

This should make changes to only apply to video and not change audio.

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.videoOsd-customFont.semiTransparent

to

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.videoOsd-customFont.semiTransparent:not(.videoOsdHeader-remotecontrol)

and

.flex-direction-column.videoOsdText.videoOsdText-customFont

to

.flex-direction-column.videoOsdText.videoOsdText-customFont:not(.videoOsdText-remotecontrol)

Does that accomplish what you wanted?

 

6 hours ago, tomnjerry74 said:

Okay cool, thanks for the clarification. And they are the buttons displayed when you are viewing a movie, show, etc. Here is a SS without the custom CSS:

 

Yes there is a button text font change as you can see here with font-family.

.detailButton-text {
    max-width: 10em!important;
    font-size: 12px;
    opacity: 0.7;
    transition: 0.2s!important;
    transition-delay: 0.7s;
    font-family: 'open sans';

Without css and with css

image.thumb.png.8c79a9ec560889adbc416055ed78a7bf.png

Edited by Happy2Play
  • Thanks 1
Link to comment
Share on other sites

tomnjerry74
16 hours ago, Happy2Play said:

This should make changes to only apply to video and not change audio.


.skinHeader.focuscontainer-x.headroom.videoOsdHeader.videoOsd-customFont.semiTransparent

to

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.videoOsd-customFont.semiTransparent:not(.videoOsdHeader-remotecontrol)

and


.flex-direction-column.videoOsdText.videoOsdText-customFont

to

.flex-direction-column.videoOsdText.videoOsdText-customFont:not(.videoOsdText-remotecontrol)

Does that accomplish what you wanted?

 

 

Yes there is a button text font change as you can see here with font-family.


.detailButton-text {
    max-width: 10em!important;
    font-size: 12px;
    opacity: 0.7;
    transition: 0.2s!important;
    transition-delay: 0.7s;
    font-family: 'open sans';

Without css and with css

image.thumb.png.8c79a9ec560889adbc416055ed78a7bf.png

Yes, many thanks! Those edits seem to sort things out

Link to comment
Share on other sites

Happy2Play
9 minutes ago, mxmh said:

great style... but could we remove the name of my Media ...to use only the icons ... in small or big?

Bildschirmfoto 2021-08-28 um 20.19.00.png

Are you talking about this?

div.homeSectionsContainer .smallBannerCard {
    width: 5%;
}
div.homeSectionsContainer .itemsContainer-sideFooters .cardFooterContent {display: none;}

image.thumb.png.b5c633f8a27e46422760f5b94a39fba0.png

Link to comment
Share on other sites

On 8/27/2021 at 6:01 PM, chef said:

Just wanted to say thank you for the work you've done. It is inspiring. 

thanksCSS.thumb.png.de360082be9395289bcfc6efe001eb1c.png

Wee need it in the next release xD

Link to comment
Share on other sites

fillidill

Thanks for all the nice feedback guys!

I have updated the theme and the new version (v2.1) can be found in the main post. 
- Font issues should now be fixed.
- Audio player cover vertical aligned better + some small adjustments.
- The back arrow is now only positioned in the bottom in the video player, not the audio player. Thanks a lot for the fix @Happy2Play!
- Some mobile version adjustments.

Link to comment
Share on other sites

Happy2Play
On 8/29/2021 at 4:37 AM, mxmh said:

@Happy2Play what can i use to change the icons of the libraries? 

thanks :)

What are you looking to change to?  But yes it can be done with some work as My Media and the navdrawer have to be targeted separately,  But would be the same concept as Dashboard in this topic.

Dashboard SVG replacement icons using custom CSS (simple)

Link to comment
Share on other sites

CarlosLima
On 8/26/2021 at 8:28 PM, CarlosLima said:

Hi,
I was unable to enlarge the poster.
Thanks for this tip.
Thanks in advance.

download.png

Can anyone help with that detail? Thank you

Link to comment
Share on other sites

arthurmv
On 8/25/2021 at 8:20 AM, fillidill said:

I moved from Plex to Emby and even though I think Emby is superior in its flexibility there are some things I like better with Plex, especially in terms of its looks. This theme is trying to fix that by making it a bit more similar to Plex but with some, in my opinion, improvements. The CSS is attached to this post for anyone interested and below are some screens to show it off :)
 

Good to know

  • I only use Chrome so I can't guarantee this CSS works as expected in other browsers. 
  • If you want the sidebar menu to look like in the screens, make sure to pin the sidebar.
  • Watched badge/banderoll is inverted which means that the badge will not be shown if media have been watched, like in Plex.
  • For desired look, please use the "Dark" theme for both Theme & Settings theme in the display settings.

 

1.jpg

2a.jpg

2b.jpg

3.jpg

4.jpg

5.jpg

 

style-v2.txt 72.13 kB · 46 downloads

style-v2.1.css 73.43 kB · 18 downloads

I love your theme, it is functional and pretty esthetic. Thanks a lot!

  • Thanks 1
Link to comment
Share on other sites

fillidill
6 hours ago, Doraemoon said:

Thank you, can the opacity of the background image of the video be increased?

Not sure which background image you mean. Could you please send a screen dump? 

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