CSS codes for EPG

[Westiewill 15]

any way i can change colors on EPG (background, highlighted epg, etc) 

 

 

 

like the green part i want to change to bright purple, the dark grey colors, to dark purple etc... those 

is it possible to customize this? if so what is the css codes for it? 

 

trying to achieve 100% customization

 

TY

 

 

 

[Happy2Play 8252]

I don't do livetv so I wouldn't be much help, but if you use the browser debug console (F12) you should be able to use the select a element option and get the what you are looking for.

[Westiewill 15]

thank you for the tip on using debug console, I have been playing around with it in Chrome and I see I can edit the code in chrome and it shows what it will look like in realtime,  very cool     After modifying it to look how I like it, i copy and paste the code in the special CSS area and it doesnt change anything      I included screenshot of what I wanted it to look like modifying it from debug console, and i include the css code here below

 

}
element.style {
    left: 0%;
    width: 8.332175925925926%;
}
.guide-channelHeaderCell, .programCell {
    outline: 0!important;
}
.programCell {
    background: #2c0054;
    border-width: 0 0 0 1px;
    padding: 0!important;
    width: 100%;
    font-size: inherit;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    margin: 0!important;
}
.channelPrograms, .programCell {
    border-style: solid;
    display: -webkit-box;
    display: -webkit-flex;
    contain: strict;
}
.guide-channelHeaderCell, .guide-channelTimeslotHeader, .programCell {
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
    font-family: inherit;
    text-decoration: none;
    -webkit-box-align: center;
    text-align: left;
    overflow: hidden;
}
.programCell-active {
    background: #12002d!important;
}
.channelPrograms, .guide-channelHeaderCell, .programCell {
    border-color: rgba(255,255,255,.05);
}
button {
    -webkit-border-fit: border!important;
}
user agent stylesheet
button {
    padding: 1px 6px;
}
user agent stylesheet
button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}
user agent stylesheet
button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
user agent stylesheet
button {
    -webkit-writing-mode: horizontal-tb !important;
}
user agent stylesheet
button {
    -webkit-appearance: button;
}
.channelPrograms {
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 4.42em;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-width: 1px 0;
}
.channelPrograms, .channelsContainer, .tvGuideHeader, .tvguide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}
Style Attribute {
    white-space: nowrap;
}
.scrollX {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    white-space: nowrap;
}
.flex-direction-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.programContainer {
    white-space: nowrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    contain: strict;
}
.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}
body {
    font-family: 'Karla', sans-serif;
}
body {
    overflow-y: scroll!important;
    overflow-x: hidden;
    background-color: transparent!important;
    -webkit-font-smoothing: antialiased;
}
html {
    color: #ddd;
    color: rgba(255,255,255,.87);
}
html {
    font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Open Sans',sans-serif;
    font-size: 90.15%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html {
    line-height: 1.35;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
.layout-desktop ::-webkit-scrollbar {
    width: 1em;
    height: 1em;
}
::-webkit-scrollbar {
    width: 6px !important;
}
::-webkit-scrollbar-thumb {
    background: #6920b5 !important;
    border-radius: 6px !important;
}
::-webkit-scrollbar-track {
    background: #000 !important;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(255,255,255,.14);
}

[Happy2Play 8252]

Quick look, is that and extra leading bracket "}" or is it just copied from code above?  Alsoo the target elements don't look right to me.

 

examples

user agent stylesheet
html

user agent stylesheet
button

Style Attribute

[Westiewill 15]

 

Quick look, is that and extra leading bracket "}" or is it just copied from code above?  Alsoo the target elements don't look right to me.

 

examples

user agent stylesheet
html

user agent stylesheet
button

Style Attribute

 

I will play around with it again, I have zip knowledge on css, just editing color codes minor things like that.    I just copy and paste the code from the debug mode after modifying it.

 

maybe that was my error

Edited May 17, 2019 by Westiewill