Jump to content

About HTML/CSS code "Personal-Links" - EmbyServer 4790 (Update)

CarlosLima

By CarlosLima
in Web App CSS

 Share
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)

Oops, I ran a new clean in the browser and in cloudflare and now the links are visible. I think it was late to update this time. I'm sorry.

And now it is also possible to click on the links.
I believe everything is perfect now.
No words to thank you for your patience and commitment. Thank you very much.

Edited by CarlosLima
Link to comment
Share on other sites
Happy2Play

Happy2Play   8296

Posted
Posted (edited)
5 minutes ago, CarlosLima said:

Oops, I ran a new clean in the browser and in cloudflare and now the links are visible. I think it was late to update this time. I'm sorry.

If you are talking about header being larger while scrolling you have to change this 

@media (min-width: 100em) {
div.headerTop-withSectionTabs:not(.skinHeader-tv) {
    height: calc(3.71em + max(1.2em,env(safe-area-inset-top,0)));
}}

To the edit code as mentioned, added scrolling and adjusted min-width slightly 

@media (min-width: 80em) {
    div.headerTop-withSectionTabs:not(.skinHeader-tv), div.headerTop-withSectionTabs.headroom-scrolling:not(.skinHeader-tv) {
        height: calc(3.71em + max(1.2em,env(safe-area-inset-top,0)));
}}

 

Edited by Happy2Play
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

I changed your last statement.
Now everything perfect.
Thank you so much again. You are the best.

topbar1.png

topbar2.png

  • Thanks 1
Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
On 6/20/2022 at 7:51 PM, Happy2Play said:

Easiest would be adding "flex-direction-column" back to "emby-scroller"also fixed the margin as that was broken/unused the previous way written.

  Reveal hidden contents

<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="LINK#1" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT1</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT2</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK#3" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT3</a>&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK#4" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT4</a>&emsp;    
                <a is="emby-linkbutton" class="button-link" href="LINK#5" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT5</a>&emsp;
            <pre>
            
            </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>

 

When I use this code, custom links are fixed. However, the side scroll bar disappears and it is not possible to scroll up or down. This only happens with the home page

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi,
I don't believe it's exactly this code that blocks the scroll on the screen, because I use it and I don't have this problem.
I believe that it is some conflict between codes that causes this event, as I have now noticed that only on mobile some screens are frozen for scrolling (on PC this problem does not exist) so we need to investigate to find out the reason for this, as it only happens on some screens , with the scrolling of the tv screen, only on the pc, in my case.

  • Agree 1
Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
On 11/10/2022 at 1:35 PM, Happy2Play said:

@Alexwerilles Can you elaborate as I have not seen this issue in testing.

using the code that you informed, ends up running out of scrollbar. With the original code, the slash appears normally

 

no scroll.jpg

barra.jpg

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi, would it be possible to find a way to fix this personal links mess?  

On the PC it's perfect but on the cell phone everything is misaligned in any browser as shown in the image.

Thanks

Screenshot_20221117-154834-216.png

Link to comment
Share on other sites
Luke Emby Team

Luke   37115

Posted
Posted
35 minutes ago, Alexwerilles said:

Why does this happen to me? Is the best option for me to use css?

If you remove the custom css, do you get your scrollbar back?

Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
5 hours ago, Luke said:

If you remove the custom css, do you get your scrollbar back?

I already did this test. Still no scrollbar when removing css

Link to comment
Share on other sites
Happy2Play

Happy2Play   8296

Posted
Posted
7 hours ago, Alexwerilles said:
13 hours ago, Luke said:

If you remove the custom css, do you get your scrollbar back?

I already did this test. Still no scrollbar when removing css

I am confused then as that means it has nothing to do with mentioned code/css.

Or are you saying modifying the home.html is causing this issue?  If so can you post or pm it.

What browser and version number?

Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
2 hours ago, Happy2Play said:

I am confused then as that means it has nothing to do with mentioned code/css.

Or are you saying modifying the home.html is causing this issue?  If so can you post or pm it.

What browser and version number?

modifying the home.html

I did the test on Chrome version 107.0.5304.107 and Edge, both have this problem

  

<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="LINK#1" target="_blank" style="text-decoration: none;color: #D3D3D3 ;margin: 0 .7em; ">TEXT1</a> 
                <a is="emby-linkbutton" class="button-link" href="LINK#2"
                <a is="emby-linkbutton" class="button-link" href="LINK#3" target="_blank" style="text-decoration: none;color: #D3D3D3 ;margin: 0 .7em ;"> TEXT3</a> 
                <a is="emby-linkbutton" class="button-link" href="LINK#4" target="_blank" style="text-decoration: none;color: #D3D3D3 ;margin: 0 .7em; "> TEXT4</a>    
                <a is="emby-linkbutton" class="button-link" href="LINK#5" target="_blank" style="text-decoration: none;color: #D3D3D3 ;margin: 0 .7em; "> TEXT5</a> 
            <pré>
            

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

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8296

Posted
Posted (edited)

@Alexwerilles Had to compare Old HTML to New Html as old code does not have "tabContent-positioned"

So it needs added to each or readd Personal-Links to a new 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:110px;text-align:center;position:relative;">

				<a is="emby-linkbutton" class="button-link" href="LINK#1" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">LINK#1</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">LINK#2</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#3" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">LINK#3</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#4" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">LINK#4</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#5" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">LINK#5</a>
				<pre></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 tabContent-positioned 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>

 

Edited by Happy2Play
Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
1 hour ago, Happy2Play said:

@Alexwerilles Had to compare Old HTML to New Html as old code does not have "tabContent-positioned"

So it needs added to each or readd Personal-Links to a new 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:110px;text-align:center;position:relative;">

				<a is="emby-linkbutton" class="button-link" href="LINK#1" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">HomeTv</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">Apps</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#3" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">Assinantes</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#4" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">Blog</a>
				<a is="emby-linkbutton" class="button-link" href="LINK#5" target="_blank" style="text-decoration: none;color: #D3D3D3;margin:0 0.7em;">Grupo</a>
				<pre></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 tabContent-positioned 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>

 

it works, thanks

How can I separate the personal link a little from "sections/my media"

 

 

 

 

ss.jpg

Link to comment
Share on other sites
Happy2Play

Happy2Play   8296

Posted
Posted
26 minutes ago, Alexwerilles said:

it works, thanks

How can I separate the personal link a little from "sections/my media"

ss.jpg

Not sure I follow but might be any additional css you have.

This is only editing home.html and headermiddle.

image.thumb.png.6220eb64ac05450d682345eb6b32ac93.png

Link to comment
Share on other sites
Alexwerilles

Alexwerilles   3

Posted
Posted
2 hours ago, Happy2Play said:

Not sure I follow but might be any additional css you have.

This is only editing home.html and headermiddle.

image.thumb.png.6220eb64ac05450d682345eb6b32ac93.png

that's right. What was causing this was this code to hide "My Media"

div.section0 div.sectionTitleContainer {display: none;}

 

thanks

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8296

Posted
Posted
7 hours ago, Alexwerilles said:

that's right. What was causing this was this code to hide "My Media"

div.section0 div.sectionTitleContainer {display: none;}

 

thanks

 

 Easiest route would be change to visibility: hidden; but can look at --extra-padding-top or --header-height if needed.

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)

"So it needs added to each or readd Personal-Links to a new home.html."

Hi, 
I have a few screens only on mobile that are missing the scroll bar.
What would the CSS completion look like to use this option in red? 👆
Thanks

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