Alexwerilles 3 Posted May 8 Author Share Posted May 8 I'm making the adjustments you said in the other thread, a moment Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 8 Share Posted May 8 (edited) Just need to us an editor and look at the encoding with ansi option to see the garbage if you are not manually retyping everything. I use notepad ++ for previous example but you are seeing the junk via dev console you it is a matter of removing all the spaces and replacing with tabs. But once you are able to see them it is a easy fix. removed <pre>,margin and trailing em space [margin: 0 .7em;">TEXT1</a> ] Spoiler <div class="tabContent tabContent-positioned flex flex-grow" data-index="0"> <div is="emby-scroller" data-horizontal="false" data-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow" 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> </div> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> Only css I have on this test is for header. /*Move HeaderTop up*/ div.headerMiddle.sectionTabs:not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) { position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); width: 55%; } Edited May 8 by Happy2Play Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 8 Author Share Posted May 8 53 minutes ago, Happy2Play said: Just need to us an editor and look at the encoding with ansi option to see the garbage if you are not manually retyping everything. I use notepad ++ for previous example but you are seeing the junk via dev console you it is a matter of removing all the spaces and replacing with tabs. But once you are able to see them it is a easy fix. removed <pre>,margin and trailing em space [margin: 0 .7em;">TEXT1</a> ] Reveal hidden contents <div class="tabContent tabContent-positioned flex flex-grow" data-index="0"> <div is="emby-scroller" data-horizontal="false" data-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow" 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> </div> <div class="scrollSlider flex-grow padded-top-page"> <div class="sections"></div> <div class="padded-bottom-page"></div> </div> </div> </div> Only css I have on this test is for header. /*Move HeaderTop up*/ div.headerMiddle.sectionTabs:not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) { position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); width: 55%; } That's done. But now, it looks like this: And on mobile, it stays that way: Here's the 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:80px;text-align:center;position:relative;"> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> </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-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-grow" 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> However, if I use the code from this topic instead of the current one, it looks great on mobile, but in the desktop version it is hidden when the left drawer is hidden And so when the drawer is visible Remembering that I used this home.html, but from version 4.8.1 everything changed Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 8 Author Share Posted May 8 9 minutes ago, Alexwerilles said: That's done. But now, it looks like this: And on mobile, it stays that way: Here's the 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:80px;text-align:center;position:relative;"> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> <a is="emby-linkbutton" class="button-link" href="link" target="_blank" style="text-decoration: none;color: #D3D3D3;">text</a> </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-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-grow" 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> However, if I use the code from this topic instead of the current one, it looks great on mobile, but in the desktop version it is hidden when the left drawer is hidden And so when the drawer is visible Remembering that I used this home.html, but from version 4.8.1 everything changed this in Chrome. In Opera and Edge it's "ok" Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 8 Share Posted May 8 7 minutes ago, Alexwerilles said: Remembering that I used this home.html, but from version 4.8.1 everything changed You have to edit the new html with every update as the page code has changed from that post also. So you can not always just overrite/replace the new html, you have to reapply your edits to new html. New page vs old page there are So you have to pay attention to core code changes. But do not see a difference in Edge or Chrome but have no idea where is covering your links. 18 minutes ago, Alexwerilles said: And so when the drawer is visible I can look at this as drawer changes resolution spacing. Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 8 Share Posted May 8 If left at top:120px drawer does not affect links. With only css adjusting header. /*Move HeaderTop up*/ div.headerMiddle.sectionTabs:not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) { position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); width: 55%; } home.html Quote <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-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow" 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> </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-focusscroll="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-grow" 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> Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 9 Author Share Posted May 9 It gets those spaces and broken on mobile. Even deleting the trash. I pulled out all CSS to see if it was any that might be breaking, but to no avail. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 9 Author Share Posted May 9 I think the best way would be for me to put these links in the drawer. I'm going to research about Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 9 Share Posted May 9 (edited) 25 minutes ago, Alexwerilles said: It gets those spaces and broken on mobile. Even deleting the trash. I pulled out all CSS to see if it was any that might be breaking, but to no avail. 23 minutes ago, Alexwerilles said: I think the best way would be for me to put these links in the drawer. I'm going to research about drawer is all js which is beyond me. But I am out of ideas as I can not reported what you are showing in any browser. only issue I can see on mobile is this via the emulator. but removing the css to adjust headermiddle correct this issue. all the other images where screen resizing Edited May 9 by Happy2Play Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 9 Share Posted May 9 I guess you could pm exactly what you are using to see if I see something but I have posted everything I am testing with. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 9 Author Share Posted May 9 Problem solved. I wasn't familiar with Notepad++. I had deleted some junk, but there were still some missing. After a Google search, I figured out how I did it and voila. That's fine in Edge and Opera. I found out that the problem in Chrome (library that covers the links), was due to me hiding the text "My Media" via css, but I don't know why only in Chrome that this was happening. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 9 Author Share Posted May 9 Seems like it doesn't work for me, I don't know why /*Move HeaderTop up*/ div.headerMiddle.sectionTabs:not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) { position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); width: 55%; } home/favorites keeps overlaying the logo Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 9 Share Posted May 9 9 minutes ago, Alexwerilles said: was due to me hiding the text "My Media" via css, but I don't know why only in Chrome that this was happening. Would suggest you need to use "visibility: hidden" vs "display:none" Link to comment Share on other sites More sharing options...
Happy2Play 8356 Posted May 9 Share Posted May 9 (edited) 4 minutes ago, Alexwerilles said: Seems like it doesn't work for me, I don't know why /*Move HeaderTop up*/ div.headerMiddle.sectionTabs:not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) { position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); width: 55%; } home/favorites keeps overlaying the logo Do you have drawer open as this exclude change ie the :not clause. Remove :not(div.skinHeader-withfulldrawer div.headerMiddle.sectionTabs) it you like. Edited May 9 by Happy2Play Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted May 9 Author Share Posted May 9 all settled. Thank you @Happy2Play 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