arrbee99 1544 Posted August 20, 2022 Share Posted August 20, 2022 Am wondering if anyone might know how to tidy this kind of thing up in the TV guide - When sideways scrolling the time bar, as you can see, goes over the top of the channels list instead of underneath. Also the programs do go underneath the channels but I get a bit of it showing through down the left hand side. This is hopefully the TV guide css bit (the bit in bold is supposed to let a bit of the picture (marine dinosaur thing) through while making it blurry to stop the program names showing through - /* TV Guide */ /* Add backdrop to guide and centre */ div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");} div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active {background-size: cover; background-position: center; } /* Make top centre tabs bolder and whiter */ button.emby-tab-button.main-tab-button.emby-button.emby-button-backdropfilter {font-weight:bold; color: white;} /* Make guide date drop down bolder, whiter and bigger */ span.btnDateText.btnDateText-main {font-weight:bold; color: white; font-size:120%;} /* Make program cells transparent to show picture */ div.programCellInner {background-color: rgba(0, 0, 0, 0.2);} /* Make All Channels transparent but blurry to let picture show but mostly hide programs showing through */ div.channelCellInner {background-color: rgba(0, 0, 0, 0.2);} div.channelCellInner {backdrop-filter: blur(3.0em);} /* Adjust colour and width of current time indicator */ div.guide-currentTimeIndicatorDot {width: 1px;} div.guide-currentTimeIndicatorDot {background: var(--myhighlight);} /* Remove current time indicator arrow */ div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot::before {display: none;} /* Make program text bigger */ div.guideProgramNameText {font-size: 125% !important;} /* Make premiere new etc MyColour */ div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--mycolour);} span.premiereTvProgram.guideProgramIndicator {background-color: var(--mycolour);} /* Add border to program cells - vertical only */ .programCell { border-width: 0px 2px 0px 2px !important; border-color: rgba(0,0,0,0) !important; } /* Make TV guide time slots bolder, whiter and bigger */ div.timeslotHeader {font-weight:bold; color: white; font-size:120%;} /* Make TV guide rows shallower */ div.virtualScrollItem.epgRow {height: 60px;} /* Remove channel logo */ div.guideChannelImage {display: none;} /* Make channel name bolder, whiter and bigger */ div.guideChannelText.secondaryText {font-weight: bold; color: white; font-size: 120% !important;} /* Make top left empty box wider */ div.channelCell.firstChannelCell {width: 240px !important;} /* Make channels column wider */ button.channelCell.itemAction {width: 240px !important;} button.channelCell.itemAction { border-width: 0px 2px 0px 2px!important; border-color: rgba(0,0,0,0.25) !important;} /* Re-align Timeline to correct position */ div.guide-currentTimeIndicatorDot.guideEpg-currentTimeIndicatorDot {margin-left: 16.5em;} /* Remove top portion of Timeline */ div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot {display: none;} /* Make TV play recording dialog box shallower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;} /* Make TV play recording dialog box narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800px;} /* TV guide alternate rows */ /*table > tbody > tr:nth-child(even) {background-color:#FDFDDF; }*/ /* table > tbody > tr:nth-child(odd) {background-color:#DFE6FD; }*/ /* You can do some fancy math as well for every third row */ /*li:nth-child(3n - 2) { }*/ /* TV guide alternate rows black but transparent*/ div.virtualScrollItem.epgRow:nth-child(even) {background-color:black; } div.virtualScrollItem.epgRow:nth-child(even) {background-color: rgba(0, 0, 0, 0.3);} Link to comment Share on other sites More sharing options...
Luke 36876 Posted August 20, 2022 Share Posted August 20, 2022 If you're willing to drop transparency in the channel cells then you won't see anything behind them. Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 20, 2022 Share Posted August 20, 2022 (edited) @arrbee99 Have you tried adding this? div.guideEpg-currentTimeIndicatorDot {z-index: 0;} Edited August 20, 2022 by Happy2Play 1 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 20, 2022 Author Share Posted August 20, 2022 24 minutes ago, Luke said: If you're willing to drop transparency in the channel cells then you won't see anything behind them. Thanks. It does, just not sure about that column being the only non transparent bit of the guide... Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 20, 2022 Author Share Posted August 20, 2022 24 minutes ago, Happy2Play said: @arrbee99 Have you tried adding this? div.guideEpg-currentTimeIndicatorDot {z-index: 0;} Thanks. Works well. Makes the line a bit fainter everywhere though. Still, can't have everything... Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 20, 2022 Author Share Posted August 20, 2022 Any thoughts maybe about those tiny bits down the left hand side ? They do tend to draw the eye. Don't know if its some kind of border thing ? Also looking closely, maybe I'm going for the wrong css command as things aren't quite lining up. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 20, 2022 Author Share Posted August 20, 2022 Also, would anyone happen to know why Chrome, on the left, has un-blurry programs showing through, while Firefox, on the right, doesn't. Same position in the guide for each... Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 20, 2022 Author Share Posted August 20, 2022 I was hoping something like this would help to just apply it to Firefox and Edge, but it does nothing. I think the syntax is wrong but can't find any useful examples anywhere - div.channelCellInner {-moz-background-color: rgba(0, 0, 0, 0.2);} div.channelCellInner {-moz-backdrop-filter: blur(3.0em);} div.channelCellInner {-ms-background-color: rgba(0, 0, 0, 0.2);} div.channelCellInner {-ms-backdrop-filter: blur(3.0em);} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 20, 2022 Share Posted August 20, 2022 (edited) Hi, I have tried the shared codes and have approved most of them. For me removing the channel logo works but the channel name is not displayed. Thanks for a tip. Edited August 20, 2022 by CarlosLima Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 21, 2022 Author Share Posted August 21, 2022 So you have just channel name and number displayed. Jolly good. I just added this to put them on different lines if you're interested. - /* Put channel name and number on separate lines */ span.guideChannelName {display: flex; align-items: center; justify-content: center;} Hope its actually correct. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 Thanks for your help. This last code has not changed for me, that is, the channel name is not displayed in the field where the logo would be. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 21, 2022 Author Share Posted August 21, 2022 So it completely blank, like the picture you posted ? I have this now - Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 Exactly like the picture I posted above. Completely blank. Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 21, 2022 Share Posted August 21, 2022 @arrbee99 looks resolution based what happens if you shrink you window height? @CarlosLima Are you talking about the channel name autohide? default code @media all and (max-height:50em) { .guideChannelText-autohide { display: none } } to something like this @media all and (max-height:50em) { div.guideChannelText-autohide { display: block } } Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 4 minutes ago, Happy2Play said: @arrbee99 looks resolution based what happens if you shrink you window height? @CarlosLima Are you talking about the channel name autohide? default code @media all and (max-height:50em) { .guideChannelText-autohide { display: none } } to something like this @media all and (max-height:50em) { div.guideChannelText-autohide { display: block } } Thanks a lot, that worked now. So I'm going to adjust the field width because it seems to need more width. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 21, 2022 Author Share Posted August 21, 2022 Are you meaning there might not be enough height to display the logo ? I guess CarlosLima answer above means yes ? Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 21, 2022 Share Posted August 21, 2022 12 minutes ago, arrbee99 said: Are you meaning there might not be enough height to display the logo ? Would appear the entire table sort of scales. @CarlosLima Note guideProgramSecondaryInfo is doing the same thing. @media all and (max-height:40em) { .guideProgramSecondaryInfo { display: none } } to @media all and (max-height:40em) { div.guideProgramSecondaryInfo { display: block } } Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 4 minutes ago, Happy2Play said: Would appear the entire table sort of scales. @CarlosLima Note guideProgramSecondaryInfo is doing the same thing. @media all and (max-height:40em) { .guideProgramSecondaryInfo { display: none } } to @media all and (max-height:40em) { div.guideProgramSecondaryInfo { display: block } } Hmn, I applied this code and it doesn't display the red label. I believe that the guide for Brazil does not provide this feature (from the live programs) Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 21, 2022 Share Posted August 21, 2022 2 minutes ago, CarlosLima said: Hmn, I applied this code and it doesn't display the red label. I believe that the guide for Brazil does not provide this feature (from the live programs) Possibly, do you have it enabled in Show Indicators? Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 8 minutes ago, Happy2Play said: Possibly, do you have it enabled in Show Indicators? I believe it is here. Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 21, 2022 Share Posted August 21, 2022 @CarlosLima Must be guide data then as you have "Ao vivo" enabled. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 21, 2022 Share Posted August 21, 2022 Yeah. Thanks Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted August 21, 2022 Share Posted August 21, 2022 22 hours ago, arrbee99 said: Also, would anyone happen to know why Chrome, on the left, has un-blurry programs showing through, while Firefox, on the right, doesn't. Same position in the guide for each... Looks like another quirk in FF but does this correct the issue? button.channelCell {inset-inline-start: -2px;} But @Lukethis can be reproduced without any custom css in FF, not seen in Edge/Chrome. Sort of hard to catch with console open. 1 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 21, 2022 Author Share Posted August 21, 2022 Yes it does. Excellent. Thank you. (need to make it 3px btw..) Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted August 21, 2022 Author Share Posted August 21, 2022 Though technically that fix just above apples to the picture in the first post, not the one you quoted. 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