Jump to content


Photo

CSS codes for EPG


  • Please log in to reply
4 replies to this topic

#1 Westiewill OFFLINE  

Westiewill

    Advanced Member

  • Members
  • 46 posts
  • Local time: 01:42 AM

Posted 15 May 2019 - 11:55 AM

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

 

5cdc3620adbda_epg.jpg

 

 

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 :D

 

TY

 

 

 



#2 Happy2Play ONLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15077 posts
  • Local time: 05:42 PM
  • LocationWashington State

Posted 15 May 2019 - 04:43 PM

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.



#3 Westiewill OFFLINE  

Westiewill

    Advanced Member

  • Members
  • 46 posts
  • Local time: 01:42 AM

Posted 16 May 2019 - 03:21 PM

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);
}

5cddb815bae53_cssfuck.jpg



#4 Happy2Play ONLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15077 posts
  • Local time: 05:42 PM
  • LocationWashington State

Posted 16 May 2019 - 03:49 PM

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


#5 Westiewill OFFLINE  

Westiewill

    Advanced Member

  • Members
  • 46 posts
  • Local time: 01:42 AM

Posted 16 May 2019 - 04:10 PM

 

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 by Westiewill, 16 May 2019 - 08:51 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users