TV guide random colours

[arrbee99 1559]

I don't suppose there's an easy (CSS) way to generate random colours to add to program backgrounds in the TV guide ? I know the guide is supposed to colour code programs based on type but I get so few of them I was hoping there might be a way to liven the guide up a bit.

[visproduction 122]

Hi, I don't use the TV, so I have not looked at the CSS, but changing colors for any div works if you pick the div for the whole list and then do nth-child(odd) and nth-child(even) to get alternating colors.  If you want to go row by row, you add nth-child(1), nth-child(2), nth-child(3) etc.  Any row that doesn't fall into your designated new list, then defaults to the standard background color.

If you are working with tables example code would be:

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

More tricks on this: https://css-tricks.com/almanac/selectors/n/nth-child/

To do random colors, usually is done with javascript or jquery function or back-end server PHP or similar.  There is a lot you can do, but the problem is getting it on the page, because security reasons stop you from calling  javasscript from a css style,  You would have to find the default head code for all the pages in the TV section, which might be the head includes for all pages and then insert a call to a  custom.js script  That is not currently available and not part of custom CSS. 

 

I did find a solution using css animation: have a look at https://stackoverflow.com/questions/15327990/generate-random-color-with-pure-css-no-javascript
The entry on animation looks like it might do the job.  It seems like a lot of work to get random colors.  I would stick to odd and even if you want a nice look.

 

Hope that helps.