Category color-coding not showing up in list mode when publishing page via Blogger

[trdeveloper]

Hi! I have really enjoyed using and integrating the calendar. I am only using it in list mode and have run into one problem with the category color-coding. The web page that includes the Easy PHP calendar list is being published by a Blogger blog, because some of the other content on the page is client-editable via Blogger. I am able to insert whatever code I need to into the custom Blogger template I've created, so integrating the Easy PHP Calendar List code into the Blogger-published page was not a problem.

What is not working is that the category colors are not displaying. I had no problems displaying the category colors when integrating the Easy PHP Calendar code on a page that is not published by Blogger. As soon as that exact same code is integrated into the Blogger template and Blogger publishes the page, the category colors disappear. The Easy PHP Calendar template I am using is a slight variation of the monthly.php template (code for my template is pasted at the very bottom of this post).

Here is the code I inserted into the Blogger template:
<?php
$LIST=1;
$listWeeks = 10;
$noOld = 1;
$DF = "D - M d";
$template="gfdcal.php";
require ("../calendar/calendar.php");
?>

However, when I "view source" in a web browser for the Blogger-published web page after it has been published, the above code is missing and the following code appears in its place:
<script type="text/JavaScript">
<!--
function popupEvent(ev, w, h) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
win = window.open("/calendar/functions/popup.php?ev=" + ev + "&readFile=0&readSQL=1&showCat=&oc=1","Calendar"," scrollbars=yes,status=no,location=no,toolbar=no,me nubar=no,directories=no,resizable=yes,width=" + w + ",height=" + h + ",top=" + wint + ",left=" + winl + "");
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
//-->
</script>
Can anyone suggest a fix that will restore my category color codes when publishing the page via Blogger?

Thanks!

Edward

P.S. Here is the code I am using for my Easy PHP Calendar template:

<!--head-->
<style type="text/css">
<!--
.tableListings {
width: 620px;
border: 0px solid #006699;
margin: 0px;
padding: 5px;
}
.tableDate {
font-family: Arial, sans-serif;
font-size: 14px;
color: #000000;
width: 100px;
text-align: left;
vertical-align: top;
font-weight: bold;
padding: 2px;
}
.tableTitle {
font-family: Arial, sans-serif;
font-size: 14px;
color: #004262;
width: 520px;
text-align: left;
vertical-align: top;
font-weight: bold;
padding: 2px;
}
.tableCategory {
width: 8px;
}
.tableDescr {
font-family: Arial, sans-serif;
font-size: 14px;
color: #383838;
text-align: left;
vertical-align: top;
font-weight: normal;
}
.tableTime {
font-family: Arial, sans-serif;
font-size: 14px;
color: #295569;
font-weight: bold;
}
-->
</style>
<table border="0" class="tableListings">
<!--head-->


<!--body-->
<tr>
<td align="left" valign="top" bgcolor="#F7F5F2" class="tableDate">[date]<br><span class="tableTime">[time]</span></td>
<td align="left" valign="top" bgcolor="#FFFDF2" class="tableCategory s2[category]">&nbsp;</td>
<td align="left" valign="top" bgcolor="#F7F5F2" class="tableTitle" [mouseover]>[title]<br>
<span class="tableDescr">[categories][descr]<br /><br /></span></td>
</tr>
<!--body-->


<!--foot-->
</table>
<!--foot-->


<!--empty-->
<tr>
<td bgcolor="#FFFDF2" class="tableTime"><center>There are no events to display for this time period.</center></td>
</tr>
<!--empty-->

[Brian]

The CSS code for the category colors are dynamically generated when you insert the $CSS=1 calendar command.

If you are copy/pasting the CSS manually, you'll need to look at the source code of a regular calendar page and grab the category CSS to paste in the blog.

[trdeveloper]

Hi Brian,

Thanks for the quick reply! When you say regular calendar page, do you mean a non-list calendar page, or just a page that is not blogger-generated?

Once I know the answer to that question, do I just make a dummy page on my site and integrate the calendar into it, then look at the source code to find the CSS?

Could you by any chance give me a link to any Easy PHP Calendar page of this type so I can see an example of the CSS I am looking for? (I am guessing I am looking for any CSS that has words like catgegory/categories in it.)

Thanks!

Edward

[Brian]

Just look at any of your calendar demo files or the event manager.

You're looking for a section similar to:

<!--
.s22 {background-color: #A4CAE6;}
.s21 {background-color: #F2BFBF;}
.s23 {background-color: #CCFF00;}
.s24 {background-color: #FBF484;}
.s29999 {background-color: #FFC18A;}
-->

[trdeveloper]

Thanks Brian! That fixed everything. I really appreciate your immediate assistance!

Have a good night,

Edward

[ve9gra]

Edward, if there's any way that you can add stuff in the head of the template, I strongly suggest that you add the $CSS line instead of having the CSS manually pasted in the code.

By having the line in there, should you make any changes to the categories at a later time, the colors will automatically be updated.

In the code you said you pasted, that is only the 3rd required item for a proper integration. Have a look at the Integration section of the Online Docs and read the Important section. It describes where you are to put the $CSS and $OL lines for a proper integration.

[trdeveloper]

Thanks Brian! I originally added that line before publishing via Blogger and accidentally left it out of the Blogger template. I successfully added it to the Blogger template and then removed the lines of CSS with the colors that I had added previously. Everything is working great now. Thanks again!