Jump to content

Adding Custom buttons to Login Page

Jphannon

By Jphannon
in Web App CSS

 Share
Go to solution Solved by Happy2Play,

Recommended Posts

Jphannon

Jphannon 1

Posted
Posted

I am trying to add custom buttons to the login page using the manuallogin.html file, so far i have added:  

<a is="emby-linkbutton" href="https://google.com" target="_blank" type="button" class="raised block btnSelectServer">
                    <span>Whatever Button</span>
                </a>

but when I save the changes and restart the docker container, there is no changes to the Login screen, Is this still the way to add custom buttons? As most of the previous posts detailing how to do so are from 2+ years ago.

I have cleared my cache and made sure the changes have propagated, could someone please point me in the right direction.

Thanks

Happy2Play

Happy2Play 9444

Posted
Posted
9 minutes ago, Jphannon said:

I am trying to add custom buttons to the login page using the manuallogin.html file, so far i have added:  

<a is="emby-linkbutton" href="https://google.com" target="_blank" type="button" class="raised block btnSelectServer">
                    <span>Whatever Button</span>
                </a>

but when I save the changes and restart the docker container, there is no changes to the Login screen, Is this still the way to add custom buttons? As most of the previous posts detailing how to do so are from 2+ years ago.

I have cleared my cache and made sure the changes have propagated, could someone please point me in the right direction.

Thanks

All should still work but will guess positioning.

copied personal links from here

And pasted into manuallogin.html

Spoiler

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true" data-bindheader="true">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">
        <form style="margin:0 auto;">

            <h1 style="margin-top:0;" class="viewTitle"></h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" autocomplete="off" label="${LabelPassword}" />
            </div>
            <div class="checkboxList">
                <label class="checkboxContainer">
                    <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                    <span>${RememberMe}</span>
                </label>
            </div>
            <button is="emby-button" type="submit" class="raised block paperSubmit" style="margin-top:2em;">
                <span>${HeaderSignIn}</span>
            </button>
            <button is="emby-button" type="button" class="raised block buttonCancel">
                <span>${Cancel}</span>
            </button>
            <p class="buttonItems justify-content-center">

                <button is="emby-button" type="button" class="button-link cancel btnForgotPassword secondaryText buttonItems-item">
                    <span>${HeaderForgotPassword}</span>
                </button>

                <button is="emby-button" type="button" class="button-link hide btnSelectServer secondaryText buttonItems-item">
                    <span>${HeaderChangeServer}</span>
                </button>
            </p>

            <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
            
                <div class="Personal-Links" style="top:110px;text-align:center;position:relative;">
            
                <a is="emby-linkbutton" class="button-link" href="LINK1" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT1</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT2</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK3" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT2</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK4" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT3</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT4</a>&emsp;
                </div>

        </form>
    </div>
</div>

image.png.6b1c14984d39670530d33b49e20d62c7.png

 

And adding your button

Spoiler

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true" data-bindheader="true">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">
        <form style="margin:0 auto;">

            <h1 style="margin-top:0;" class="viewTitle"></h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" autocomplete="off" label="${LabelPassword}" />
            </div>
            <div class="checkboxList">
                <label class="checkboxContainer">
                    <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                    <span>${RememberMe}</span>
                </label>
            </div>
            <button is="emby-button" type="submit" class="raised block paperSubmit" style="margin-top:2em;">
                <span>${HeaderSignIn}</span>
            </button>
            <button is="emby-button" type="button" class="raised block buttonCancel">
                <span>${Cancel}</span>
            </button>
            <p class="buttonItems justify-content-center">

                <button is="emby-button" type="button" class="button-link cancel btnForgotPassword secondaryText buttonItems-item">
                    <span>${HeaderForgotPassword}</span>
                </button>

                <button is="emby-button" type="button" class="button-link hide btnSelectServer secondaryText buttonItems-item">
                    <span>${HeaderChangeServer}</span>
                </button>
            </p>

            <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
            
                <a is="emby-linkbutton" href="https://google.com" target="_blank" type="button" class="raised block btnSelectServer">
                    <span>Whatever Button</span>
                </a>

        </form>
    </div>
</div>

image.png.6022545620c95cc8d569ebda17428f03.png

  • Like 1
Jphannon

Jphannon 1

Posted
  • Author
Posted

Unfortunately, that hasnt seemed to have worked, currently my manuallogin.html file is  

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true" data-bindheader="true">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">
        <form style="margin:0 auto;">

            <h1 style="margin-top:0;" class="viewTitle"></h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" autocomplete="off" label="${LabelPassword}" />
            </div>
            <div class="checkboxList">
                <label class="checkboxContainer">
                    <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                    <span>${RememberMe}</span>
                </label>
            </div>
            <button is="emby-button" type="submit" class="raised block paperSubmit" style="margin-top:2em;">
                <span>${HeaderSignIn}</span>
            </button>
            <button is="emby-button" type="button" class="raised block buttonCancel">
                <span>${Cancel}</span>
            </button>
            <p class="buttonItems justify-content-center">

                <button is="emby-button" type="button" class="button-link cancel btnForgotPassword secondaryText buttonItems-item">
                    <span>${HeaderForgotPassword}</span>
                </button>

                <button is="emby-button" type="button" class="button-link hide btnSelectServer secondaryText buttonItems-item">
                    <span>${HeaderChangeServer}</span>
                </button>
            </p>

            <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
            
                <a is="emby-linkbutton" href="https://google.com" target="_blank" type="button" class="raised block btnSelectServer">
                    <span>Whatever Button</span>
                </a>

        </form>
    </div>
</div>

and my Login screen looks like so:

image.png.a1eafde64c3e189695c876461b3ecab0.png

Is there anything else i need to change to make this work apart from manuallogin.html as that is the only thing I have changed

 

Thanks

Jphannon

Jphannon 1

Posted
  • Author
Posted

Actually, nevermind, it did work but for some reason clearing the cache didnt work, i had to open it in incognito mode.

Also what CSS do i use to hide the forgot password button, or can i change to where that links?

Thanks

Jphannon

Jphannon 1

Posted
  • Author
Posted
3 hours ago, Jphannon said:

Actually, nevermind, it did work but for some reason clearing the cache didnt work, i had to open it in incognito mode.

Also what CSS do i use to hide the forgot password button, or can i change to where that links?

Thanks

With regards to the CSS for hiding the forgot password text, I believe it is  

button.raised.cancel.block.btnForgotPassword.emby-button {display: none; }

But im not sure where i put this, I have tried to put this into the custom css box within the emby dashboard (Pictured below) but this doesn't do anything, where do i put this css to stop the forgot password from being displayed
 

image.png.d76995386e2647cf351ef1080c7e64a3.png

  • Solution
Happy2Play

Happy2Play 9444

Posted
  • Solution
Posted
5 hours ago, Jphannon said:

Also what CSS do i use to hide the forgot password button, or can i change to where that links?

You can add hide in the html

                <button is="emby-button" type="button" class="button-link cancel btnForgotPassword hide secondaryText buttonItems-item">                     <span>${HeaderForgotPassword}</span>                 </button>

 

or uses css

button.btnForgotPassword {display: none}

For css you need to go to Setting custom css box

image.png.4e77471562e12c3e10bb5eebd817dec4.png

 

Jphannon

Jphannon 1

Posted
  • Author
Posted

Thank you for getting back, The HTML worked for me

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
 Share
Go to topic listing
×
×
  • Create New...