How To Change The Background Of "Today" On The Calendar

[Jake Bunce]

By default, the calendar highlights "today" with a red border:



This mod allows you to change the background color as well (background is black in this example):



You can do this one of two ways:

Quick & Easy - Change Background With Style Tag


Edit this template:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Calendar Templates -> calendar_monthly_day

Near the top, add the red code:



<if condition="$show['highlighttoday']">
<td class="alt2" height="50" width="$daywidth" style="background: #000000; padding:0px; border:1px solid red; font-weight:bold" title="$vbphrase[today]">
<else />
<td class="alt2" height="50" width="$daywidth" style="padding:0px">
</if>


Change the blue color code to any color you want.

More Extensible - Change Background With Classes


Edit this template:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Calendar Templates -> calendar_monthly_day

Near the top, replace the red code:



<if condition="$show['highlighttoday']">
<td class="alt2" height="50" width="$daywidth" style="padding:0px; border:1px solid red; font-weight:bold" title="$vbphrase[today]">
<else />
<td class="alt2" height="50" width="$daywidth" style="padding:0px">
</if>


...with the blue code:



<if condition="$show['highlighttoday']">
<td class="cal_today" height="50" width="$daywidth" style="padding:0px; border:1px solid red; font-weight:bold" title="$vbphrase[today]">
<else />
<td class="alt2" height="50" width="$daywidth" style="padding:0px">
</if>


Now go to your:

Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu)

Scroll down to the bottom where it says Additional CSS Definitions. In the bottom box, add this code:



/* ***** background and font color for "today" on the calendar */
.cal_today
{
background: #000000;
color: #FFFFFF;
}


Change the blue color codes (background and font color) to whatever you want.