Jump to content

How to hide specific navigation bar buttons?


AnSniper

Recommended Posts

AnSniper

How to hide specific navigation bar buttons in the movie/TV media library?

 

I am currently using the following CSS to hide some buttons, but there will be an issue.

The serial number "data=" in the movie media library is inconsistent with the serial number content in the program media library.

Quote

 

.tabs-viewmenubar-slider.emby-tabs-slider.scrollSliderX .emby-tab-button[data-index="2"] {
  display: none
}

.tabs-viewmenubar-slider.emby-tabs-slider.scrollSliderX .emby-tab-button[data-index="3"] {
  display: none
}

.tabs-viewmenubar-slider.emby-tabs-slider.scrollSliderX .emby-tab-button[data-index="7"] {
  display: none
}

 

 

Is there any way to specify the blocking of specific buttons in movies and TV?

 

 

For example, I want to hide in movies:

Suggestions, Trailers

And in TV:

Suggestions, Upcoming, Networks, Episodes

Can it be achieved through CSS?

Edited by AnSniper
Link to comment
Share on other sites

  • 2 weeks later...
visproduction

Since many buttons pull the same CSS style for all pages, then any selected removal of a class name or nth-child(#) will remove the 3rd or 4th button everywhere on the site. So, that is not a good solution.

You can't dynamically update style names inside a page without adding new .js code and that is normally locked out.

CSS does allow an update, based on the pages parent ID value, so you could do selective hiding of any class or ID name on one page at a time.
Notice the [data-parentid='58948'] 

body > div.skinHeader.focuscontainer-x.focuscontainer-up.headroom.flex.align-items-center.flex-grow.headerTop.skinHeader-withBackground.adjustHeaderForEmbeddedScroll.headerTop-withSectionTabs > div.headerMiddle.headerSection.sectionTabs.headerMiddle-withSectionTabs > div > div > button:nth-child(4)[data-parentid='58948'] {
	display:none !important;
}

It's tricky to use.  I know it works for the parent ID for the collections or playist pages to reveal the background image by sliding down the movie posters.  If you find the parent ID of your collections and insert this code with that number for data-parentid=' ', then this does work in your css custom file.  Notice that there is a mouse hover involved, so it only really works on a notebook or workstation.

/* Custom media card slideaways */
/* ============================ */
/* Collections scroller animate down only using id 57567 */
.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:hover ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='57567'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateY(98vh);
		transition: 02.0s;
	}

.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:not(hover) ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='57567'] {
			transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
			transform: translateY(0vh);
			transition: 02.0s;		
			transition-delay: 3s;
	}
/* Playlist animation slide to the right id 72550*/

.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:hover ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page[data-parentid='72550'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateX(106%);
		transition: 02.0s;
	}

.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:not(hover) ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page[data-parentid='72550'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateX(0%);
		transition: 02.0s;
		transition-delay: 3s;
	}

 

Edited by visproduction
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
×
×
  • Create New...