Adding Custom Tabs to Menu

[Jphannon 1]

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

[Happy2Play 9441]

Not that I know of as the drawer is scripted in the navdrawercontent.js.

[Jphannon 1]

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.

[Happy2Play 9441]

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?

[Jphannon 1]

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, 2024 by Jphannon

[Jphannon 1]

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, 2024 by Jphannon

[Jphannon 1]

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>

 

[Happy2Play 9441]

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.

[ryderjj89 33]

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.