Jump to content

CSS changes after 4.8.1

Alexwerilles

By Alexwerilles
in Web App CSS

 Share
Go to solution Solved by Happy2Play,

Recommended Posts

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted

I'm making the adjustments you said in the other thread, a moment

Happy2Play

Happy2Play 9780

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

image.png.5ef66f347c5f5c0b63aae28a5fd179a0.png

removed <pre>,margin and trailing em space [margin: 0 .7em;">TEXT1</a>&emsp;]

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

Alexwerilles 3

Posted
  • Author
Posted
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.

image.png.5ef66f347c5f5c0b63aae28a5fd179a0.png

removed <pre>,margin and trailing em space [margin: 0 .7em;">TEXT1</a>&emsp;]

  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:

image.png.d5d3a3c64b94a6c012af8a075cd4ec82.png

And on mobile, it stays that way:

image.png.e4f8d81122af612f85a1b95b1cfb112f.png

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

image.png.c61c705bc8b1962ca91fb81a552bc80b.png

 

And so when the drawer is visible

image.png.b0a551914fe5debcd22b5bb2e339a3f2.png

 

 

Remembering that I used this home.html, but from version 4.8.1 everything changed

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted
9 minutes ago, Alexwerilles said:

That's done. But now, it looks like this:

image.png.d5d3a3c64b94a6c012af8a075cd4ec82.png

And on mobile, it stays that way:

image.png.e4f8d81122af612f85a1b95b1cfb112f.png

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

image.png.c61c705bc8b1962ca91fb81a552bc80b.png

 

And so when the drawer is visible

image.png.b0a551914fe5debcd22b5bb2e339a3f2.png

 

 

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"

image.png

Happy2Play

Happy2Play 9780

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

image.thumb.png.a6f3832f812f56bb4c053cf6f50aaac6.png

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.

Happy2Play

Happy2Play 9780

Posted
Posted

If left at top:120px drawer does not affect links.

image.thumb.png.171a7da10c9a8acaba2215ea219cdca6.png

image.thumb.png.5008b25dd44c32905ad1464ddeffccc3.png

image.png

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>

 

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted

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.

 

 

 

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted

I think the best way would be for me to put these links in the drawer. I'm going to research about

Happy2Play

Happy2Play 9780

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

image.png.fb96836cb73fa1020f25b1e001288404.png

but removing the css to adjust headermiddle correct this issue.

image.png.23d1cf08d20fbaae8e7f35c47669f17b.png

all the other images where screen resizing

Edited by Happy2Play
Happy2Play

Happy2Play 9780

Posted
Posted

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.

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted

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.

Alexwerilles

Alexwerilles 3

Posted
  • Author
Posted

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

Happy2Play

Happy2Play 9780

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

Happy2Play

Happy2Play 9780

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

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