Links in the homescreen

[CarlosLima 102]

 

Hi,

In this homescreen space I had external links, applied in html to the home.html file, but version 4420 transferred the location file and I noticed that it is very different, so it didn't work.

Can you give a hint as to how I can have external links again in this space.

Thank you very much.

[Happy2Play 5776]

Sorry I don't follow, are you updating the home.html in \Emby-Server\system\dashboard-ui\home?

[CarlosLima 102]

Hi,
Thanks, I explained it better.
If you look at the image, the HOME.HTML file is no longer in the folder, it has been moved.

 

 

 

The home.html file is now inside the HOME folder and I think that's what my links are not working for.

<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" data-canrefresh="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs">

    <div class="tabContent pageTabContent padded-bottom-page" id="homeTab" data-index="0">
	
	<br>
	<center><a href="URL" style="text-decoration: none;color: #909092" target="_self"><b>Planos</b></a>  
	<a href="URL" style="text-decoration: none;color: #909092" target="_self"><b>Site</b></a>  
	<a href="URL" style="text-decoration: none;color: #909092" target="_self"><b>Pedidos</b></a>  
	<a href="URL" style="text-decoration: none;color: #909092" target="_self"><b>Suporte</b></a></center>	
		
        <div class="sections"></div>
    </div>
    <div class="tabContent pageTabContent padded-bottom-page" id="favoritesTab" data-index="1">
        <div class="sections"></div>
    </div>
</div>

This is my previous HOME.HTML file and when transferring the links to the new file, it didn't work, so I was afraid of breaking and didn't insist.

Edited April 24, 2020 by CarlosLima

[Floflobel 23]

I'm in the same case, I tried a lot of modifications in the html but I couldn't get them to work.

[Happy2Play 5776]

Should have a solution in a minute, but you have to position them now as they are buried under the header bar.

 

@@CarlosLima

That html does not look correct.  Are you restoring a previous html file versions?  Sorry I see you said you copied your links to new.

Edited April 24, 2020 by Happy2Play

[Happy2Play 5776]

Here is what I have got so far mirroring the dashboard links and adding some styling.
 
home.html  See the "Personal-Links" div.  This will give you something to work with, and modify.

div class="view flex flex-direction-column withTabs">

    <div class="tabContent flex flex-grow" data-index="0" style="overflow: hidden;">

		<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;text-align:center;position:relative;">
			
                <a is="emby-linkbutton" class="button-link" href="https://emby.media" target="_blank" style="margin: 0 .7em;">Emby</a>
                <a is="emby-linkbutton" class="button-link" href="https://emby.media/community" target="_blank" style="margin: 0 .7em;">${LinkCommunity}</a>
                <a is="emby-linkbutton" class="button-link" href="https://github.com/MediaBrowser" target="_blank" style="margin: 0 .7em;">${LinkGithub}</a>
                <a is="emby-linkbutton" class="button-link swaggerLink" target="_blank" href="#" style="margin: 0 .7em;">${LinkApi}</a>
			
        </div>
			
            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>

    </div>
    <div class="tabContent flex flex-grow" data-index="1" style="overflow: hidden;">
		<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="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>
    </div>

</div>

Edited April 24, 2020 by Happy2Play

[CarlosLima 102]

Should have a solution in a minute, but you have to position them now as they are buried under the header bar.

 

@@CarlosLima

That html does not look correct.  Are you restoring a previous html file versions?  Sorry I see you said you copied your links to new.

 

Hi,

 

Thank you for your continued interest in helping.

 

No, I did not overlay the old home.html, but just saved it and displayed it for you to see just how I made my links in the previous version. The home.html file is original intact in the current version, 4420.

[CarlosLima 102]

Thank you very much for your commitment.
I applied some small inclusions and it was perfect, exactly as I wished.
Thank you very much.

[Invader115 10]

Sorry to revive this topic, but I'm an absolute beginner to altering Emby and I'm interested in implementing this exact tweak, as presented by Happy2Play.

 

How... do I do it? I found home.html under "...\AppData\Roaming\Emby-Server\system\dashboard-ui\home" -- it seems to be the same one that was edited here to include the links. I've gone through many iterations of replacing its contents with those provided in this thread, trying to "correct" anything that seemed like a syntax error, and the like. Restarting the Emby server after each tweak, etc.

 

I've not managed to make any changes whatsoever. It feels like the Emby web app totally ignores changes made to that .html -- and I'm aware these changes don't apply to dedicated applications like Emby Theater.

 

 

Maybe this just isn't stuff a total newbie should be trying to do, but I'd love any help making this change click.

[CarlosLima 102]

Hi,
It makes it easier for you to show the image of your file so that the error you are making is identified.

[Invader115 10]

Good point. Here's a screenshot of my home.html file as it is right now. I've made and reverted a lot of changes and right now it's very close to what H2P posted.

 

 

 

[PenkethBoy 2038]

rebooting emby server wont do it - you need to clear the browser cache for the change to be shown

 

and you will have to redo it on every update to the server

[Invader115 10]

rebooting emby server wont do it - you need to clear the browser cache for the change to be shown

 

and you will have to redo it on every update to the server

Thanks, that did it! All's good now.

[Alexwerilles 1]

On 4/24/2020 at 8:31 AM, CarlosLima said:

 

Hi,

 

Thank you for your continued interest in helping.

 

No, I did not overlay the old home.html, but just saved it and displayed it for you to see just how I made my links in the previous version. The home.html file is original intact in the current version, 4420.

Sorry to bother you, but how did you leave the white letters?

[Alexwerilles 1]

On 4/24/2020 at 9:47 AM, CarlosLima said:

Thank you very much for your commitment.
I applied some small inclusions and it was perfect, exactly as I wished.
Thank you very much.

-

[Happy2Play 5776]

1 hour ago, Alexwerilles said:

Sorry to bother you, but how did you leave the white letters?

The method is shown in original code in post 3.  So you would add the style and <b></b> around text title to the code I provided in post 6.

Edited October 6, 2020 by Happy2Play

[Alexwerilles 1]

1 hour ago, Happy2Play said:

The method is shown in original code in post 3.  So you would add the style and <b></b> around text title to the code I provided in post 6.

It worked perfectly. Thank you!!

[Floflobel 23]

Hello,
The links don't seem to work anymore under Google Chrome, under Firefox I have no problem. I don't understand why, I think it's due to an update.
If someone has an idea of how to solve the problem?

[Happy2Play 5776]

8 minutes ago, Floflobel said:

Hello,
The links don't seem to work anymore under Google Chrome, under Firefox I have no problem. I don't understand why, I think it's due to an update.
If someone has an idea of how to solve the problem?

Sorry it appears to be working fine in Chrome 92.0.4515.159 (Official Build) (64-bit).  Have you tried clearing your browser cache?

[CarlosLima 102]

Perfect for me in Chrome or other browsers.

[Floflobel 23]

To be more precise, I can no longer click on the links I created. It's quite strange because I have the same version as you "92.0.4515.159 (Official Build) (64-bit)".

I have done a complete clear of the cache in Firefox and Chrome by deleting the site in my browsing history. I tested in private browsing and I still have this difference between chrome and firefox.

Here is the complete html code I use for version 4.7.0.3:

<div class="view flex flex-direction-column withTabs">

    <div class="tabContent 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;text-align:center;position:relative;">

                <a is="emby-linkbutton" class="button-link" href="https://ombi.XXXXX" target="_blank" style="margin: 0 .7em; color: #a6a6a6;">Texte 1</a>
                <a is="emby-linkbutton" class="button-link" href="https://XXXXX" target="_blank" style="margin: 0 .7em; color: #a6a6a6;">Texte 2</a>

        </div>
            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></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-direction-column flex-grow focuscontainer-down" data-bindheader="true">

            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>
    </div>

</div>

I put you 2 screenshot one under Chrome where we see well that the links are not clickable and where I do not have the html code of these links. And a second one under firefox where everything works fine.

Do you see anything I missed ?

Thank you both for your quick feedback.

 

[Happy2Play 5776]

1 hour ago, Floflobel said:

To be more precise, I can no longer click on the links I created. It's quite strange because I have the same version as you "92.0.4515.159 (Official Build) (64-bit)".

I have done a complete clear of the cache in Firefox and Chrome by deleting the site in my browsing history. I tested in private browsing and I still have this difference between chrome and firefox.

Here is the complete html code I use for version 4.7.0.3:

<div class="view flex flex-direction-column withTabs">

    <div class="tabContent 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;text-align:center;position:relative;">

                <a is="emby-linkbutton" class="button-link" href="https://ombi.XXXXX" target="_blank" style="margin: 0 .7em; color: #a6a6a6;">Texte 1</a>
                <a is="emby-linkbutton" class="button-link" href="https://XXXXX" target="_blank" style="margin: 0 .7em; color: #a6a6a6;">Texte 2</a>

        </div>
            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></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-direction-column flex-grow focuscontainer-down" data-bindheader="true">

            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>
    </div>

</div>

I put you 2 screenshot one under Chrome where we see well that the links are not clickable and where I do not have the html code of these links. And a second one under firefox where everything works fine.

Do you see anything I missed ?

Thank you both for your quick feedback.

 

I copied your code above and did not have any issue with it in Chrome clicking on either link.

Do you see any errors in browser debug console?  Does Chrome have any add-ons/extensions?

This is on a test version 4.7.0.8 but don't think version would have bearing on this as I get the same results in 4.6.4.0.

Also note your second image is not on correct element as Personal-Links is a couple lines up.

Edited August 24 by Happy2Play

[CarlosLima 102]

If you happen to use a CDN like Cloudflare, you need to apply the general purge as well.

[Floflobel 23]

Thank you already for your precious answer.

I haven't had time to look into the problem lately. But I looked a little and indeed I see the div class "Personal-Links" in Chrome. I'll try to look at this side and debug the problem.

I don't see any error in the console, I only see a warning :

Quote

The resource https://domain/web/modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_1.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

 

I don't use any CDN like cloudfare or others, Emby is hosted directly on my domain.

What is strange is that I have the problem on 2 Windows computers, and I have a Linux computer that does not have the problem. It's the same version though.

I put myself in private browsing to do my tests each time.

 

[Floflobel 23]

        <div class="Personal-Links" style="top:120px;text-align:center;position:relative;">

to

        <div class="Personal-Links" style="top:100px;text-align:center;position:relative;">

 

 

I just understood the problem but I don't know why it happens. You need to change the "top" of the "Personal-Links" class from 120px to 100px. This will bring up the links that are hidden by :

<h2 class="sectionTitle sectionTitle-cards padded-left">Mes Médias</h2>

 

Edited August 31 by Floflobel