Jump to content

Links in the homescreen


Go to solution Solved by Happy2Play,

Recommended Posts

Posted

5ea22c1766095_Screenshot.png

 

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
Posted

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

Posted (edited)

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.

 

 

5ea2398c7fc54_Anotao20200423215512.png

 

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 by CarlosLima
Posted

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

Happy2Play
Posted (edited)

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 by Happy2Play
  • Solution
Happy2Play
Posted (edited)

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>

5ea28954cebd7_links.jpg

Edited by Happy2Play
  • Like 3
Posted

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.

Posted

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

5ea2dfd32dcf7_Screenshot.png

  • 3 weeks later...
Invader115
Posted

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.

Posted

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

Invader115
Posted

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.

 

 

5eb9c40f2902e_20200511.png

 

PenkethBoy
Posted

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

  • Like 2
Invader115
Posted

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.

  • 4 months later...
Alexwerilles
Posted
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
Posted
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.

5ea2dfd32dcf7_Screenshot.png

-

Happy2Play
Posted (edited)
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 by Happy2Play
Alexwerilles
Posted
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!!

  • 10 months later...
Posted

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
Posted
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?

image.thumb.png.a0eb59ade6c97142344c341fcdc33cba.png

Posted

Perfect for me in Chrome or other browsers.

Posted

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.

 

Firefox.png

Chrome.png

Happy2Play
Posted (edited)
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.

 

Firefox.png

Chrome.png

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

image.png.03c9fb10186a3b9dde1c71c4332c8632.png

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 by Happy2Play
Posted

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

Posted

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.

 

Posted (edited)
        <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 by Floflobel
  • Like 1

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