Jump to content

TV Guide time bar on top


arrbee99

Recommended Posts

arrbee99

As per the subject, I changed the TV Guide time bar to be blue and wider -

2132109419_EmbyTVGuidetimebar.thumb.JPG.37a3052abb9ac53c2dc89c8d58a62713.JPG

using this -

/* Adjust Colour and Width of Current Time Indicator */
div.guide-currentTimeIndicatorDot {width: 3px;}
div.guide-currentTimeIndicatorDot {background: var(--myblue);}

but it would likely be better as a solid (on top of the grid ?) line.

Any thoughts please ?

Link to comment
Share on other sites

cochize1
On 3/23/2021 at 4:04 AM, arrbee99 said:

As per the subject, I changed the TV Guide time bar to be blue and wider -

2132109419_EmbyTVGuidetimebar.thumb.JPG.37a3052abb9ac53c2dc89c8d58a62713.JPG

using this -

/* Adjust Colour and Width of Current Time Indicator */
div.guide-currentTimeIndicatorDot {width: 3px;}
div.guide-currentTimeIndicatorDot {background: var(--myblue);}

but it would likely be better as a solid (on top of the grid ?) line.

Any thoughts please ?

This looks nice, can't help you with the top bar but have a question of my own.

How can you make the custom color of the program grid itself? I can see you have the programms in grey and thick black borders, whereas I have it all black so no telling where one program starts and one finishes.

Edited by cochize1
Link to comment
Share on other sites

arrbee99

Erm, only a few random thoughts really -

I guess you mostly copied over the stuff I messaged you so maybe you added other stuff that interferes or stuff of mine you didn't copy made something not work.

Mine was only really for the dark theme, which I wouldn't have thought make a difference, but you never know

I'm always on the latest beta. Not sure if thats significant.

Don't think this has changed -

 

/* ---------------------------------------------------------------------------------------------------- */
/* TV Guide */

/* Enlarge Text for Program Names in Guide */
div.guideProgramNameText {
  font-size: 125%;
}

/* All Guide Entries Gray20 */
div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active { background: #333333;}

/* Top Left Corner of Guide Only Gray15 */
div.channelCell { background: #262626 !important;}

/* All Channels Left Hand Side Gray15 */
button.channelCell.channelCell-mobilefocus.itemAction { background: #262626 !important;}

/* Row of Times in Guide Gray15 */
div.timeslotHeaders { background: #262626;}

/* Adjust Colour and Width of Current Time Indicator */
div.guide-currentTimeIndicatorDot {width: 3px;}
div.guide-currentTimeIndicatorDot {background: var(--myblue);}

/* Add Border to Program Cells Vertical Only */
.programCell {
    border-width: 0px 4px 0px 4px!important;
    border-color: rgba(0,0,0,1) !important;
}

/* Add Border to Program Cells Horizontal Only */
div.virtualScrollItem.epgRow.flex {
    border-width: 4px 0px 4px 0px!important;
    border-color: rgba(0,0,0,1) !important;
}

/* Add Right Hand Border to All Channels Left Hand Side */
button.channelCell.channelCell-mobilefocus.itemAction {
    border-width: 0px 4px 0px 0px!important;
    border-color: rgba(0,0,0,1) !important;;
}

/* Make Premiere New etc Blue */
div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--myblue);}
span.premiereTvProgram.guideProgramIndicator {background-color: var(--myblue);}

/* Make TV Program pop-up Poster Almost Black and White */
img.recordingDialog-img {filter: grayscale(3%);}

/* Row of Times in Guide Bottom Border */
div.timeslotHeader {
    border-width: 0px 0px 8px 0px !important;
    border-color: rgba(0,0,0,1) !important;
}

/* Top Left Corner of Guide Only Bottom Border */
div.channelCell.firstChannelCell {
    border-width: 0px 0px 4px 0px !important;
    border-color: rgba(0,0,0,1) !important;
}

/* Make Top Left Empty Box Wider */
div.channelCell {width: 240px !important;}

/* Make Channels Column Wider */
button.channelCell.channelCell-mobilefocus.itemAction {width: 240px !important;}

/* Remove Channel Logo */
div.guideChannelImage {display: none !important}

/* Make Program Text Bigger */
div.guideChannelText.secondaryText {font-size: 150% !important;}

/* Try to Re-align Timeline to Correct Position */
div.guide-currentTimeIndicatorDot {margin-left: 16.5em;}

 

If I delete all css except the guide stuff it still works, except it changes the timelime back to thin green for some reason -

413000619_EmbyTVGuidenotblue.thumb.JPG.043ca84a6574968235b488021c488ae1.JPG

Not forgetting I just try to find a command that seems to work, which is unlikely to be the best command, think unintended consequences etc...

  • Like 1
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...