Jump to content

create a custom button


z3ndra

Recommended Posts

z3ndra

I would like to add a personal button on the login page and also in the user settings menu where it is noted (display, home page etc ...)

I saw that we must already add the code </button> <a is = "emby-button" class = "raised block emby-button" href = "https://emby.media/community" target = " _blank "> Forum </a> in manuallogin.html

but it does not work.
maybe I put it wrong or in the wrong place.

and how could I add that also in the menu setting?

thank you in advance

 

 

 

Link to comment
Share on other sites

Happy2Play

@z3ndra I don't follow as all you do is edit the html files.  And possibly have to clear browser cache.

code listed above with css to change the color.

image.png.159061b5c67ef055e11fe1701e5238f8.png

 

Spoiler

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">
    <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="text-align: left;margin-top:0;">${HeaderPleaseSignIn}</h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" id="txtUserName" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" id="txtPassword" autocomplete="off" label="${LabelPassword}" />
            </div>
            <label class="checkboxContainer">
                <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                <span>${RememberMe}</span>
            </label>
            <button is="emby-button" type="submit" class="raised block paperSubmit">
                <span>${HeaderSignIn}</span>
            </button>
            <button is="emby-button" type="button" class="raised block buttonCancel">
                <span>${Cancel}</span>
            </button>


            <div style="margin-top:2em;">
                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                    <span>${HeaderForgotPassword}</span>
                </button>

                <button is="emby-button" type="button" class="raised hide block btnSelectServer">
                    <span>${HeaderChangeServer}</span>
                </button>
                <a is="emby-button" class="raised block emby-button" href="https://emby.media/community" target="_blank">Forum</a>
                <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
            </div>

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

Remember login and manuallogin are two different html pages.

 

Don't really know html so some copy and paste with minor tweaks.  As the sections are created from a script.

image.thumb.png.753eb72cdec34a0f4d897a0c3a922a74.png

Spoiler

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page settingsContainer">
        <div class="readOnlyContent" style="margin: 0 auto;">
        
            <a is="emby-button" class="listItem itemAction listItem-button listItemCursor listItem-hoverable listItem-withContentWrapper navMenuOption navDrawerListItem navMenuOption-settings" href="https://emby.media/community" target="_blank"><div class="listItem-content listItemContent-touchzoom"><div data-action="custom" class="listItemImageContainer listItemImageContainer-square defaultCardBackground defaultCardBackground0" style="aspect-ratio:1"><i class="navDrawerListItemIcon listItemIcon md-icon">folder</i></div><div class="listItemBody"><div class="listItemBodyText listItemBodyText-nowrap">Forum</div></div></div></a>

            <div class="dynamicRoutes focuscontainer-x">

            </div>
                        
            <p class="appInfo secondaryText" style="text-align:center;"></p>
        </div>
    </div>
</div>

 

Link to comment
Share on other sites

Happy2Play
1 hour ago, z3ndra said:

but for the second section, i have to modify which file ?

The settings.html.

1 hour ago, z3ndra said:

i dont't know if it is also possible to add a link on the logo at the top left on the homepage ?

Pretty sure the appheader.js would have to be modified.

Link to comment
Share on other sites

z3ndra

oh yes indeed, in appheadertemplate.html

on the other hand I admit that I do not really master html for the moment, I have trouble with the syntax used

 

thank in advance

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