chef 3745 Posted September 24, 2019 Share Posted September 24, 2019 (edited) JJ. Abrams would be proud! #itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer>h1 { font-weight: lighter !important; font-variant: petite-caps !important; animation: tracking-in-expand 0.7s 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both !important; } .nameContainer:after { position: fixed; content: ''; background: url(../../web/lens.png); top: -10%; left: 10%; width: 34%; height: 40%; z-index: -1; background-size: cover; animation: fadeInThenOut 3s 2s forwards; /* transform: translate(-41%, -30%); */ opacity: 0; } @keyframes fadeInThenOut{ 0%{ opacity:0; } 50%{ opacity:1; } 75%{ opacity:0.3; } 100%{ opacity:0; transform: translateX(4%); } } @keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } Drop the file above into "*AppData*\Roaming\Emby-Server\system\dashboard-ui" folder and restart the server to add the image to the web services. Edited September 24, 2019 by chef 2 Link to comment Share on other sites More sharing options...
PrincessClevage 173 Posted September 24, 2019 Share Posted September 24, 2019 Only works with web client? Link to comment Share on other sites More sharing options...
chef 3745 Posted September 24, 2019 Author Share Posted September 24, 2019 Link to comment Share on other sites More sharing options...
chef 3745 Posted September 26, 2019 Author Share Posted September 26, 2019 Oh man! I have perfected this! The secret was to rotate the lens flare image away from the user, now it just looks like it's meant to be there! I will posted updated css. Link to comment Share on other sites More sharing options...
chef 3745 Posted September 26, 2019 Author Share Posted September 26, 2019 #itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer:after { position: absolute; content: ''; background: url(../../web/lens.png); top: -180px; left: -5%; width: 30%; height: -webkit-fill-available; z-index: -1; background-size: cover; animation: fadeInThenOut 15s infinite; transform: rotateX(-35deg); opacity: 0; } @keyframes fadeInThenOut { 0% { opacity: 0; } 25%{ opacity: 1; } 50% { opacity:0; transform: rotateX(-75deg); } 75%{ opacity: 1; } 100% { opacity: 0; transform: rotateX(-75deg); } } Link to comment Share on other sites More sharing options...
PrincessClevage 173 Posted September 26, 2019 Share Posted September 26, 2019 #itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer:after { position: absolute; content: ''; background: url(../../web/lens.png); top: -180px; left: -5%; width: 30%; height: -webkit-fill-available; z-index: -1; background-size: cover; animation: fadeInThenOut 15s infinite; transform: rotateX(-35deg); opacity: 0; } @keyframes fadeInThenOut { 0% { opacity: 0; } 25%{ opacity: 1; } 50% { opacity:0; transform: rotateX(-75deg); } 75%{ opacity: 1; } 100% { opacity: 0; transform: rotateX(-75deg); } } Private YouTube link? 2 Link to comment Share on other sites More sharing options...
KobayashiM 11 Posted February 8, 2021 Share Posted February 8, 2021 Neat. How did you get the cards to move like that on mouse-over? Link to comment Share on other sites More sharing options...
trusselo 220 Posted February 21, 2021 Share Posted February 21, 2021 and how did you do the round people, or circle people photos? search returned nothing. Link to comment Share on other sites More sharing options...
minininja 0 Posted February 21, 2021 Share Posted February 21, 2021 https://emby.media/community/index.php?/topic/71640-cast-and-images-of-the-circular-team/&do=findComment&comment=862896 Link to comment Share on other sites More sharing options...
jachin99 82 Posted February 22, 2021 Share Posted February 22, 2021 What do I name file, and what extension should I give it? Link to comment Share on other sites More sharing options...
CyberPoison 32 Posted February 26, 2021 Share Posted February 26, 2021 (edited) On 9/24/2019 at 3:47 AM, chef said: JJ. Abrams would be proud! #itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer>h1 { font-weight: lighter !important; font-variant: petite-caps !important; animation: tracking-in-expand 0.7s 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both !important; } .nameContainer:after { position: fixed; content: ''; background: url(../../web/lens.png); top: -10%; left: 10%; width: 34%; height: 40%; z-index: -1; background-size: cover; animation: fadeInThenOut 3s 2s forwards; /* transform: translate(-41%, -30%); */ opacity: 0; } @keyframes fadeInThenOut{ 0%{ opacity:0; } 50%{ opacity:1; } 75%{ opacity:0.3; } 100%{ opacity:0; transform: translateX(4%); } } @keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } Drop the file above into "*AppData*\Roaming\Emby-Server\system\dashboard-ui" folder and restart the server to add the image to the web services. Hi @chef can you please tell us how you make the cast crew round in the new version of emby ? Also looks like your css doens't work on version 4.6.0.26 Edited February 26, 2021 by CyberPoison Link to comment Share on other sites More sharing options...
chef 3745 Posted February 26, 2021 Author Share Posted February 26, 2021 1 hour ago, CyberPoison said: Hi @chef can you please tell us how you make the cast crew round in the new version of emby ? Also looks like your css doens't work on version 4.6.0.26 There is a post somewhere on the fourm called: custom css. I'd t have round actor images anymore, and I can't remember where the code was. I'll see if I can find it. 2 Link to comment Share on other sites More sharing options...
CyberPoison 32 Posted February 26, 2021 Share Posted February 26, 2021 I have tried some of them but unfortunately all of them broke me the page like no Actor name or personage name on movie etc... So for now I have it by default. Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted February 26, 2021 Share Posted February 26, 2021 7 hours ago, CyberPoison said: Hi @chef can you please tell us how you make the cast crew round in the new version of emby ? See this topic https://emby.media/community/index.php?/topic/71640-cast-and-images-of-the-circular-team/&do=findComment&comment=862896 Link to comment Share on other sites More sharing options...
don_tolbert 2 Posted March 18, 2021 Share Posted March 18, 2021 The original post and subsequent code do not work for me. I've put the lens.png file in multiple locations on my linux emby file directory (/dashboard-ui, /images) and changed the code url(../../web/lens.png) to read ../web/lens.png, and /web/lens.png and finally just lens.png but have not had any success. Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 (edited) Do you have a dashboard ui folder .. and did you restart emby and your browser? Checking it myself.. again.. EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since Edited March 18, 2021 by Guest Link to comment Share on other sites More sharing options...
chef 3745 Posted March 18, 2021 Author Share Posted March 18, 2021 7 minutes ago, Hxemby001 said: Do you have a dashboard ui folder .. and did you restart emby and your browser? Checking it myself.. again.. EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since It's been a while since I did this. I was on a "learn all the CSS properties off by heart" kick back then, so I tried out a whole bunch of stuff. I'm not entirely sure it still stands up Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 Yeah there are a few that really don't work anymore... I could NEVER learn them all by heart unless I start using them day to day again.. Dreamweaver used to be a life saver... love that program.. Now I am using the 'Developer Tools' in Edge.. Used to use an extension in Firefox.. starting to miss FF these days.. Link to comment Share on other sites More sharing options...
jachin99 82 Posted March 18, 2021 Share Posted March 18, 2021 59 minutes ago, Hxemby001 said: Do you have a dashboard ui folder .. and did you restart emby and your browser? Checking it myself.. again.. EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since Where did you put the graphic, and where did you put the the actual code? What file extension did you give it Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 Inside the main directory for emby and its executable in... a folder called 'dashboard-ui' this is basically the servers 'root' directory.. The code was inserted in the CSS section of Settings under Dashboard in the Manage Emby Server Section.. Link to comment Share on other sites More sharing options...
don_tolbert 2 Posted March 19, 2021 Share Posted March 19, 2021 Thank you for the advice, I will try these tips when I get back from work Link to comment Share on other sites More sharing options...
don_tolbert 2 Posted March 19, 2021 Share Posted March 19, 2021 16 hours ago, Hxemby001 said: Do you have a dashboard ui folder .. and did you restart emby and your browser? Checking it myself.. again.. EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since I started over, removed the code, removed the lens.png. Restarted the Emby server, then added the code (first code, not second) and dropped the lens.png back into /opt/emby-server/system/dashboard-ui. I stopped the Emby server then started it again. I now see the lens but the blur/fade-in is not there much like you experience. Thanks for your help. If anyone can get the blur/fade-in to work in version 4.5.4.0, please reply here. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now