Jump to content

Move Section0 and Section1 up... again:)


Go to solution Solved by Happy2Play,

Recommended Posts

cochize1

So, basically I am happy with how this code works but I wanted to ask if there is a code that looks more neat. 

I am aming for shifting things up:

1. Start Bar in line with logo and search/settings buttons (but without overlapping them)

2. Section0 moved closer to the MainHeader (but not overlapping)

3. Section1 moved closer to Section0 and also all sub-categories of Recently Added closer together

4. The same with Continue Watching and Next Up secion

So far I have this piece of code, mostly thanks to Happy2Play of course:

div.withTabs.page {margin-top: -30px;}

.is-active{
	position: relative!important;
	top: -22px;
}

div.headerTop-withSectionTabs {padding: .8em 0 0; }
div.headerMiddle.sectionTabs {margin: 0 20em; }

looking like the picture below, but I would really like to go for something that will bring all the secions closer but without overlap

image.thumb.png.2d693e44b39a7f0971647a84d6442fe6.png

Link to post
Share on other sites
Happy2Play

You can do something like this but you will see differences as Mixed content type and landscape rows will have blank cardtext-secondary sections. But you already see the bigger gaps without this.

div.homeSectionsContainer .verticalSection {margin-top: -1.5em;}

 

Edited by Happy2Play
Link to post
Share on other sites
cochize1

Thank you as always Happy. For anyone interested the whole "move around" piece of code that in my opinion make it all look more compact is as follows:

div.withTabs.page {margin-top: -30px;}
div.headerTop-withSectionTabs {padding: .8em 0 0; }
div.headerMiddle.sectionTabs {margin: 0 20em; }
.section1 {	position: relative!important; top: -30px; }
div.homeSectionsContainer .verticalSection {margin-top: -1.5em;}

 

Link to post
Share on other sites
cochize1

One more thing, that bit:

.section1 {	position: relative!important; top: -30px; }

moves the Secion1 up, but then Section0 overlaps the link to recently added shows from the 1st category.

Is there a way to 'narrow' Section0 so you can still move Section1 up and these two don't overlap?

Link to post
Share on other sites
Happy2Play

Why do you need this?  

.section1 {	position: relative!important; top: -30px; }

testing.thumb.jpg.de23547023f78356b03cf30b10e9015d.jpg

Link to post
Share on other sites
cochize1

To move Section1 up, closer to the Section0 (but with this code link  to recently added Tv Shows pointed by the red arrow gets overlaped by Secion0 and you cannot click on it). Is there a way to have the same outcome of closer sections but with a clickable link?

With that code:

image.thumb.png.0fc42339e5f91d6e517b1ca0b0fbd5c6.png

Without that code:

image.thumb.png.349282390f152030ba1f48fd86ddf7b9.png

Link to post
Share on other sites
Happy2Play

Since you are hiding card text on My Media you are overlapping 0 and 1.

Link to post
Share on other sites
cochize1

Hence my question, is there a way to narrow Section 0 with hidden card texts so they don't overlap and get this link clickable?

Link to post
Share on other sites
  • Solution
Happy2Play
Posted (edited)

I am not see any issue thought with only my code.

test.thumb.jpg.a2b71847508134c6cc5d555105ca52e8.jpg

div.withTabs.page {margin-top: -30px;}

div.headerTop-withSectionTabs {padding: .8em 0 0; }
div.headerMiddle.sectionTabs {margin: 0 20em; }

div.homeSectionsContainer .verticalSection {margin-top: -2em;}
div.section0 .cardText {display: none;}

 

Specifically for Home Screen verticalSection only.

Edited by Happy2Play
  • Like 1
Link to post
Share on other sites
cochize1

And there it is, for

div.section0 .cardText {display: none;}

I had

{visibility: hidden;}

so that, caused the problem with overlaping, now it works fine, thank you again

PS. I might have some more questions today but I will start other topics for that:)

Link to post
Share on other sites
cochize1

Just a quick follow up question as my trials and errors don't work, how do move up this whole section in TV Series, Movies and Mixed Content:

image.thumb.png.867701b2263ba502c72e2a139cc56035.png

Link to post
Share on other sites
Happy2Play

Minor changes but this should cover it.

div.page {margin-top: -30px;}

div.headerTop-withSectionTabs {padding: .8em 0 0; }
div.headerMiddle.sectionTabs {margin: 0 20em; }

div.homeSectionsContainer .verticalSection,div.nextUpSection.verticalSection, div.recentlyPlayedSection.verticalSection, div.frequentlyPlayedSection.verticalSection, div.suggestions, div.suggestions .verticalSection {margin-top: -2em;}

div.withTabs .padded-top-page:not(.homeSectionsContainer) {padding-top: 6em!important;}

 

  • Like 1
Link to post
Share on other sites
cochize1

It did cover it, thanks. I will have some more questions about shiting things around tomorrow but will start different topics for them for people to relate, hope you can help.

Link to post
Share on other sites
Happy2Play

Only area I can't really cover would be TV-Suggestions and Movies-Suggestions when Continue Watching item is visible you will have space between Continue and Latest.  If you move Latest up, when Continue Watching is empty Latest is slightly under the header.

Link to post
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
×
×
  • Create New...