Change Color of the Calendar Event Days

[Robert Williams]

Hello all, 

I want to be able to change the colors on my calendar days (just the one's with events) without it effecting every link on my site. Is this possible?

Thanks!

[Bernard Lama]

Hi Robert, the following code is the exact code for your preference. Just copy and paste the code into advanced css box via my network> settings> appearance.

div.calendar td.future {
color: red;
}

div.calendar td.past.xg_lightfont {
color: green;
}

div.calendar td.present {
color: blue;
}

[Armani Rouse]

very nice Bernard, awesome of you to share!

[George H. Compton IV]

These codes will automatically cross out past days put a border around the future days and color the present day
you can change the color lightblue to any color you would prefer.

This code Will only affect the event module's calendar not the event page calendar

.xg_module.module_events TD.present {background-color: lightblue !important;}
.xg_module.module_events TD.future {border: 1px solid lightblue !important;}
.xg_module.module_events TD.past { background-image: url(http://api.ning.com:80/files/Jec9iT2*pOjTVTAzA0p2xmtfLnsmGueFWYFEkeio6Q8MMdngwhxyk2jC76tnPpQJVDYA4SPmJPeMIQ0GkDRaMI56lEhOyrQ9/XImage.jpg);
   background-size:100% 100%; }
.module_events div.calendar div {position: relative; overflow: visible;}


This code will affect the calendars on the modules and the calendars on the event page

TD.present {background-color:lightblue !important;}
TD.future {border: 1px solid lightblue !important;}
TD.past { background-image: url(http://api.ning.com:80/files/Jec9iT2*pOjTVTAzA0p2xmtfLnsmGueFWYFEkeio6Q8MMdngwhxyk2jC76tnPpQJVDYA4SPmJPeMIQ0GkDRaMI56lEhOyrQ9/XImage.jpg);
 background-size:100% 100%; }
div.calendar div {position: relative; overflow: visible;}
.module_events div.calendar div {position: relative; overflow: visible;}

_

_

event module on the home page

_

_

and the event page

[Armani Rouse]

Even better George hahahahaha! The man with CSS LOL :D

[Robert Williams]

Thank you all very much! Awesome stuff... I have implemented on my blog... If there is ever a way to highlight event days, please let me know. Thanks again!

[George H. Compton IV]

They should already be highlighted for the event day but here you go

TD.future A{background-color: lightblue !important;}

[Robert Williams]

perfect! that's just what I needed. Thx!