CarlosLima 148 Posted June 20, 2022 Share Posted June 20, 2022 (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>  <a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0 .7em;">TEXT2</a>  <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>  <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 Edited November 17, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
Solution Happy2Play 8296 Posted June 20, 2022 Solution Share Posted June 20, 2022 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>  <a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT2</a>  <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>  <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> 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 21, 2022 Author Share Posted June 21, 2022 Thank you very, very much. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 3, 2022 Share Posted July 3, 2022 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;} 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 3, 2022 Author Share Posted July 3, 2022 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 More sharing options...
Happy2Play 8296 Posted July 3, 2022 Share Posted July 3, 2022 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; } Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 3, 2022 Author Share Posted July 3, 2022 (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 July 3, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 3, 2022 Share Posted July 3, 2022 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>  <a is="emby-linkbutton" class="button-link" href="LINK#2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0 .7em;">TEXT2</a>  <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>  <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 More sharing options...
Happy2Play 8296 Posted July 3, 2022 Share Posted July 3, 2022 (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 July 3, 2022 by Happy2Play Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 3, 2022 Author Share Posted July 3, 2022 Yes, in 4803 perfect. Now I'm going to apply it at 4750. Thank you very much for that. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 3, 2022 Author Share Posted July 3, 2022 ...and at 4750, with bonus. Thank you very much. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 30, 2022 Author Share Posted October 30, 2022 (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 Edited October 30, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted October 30, 2022 Share Posted October 30, 2022 (edited) @CarlosLima Doesn't look like it. Device emulation in browser But there are several topics on scaling/resolution changes in 4.7.8.0+. Edited October 30, 2022 by Happy2Play Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted October 31, 2022 Share Posted October 31, 2022 (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>  Edited October 31, 2022 by Happy2Play Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 <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>  <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT2</a>  <a is="emby-linkbutton" class="button-link" href="LINK3" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT2</a>  <a is="emby-linkbutton" class="button-link" href="LINK4" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT3</a>  <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT4</a>  <a is="emby-linkbutton" class="button-link" href="LINK6" target="_blank" style="text-decoration: none;color: #D3D3D3;">TEXT5</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> 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 -  ) 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 More sharing options...
Happy2Play 8296 Posted October 31, 2022 Share Posted October 31, 2022 @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;} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 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 More sharing options...
Happy2Play 8296 Posted October 31, 2022 Share Posted October 31, 2022 (edited) @CarlosLima There is something wonky with your code possibly encoding. See all the as these are spaces. So your html may have trailing spaces. Edited November 1, 2022 by Happy2Play removed urls Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 Hmn, another "hidden junk". I will check, thank you very much. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 Hidden garbage. Thank you very much for all your dedication as always. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted November 1, 2022 Share Posted November 1, 2022 Looks like you got the majority, but you still have some outliers. change this "top: 65px !important;" to something like75px. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted November 1, 2022 Share Posted November 1, 2022 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 More sharing options...
CarlosLima 148 Posted November 1, 2022 Author Share Posted November 1, 2022 (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 November 1, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 1, 2022 Author Share Posted November 1, 2022 (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 November 1, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 1, 2022 Author Share Posted November 1, 2022 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now