Jphannon 1 Posted February 18 Share Posted February 18 Is there a way to add custom tabs / buttons to the menu slide, just above my media out (pictured below): If so what html file would i have to edit? thanks Link to comment Share on other sites More sharing options...
Solution Happy2Play 8282 Posted February 18 Solution Share Posted February 18 Not that I know of as the drawer is scripted in the navdrawercontent.js. Link to comment Share on other sites More sharing options...
Jphannon 1 Posted February 18 Author Share Posted February 18 Oh ok then, just wanted to check as i have just moved from jellyfin and this was relatively easy to do over there but if its not possible I can live with it. Thanks For letting me know. Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted February 18 Share Posted February 18 3 minutes ago, Jphannon said: Oh ok then, just wanted to check as i have just moved from jellyfin and this was relatively easy to do over there but if its not possible I can live with it. Thanks For letting me know. How did you do it there as it is relatively the same navdrawer as they are just a really old version of Emby that they have customized? Link to comment Share on other sites More sharing options...
Jphannon 1 Posted February 18 Author Share Posted February 18 (edited) It looks like this where I have added the Find Media tab: You can make these changes within the config.json file in the jellyfinweb folder Edited February 18 by Jphannon Link to comment Share on other sites More sharing options...
Jphannon 1 Posted February 19 Author Share Posted February 19 (edited) Instead of adding the link to the side bar menu, I have tried to add it to the home page about tv / movies but I am having problems with the spacing below the element as there seems to be 100 px bottom border on the button that even if i specify bottom border 0 is still there, and also the button scales across the whole screen (note forgot password is just a remnant from coping from another html element). here is my home.html: <div class="view flex flex-direction-column withTabs"> <div class="tabContent tabContent-positioned flex flex-grow" data-index="0"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow focuscontainer-down" data-bindheader="true"> <div class="Personal-Links" style="top:70px;bottom:0px;text-align:center;position:relative;"> <pre> <a is="emby-linkbutton" href="placeholder" target="_blank" type="button" class="raised block btnSelectServer"> <span>placeholder?</span> </a> </pre> </div> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> <div class="tabContent flex flex-grow" data-index="1"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-grow focuscontainer-down" data-bindheader="true"> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> <div class="tabContent flex flex-direction-column flex-grow" data-index="2"> </div> </div> and here is what it looks like on a web browser: How would I get rid of the empty space, and scale the button to a normal width? Thanks Edited February 19 by Jphannon Link to comment Share on other sites More sharing options...
Jphannon 1 Posted February 19 Author Share Posted February 19 Dont worry, couple prompts to chat gpt fixed it: <div class="view flex flex-direction-column withTabs"> <div class="tabContent tabContent-positioned flex flex-grow" data-index="0"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow focuscontainer-down" data-bindheader="true"> <div class="Personal-Links" style="top:120px;bottom:0px;text-align:center;position:relative;"> <a is="emby-linkbutton" href="placeholder" target="_blank" type="button" class="raised block btnSelectServer" style="width: 150px; margin: 0 auto;"> <span style="display: inline-block;">Find New Media</span> </a> </div> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> <div class="tabContent flex flex-grow" data-index="1"> <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-grow focuscontainer-down" data-bindheader="true"> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> <div class="tabContent flex flex-direction-column flex-grow" data-index="2"> </div> </div> 1 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted February 19 Share Posted February 19 Won't be where you want it but you can do the same in the index.html to put it in the drawer. Didn't test to much. Code snippet removed previous style. <body class="mainAnimatedPages skinBody"> <div class="backdropContainer"></div> <div class="backgroundContainer"></div> <div class="mainDrawer hide focuscontainer padded-bottom-page" is="emby-scroller" data-miniscrollbar="true" data-horizontal="false" data-focusscroll="true" data-navcommands="card" data-bindheader="false"> <div class="Personal-Links"> <a is="emby-linkbutton" href="placeholder" target="_blank" type="button" class="raised block btnSelectServer"> <span style="display: inline-block;">Find New Media</span> </a> </div> <div class="scrollSlider mainDrawerScrollSlider"></div> </div> <div class="skinHeader focuscontainer-x focuscontainer-up headroom flex align-items-center flex-grow headerTop"> But needs more work for docked mini-drawer. 1 Link to comment Share on other sites More sharing options...
ryderjj89 27 Posted March 12 Share Posted March 12 On 2/19/2024 at 2:06 PM, Happy2Play said: Won't be where you want it but you can do the same in the index.html to put it in the drawer. Didn't test to much. Code snippet removed previous style. <body class="mainAnimatedPages skinBody"> <div class="backdropContainer"></div> <div class="backgroundContainer"></div> <div class="mainDrawer hide focuscontainer padded-bottom-page" is="emby-scroller" data-miniscrollbar="true" data-horizontal="false" data-focusscroll="true" data-navcommands="card" data-bindheader="false"> <div class="Personal-Links"> <a is="emby-linkbutton" href="placeholder" target="_blank" type="button" class="raised block btnSelectServer"> <span style="display: inline-block;">Find New Media</span> </a> </div> <div class="scrollSlider mainDrawerScrollSlider"></div> </div> <div class="skinHeader focuscontainer-x focuscontainer-up headroom flex align-items-center flex-grow headerTop"> But needs more work for docked mini-drawer. I just added this myself and it works nicely. The only thing I wish is that it would open up in the main frame to the right. I'm not sure if that is possible to do. For now, I have it setup to open up a new tab which is pretty sweet. 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