MediaEmby1968 47 Posted November 15, 2025 Posted November 15, 2025 So, could you help me change these images using CSS? I'm using the Apple TV CSS theme in my custom CSS and I want to do this: 1. Make this background that appears at the top of the screen when you scroll down from the home screen slightly transparent. 2. Remove this text (I've read here that it can't be done with CSS, that you have to edit a file; does anyone know which file and what to edit in it?) 3. Remove this text or image
Solution Happy2Play 9780 Posted November 15, 2025 Solution Posted November 15, 2025 (edited) 8 hours ago, MediaEmby1968 said: 1. Make this background that appears at the top of the screen when you scroll down from the home screen slightly transparent. something like this div.skinHeader-withBackground.headroom-scrolling {background: hsla(150, 2.44%, 83.92%, 90%);} Note this applies everywhere. 8 hours ago, MediaEmby1968 said: 2. Remove this text (I've read here that it can't be done with CSS, that you have to edit a file; does anyone know which file and what to edit in it?) Correct as the skinheader is not tied to a page so scripts load the tabs per page. As custom css would remove the tabs from everywhere. But I believe you have to look at the \system\dashboard-ui\home\home.js. 8 hours ago, MediaEmby1968 said: 3. Remove this text or image Not really discussed. https://emby.media/community/index.php?/topic/90404-remove-get-emby-premiere-button/#findComment-930529 Edited November 15, 2025 by Happy2Play
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 Thanks, steps 1 and 3 worked for me, but I found the file for step 2, but I can't figure it out. I'm not very good with CSS or HTML, but I've tried editing things, but it's still not working. Could you help me? This is the code that appears, but I have no idea what to remove. define(["exports","./../modules/tabbedview/tabbedview.js","./../modules/common/globalize.js","./../modules/maintabsmanager.js","./../modules/emby-elements/emby-scroller/emby-scroller.js","./../modules/emby-elements/emby-button/emby-button.js"],function(_exports,_tabbedview,_globalize,_maintabsmanager,_embyScroller,_embyButton){function HomeView(view,params){_tabbedview.default.apply(this,arguments),this.enableBackMenu=!0}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(HomeView.prototype,_tabbedview.default.prototype),HomeView.prototype.getTabs=function(){return[{name:_globalize.default.translate("Home"),id:"home"},{name:_globalize.default.translate("Favorites"),id:"favorites"}]},HomeView.prototype.getAutoBackdropItemTypes=function(){return["Movie","Series","Game","Book"]},HomeView.prototype.setTitle=function(){},HomeView.prototype.onPause=function(){_tabbedview.default.prototype.onPause.call(this)},HomeView.prototype.destroy=function( ){_tabbedview.default.prototype.destroy.apply(this,arguments)},HomeView.prototype.loadTabController=function(id){switch(id){case"home":return Emby.importModule("./home/hometab.js");case"favorites":return Emby.importModule("./home/favorites.js");default:throw new Error("tab not found: "+id)}},HomeView.prototype.onWindowInputCommand=function(e){"home"===e.detail.command?(_maintabsmanager.default.selectedTabIndex(0),e.preventDefault()):_tabbedview.default.prototype.onWindowInputCommand.apply(this,arguments)};_exports.default=HomeView});
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 22 minutes ago, MediaEmby1968 said: Thanks, steps 1 and 3 worked for me, but I found the file for step 2, but I can't figure it out. I'm not very good with CSS or HTML, but I've tried editing things, but it's still not working. Could you help me? This is the code that appears, but I have no idea what to remove. define(["exports","./../modules/tabbedview/tabbedview.js","./../modules/common/globalize.js","./../modules/maintabsmanager.js","./../modules/emby-elements/emby-scroller/emby-scroller.js","./../modules/emby-elements/emby-button/emby-button.js"],function(_exports,_tabbedview,_globalize,_maintabsmanager,_embyScroller,_embyButton){function HomeView(view,params){_tabbedview.default.apply(this,arguments),this.enableBackMenu=!0}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(HomeView.prototype,_tabbedview.default.prototype),HomeView.prototype.getTabs=function(){return[{name:_globalize.default.translate("Home"),id:"home"},{name:_globalize.default.translate("Favorites"),id:"favorites"}]},HomeView.prototype.getAutoBackdropItemTypes=function(){return["Movie","Series","Game","Book"]},HomeView.prototype.setTitle=function(){},HomeView.prototype.onPause=function(){_tabbedview.default.prototype.onPause.call(this)},HomeView.prototype.destroy=function( ){_tabbedview.default.prototype.destroy.apply(this,arguments)},HomeView.prototype.loadTabController=function(id){switch(id){case"home":return Emby.importModule("./home/hometab.js");case"favorites":return Emby.importModule("./home/favorites.js");default:throw new Error("tab not found: "+id)}},HomeView.prototype.onWindowInputCommand=function(e){"home"===e.detail.command?(_maintabsmanager.default.selectedTabIndex(0),e.preventDefault()):_tabbedview.default.prototype.onWindowInputCommand.apply(this,arguments)};_exports.default=HomeView}); I asked CoPilot Great question — if you want to hide the tabs entirely in your Emby HomeView customization, you don’t just disable them, you stop them from being rendered in the UI. Since the tabs are defined in getTabs() and then drawn by the tabbedview base class, you can override that behavior. Approaches to Hide Tabs 1. Return an Empty Array in getTabs() This prevents any tabs from being created: HomeView.prototype.getTabs = function () { return []; // No tabs will be shown }; 2. Override Tab Rendering If you want to keep the logic but suppress the visual display, you can override the CSS or DOM rendering: /* Hide the tab bar completely */ div.skinHeader-withBackground .emby-tabs-slider { display: none !important; } This way, the tab container exists but is invisible. 3. Conditional Hiding If you want tabs hidden only in certain contexts (e.g., TV layout vs. desktop): HomeView.prototype.getTabs = function () { if (_layoutmanager.default.tv) { return []; // Hide tabs on TV layout } return [{ name: _globalize.default.translate("Home"), id: "home" }, { name: _globalize.default.translate("Favorites"), id: "favorites" }]; }; 4. Suppress Tab Scroll / Navigation Even if tabs are hidden visually, you may want to block navigation: HomeView.prototype.onWindowInputCommand = function (e) { e.preventDefault(); // Prevent tab switching }; Best Practice If you want no tabs at all → return [] in getTabs(). If you want tabs hidden but still functional → use CSS (display:none). If you want conditional hiding → add logic in getTabs(). Do you want the tabs completely removed from the DOM (so they don’t exist at all), or just hidden visually while still technically present? But in the end I don't think you can actually hide the Home tab as it will not load the home page content. And css is not localized to specific page.
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 (edited) Thanks, option 2 worked for me. The others either didn't do anything or weren't visible unless placed elsewhere. But with this option, it looks great, though with a dot in the center. Looking at your images and what you've posted, I combined a few things and it worked; it makes it transparent. As for creating tabs, I don't intend to create any. In fact, these images, in my opinion, clutter the main screen a bit. Thanks for everything. The code I used is this. /* Ocultar completamente la barra de pestañas de Inicio y Favoritos */ div.headerMiddle, headerSection, sectionTabs, headerMiddle-withSectionTabs{ display: none !important; } Edited November 15, 2025 by MediaEmby1968
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 (edited) 6 minutes ago, MediaEmby1968 said: But with this option, it looks great, though with a dot in the center. Yah I noticed that as it was just a quick pick from the elements as the Copilot code had a element that didn't exist. But if you don't need any tabs at all per TV/Movies/Music and everywhere else then your fine. At the same time you are killing some admin pages like Tabs on the Library setup page and other areas. Edited November 15, 2025 by Happy2Play
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 Those tabs you have there don't look familiar. They must be for those of you using Premiere. I've been looking to see if I can access the libraries, settings, and navigate through the usual areas, but so far I haven't noticed anything. Anyway, if I do have a problem, removing all the code and leaving it as it always was will solve it. One question: will these codes work in the theme version 4.9? I use Manjaro KDE and I'm still on 4.8 until they update. As I said, thank you very much for your wisdom and for taking the time to help me. This is how my header looks.
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 (edited) 5 minutes ago, MediaEmby1968 said: One question: will these codes work in the theme version 4.9? I use Manjaro KDE and I'm still on 4.8 until they update. Yes these have not change per versions. But your issue will be admin pages like library setup per my image above as you are removing tabs from Everywhere with Emby. per library tabs Edited November 15, 2025 by Happy2Play
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 You're right, I can navigate, but the settings are lost in some sections. I removed all the code, and when I look at it normally, I know which settings you're referring to. Okay, I'll try your code, even if it's just with the period. If the problem persists, I'll just leave it with Home and Favorites. Thanks
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 There is currently no way with css as it affects all tabs. And looking at the JS file you can eliminate Favorites but do not see a way for Home as it breaks loading the Home page.
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 If I can remove the favorites tab, all the better. It's a tab I don't even use; all my libraries are favorites. And how do I remove favorites from JavaScript? By renaming the favorites.js file, for example?
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 1 minute ago, MediaEmby1968 said: If I can remove the favorites tab, all the better. It's a tab I don't even use; all my libraries are favorites. And how do I remove favorites from JavaScript? By renaming the favorites.js file, for example? It would be per JS file as each page has its own. Put per AI you would do this. Not 100% if semicolons will work as default code has commas. HomeView.prototype.getTabs = function () { return [{ name: _globalize.default.translate("Home"), id: "home" }]; // Removed "Favorites" };
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 I've used that code both in Home.js and in the code as CSS, even though it's not CSS, and it doesn't do anything. Oh well, I'll leave it as is. Thanks
Happy2Play 9780 Posted November 15, 2025 Posted November 15, 2025 3 minutes ago, MediaEmby1968 said: I've used that code both in Home.js and in the code as CSS, even though it's not CSS, and it doesn't do anything. Oh well, I'll leave it as is. Thanks I just edited my home.js with that exact value. Note I used JSTools to format the flatted view Emby provides by default.
MediaEmby1968 47 Posted November 15, 2025 Author Posted November 15, 2025 I just did it the same way you did, using Notepad++, and even though I restarted the server, it's still happening. We'll see tomorrow if it's still the same when I turn it on. Here's a screenshot of how I set it up.
MediaEmby1968 47 Posted November 16, 2025 Author Posted November 16, 2025 (edited) This is unbelievable with web browsers. Last night I tried using Notepad as you suggested, and it didn't work. I decided to check how it looked in other browsers, and it works in some, but something's wrong. The home.js file is the same one that comes with Emby by default. I changed it again last night before going to bed. This morning when I turned on my PC: In my default browser, Brave Browser, it looks like this (the one that doesn't work): First image In Chromium, it looks like this (second image) And in Firefox and Opera, it looks like this (third image) This is the code that's in the custom CSS, and the home.js file is the default one, as I mentioned. /* Codido para poner las bibliotecas en 2 filas */ div.homeSectionsContainer .section0 .scrollSlider { flex-wrap: wrap!important; } /* Poner una imagen de fondo en todas las bibliotecas */ div.backgroundContainer {background-image: url(http://localhost:8096/emby/Items/24896/Images/Backdrop/0?tag=41323fc5e4ceac71140a09308ab01e29);} /* Quitar Emby Premiere */ .btnHeaderPremiere { display: none !important; } /* Imagen Arriba que aparece al bajar a las bibliotecas en la pantalla */ div.skinHeader-withBackground.headroom-scrolling {background: hsla(150, 2.44%, 83.92%, 0%);} /* Quitar logo chromecast */ button.headerCastButton {display: none;} Edited November 16, 2025 by MediaEmby1968
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