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


Hi,
I have this HTML code that stopped working in the new stable version. These are the personal links that should have been single-lined below Home and Favorites, but are now in the wrong place.
Thank you in advance for a correction in the link so that it is compatible with the new version of EmbyServer.
Thank you very much

download.png

Edited by CarlosLima
Link to comment
Share on other sites
  • Solution
Happy2Play

Happy2Play   8281

Posted
  • Solution
Posted

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

Spoiler

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

 

  • Thanks 1
Link to comment
Share on other sites
  • 2 weeks later...
Happy2Play

Happy2Play   8281

Posted
Posted

Note if you do not want to add "flex-direction-column" back to html you can use css. 

[data-type="home"] .scrollFrameY {flex-direction: column;}

 

  • Like 1
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

How excellent. I'm using yes in home.html.
In the case is it better to eliminate from there and apply this CSS? If so, I prefer it because it's one less thing to customize in ES updates. Thanks

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted
Just now, CarlosLima said:

How excellent. I'm using yes in home.html.
In the case is it better to eliminate from there and apply this CSS? If so, I prefer it because it's one less thing to customize in ES updates. Thanks

It is really a personal choice as you are already editing the html.  But yes it does make it easier only worrying about inputting the personal links section.

Are you using the <pre> section for Announcements/Bulletins?

Changed html from 

			<pre>
			
			</pre>

to  

			<pre></pre>

  

div.Personal-Links  pre:before {content: "Alert: Server downtime at 8pm.";
    background: red;
    font-size: x-large;
    color: yellow;
}

image.thumb.png.a2bbde83127df8444f80884ea62a49ad.png

 

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)

Hi, great of you to quote this code. I wasn't using it but it would be the next code I thought of asking for your help. I tried now but I couldn't understand about <pre></pre> in html ?
I also used this code in ES beta testing and it didn't display the alert.

Edited by CarlosLima
Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted
12 minutes ago, CarlosLima said:

Hi, great of you to quote this code. I wasn't using it but it would be the next code I thought of asking for your help. I tried now but I couldn't understand about <pre></pre> in html ?
I also used this code in ES beta testing and it didn't display the alert.

This 

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

Have only tested in 4750 but wouldn't think there would be difference in 4803.

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted (edited)

Had no issue adding personal links and this code in 4.8 

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 55%;
	}
	.Personal-Links {
	top: 65px !important;
	}
}

[data-type="home"] .scrollFrameY {flex-direction: column;}

div.Personal-Links  pre:before {content: "Alert: Server downtime at 8pm.";
    background: red;
    font-size: x-large;
    color: yellow;
}

 

Edited by Happy2Play
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Yes, in 4803 perfect. Now I'm going to apply it at 4750. Thank you very much for that.

Screenshot.png

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

...and at 4750, with bonus. Thank you very much.

Screenshot.png

Link to comment
Share on other sites
  • 3 months later...
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)

Today I updated to version 4780 and my personal links, both seen on the PC browser and on the cell phone (attached photo) are very spaced between them and I didn't change the code, it still has a margin of 0.7 in all of them.  Did the code break in this new version? Thanks

Screenshot_20221030-153923-643.png

Edited by CarlosLima
Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted (edited)

@CarlosLima Doesn't look like it.

image.thumb.png.4cbfd733d4780040cc5ff57b36b5a637.png

Device emulation in browser

image.png.5d488d78a3c2e0c0fa13a340da24a44d.png

But there are several topics on scaling/resolution changes in 4.7.8.0+.

Edited by Happy2Play
Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted (edited)

@CarlosLima Might want to choose one or the other as they are both adding space, margin left/right and 4 spaces.

Quote

margin: 0 .7em;">TEXT1</a>&emsp;

 

Edited by Happy2Play
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted 
<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="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;
                <a is="emby-linkbutton" class="button-link" href="LINK6" target="_blank" style="text-decoration: none;color: #D3D3D3;">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 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>

Hi, you are always helpful and interested in helping. Thank you very much.
Didn't work for me testing with both options (margin: 0.7em; - OR - &emsp;)
So I leave my code/file home.html complete, because you have more keen eyes. I thank you in advance for this contribution.

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted

@CarlosLimaNot sure unless you have other custom css interfering.  If you remove custom css do you get the same results? 

What browser?  What resolution?

Tested in FF/Edge/Chrome This is with no css except required  [data-type="home"] .scrollFrameY {flex-direction: column;}

image.png.c3a38461ccefef1bd8dfd0cdbfdc32cd.png

image.thumb.png.d7b6776944148fa51e6a159824974435.png

 

 

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi,
I hadn't tested it without CSS but now I have, removed all my custom CSS and left only the line of code you indicated as mandatory. Same result.
I tested it in Chrome and Edge.
I use a 4k tv as my pc monitor.

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted (edited)

@CarlosLima There is something wonky with your code possibly encoding.  See all the &nbsp; as these are spaces.  So your html may have trailing spaces.

image.png.2ba2fd91227d212d23547d4ae95e799e.png

 

Edited by Happy2Play
removed urls
Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted

Looks like you got the majority, but you still have some outliers.

change this "top: 65px !important;" to something like75px.

image.png.48133815fed534c458ec2e78e1413dac.png

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted

You can delete <pre></pre> also if you are not going to use it for Banner as shown above as you are placing it in "div.homeSectionsContainer:before" instead of "div.Personal-Links pre:before"

You can even do "div.Personal-Links:after" for the banner depending on what spacing you really want.

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)
1 hour ago, Happy2Play said:

Looks like you got the majority, but you still have some outliers.

change this "top: 65px !important;" to something like75px.

Done, thank you.

Edited by CarlosLima
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)
1 hour ago, Happy2Play said:

You can delete <pre></pre> also if you are not going to use it for Banner as shown above as you are placing it in "div.homeSectionsContainer:before" instead of "div.Personal-Links pre:before"

You can even do "div.Personal-Links:after" for the banner depending on what spacing you really want.

Done, thank you.

Edited by CarlosLima
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi,
Thanks again for all your dedication.
I believe it is the fault of the hidden garbage (those spaces created in a hidden way) and I chose to remove all the personal links from the code.
But of course, I would like to have it back and for that I intend to redo it from the beginning.
After removing all hidden junk, the spacing was fixed but all the links stopped working.
So if it's possible I would like to have the code redone and so I believe that everything will work fine again.
I've tried now to rewrite the code (not copy/paste) but I couldn't get the links to work.
Thanks

Screenshot.png

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