| Re: css piCal ! |
Titre du sujet : Re: css piCal !
par PinMaster sur 07/06/2006 15:45:09
Bon alors voici une infime partie du travail que j'effectue sur piCal, celà devrait te donner de quoi personnaliser le minicalendrier.
Voici la marche à suivre :
-> Ouvrir le fichier minical.tmpl.html (dans le dossier images/default de piCal)
-> Remplacer tout le code par :
<pattemplate:tmpl name="WholeBoard">
<link rel="stylesheet" type="text/css" href="{SKINPATH}/minical.css" />
<table class='minical'>
<!-- header part -->
<tr>
<th nowrap='nowrap' colspan='7'><a href='{GET_TARGET}?caldate={PREV_MONTH}'><img src='{SKINPATH}/miniarrowleft.gif' alt='{MB_PREV_MONTH}' title='{MB_PREV_MONTH}' /></a>{YEAR_MONTH_TITLE}<a href='{GET_TARGET}?caldate={NEXT_MONTH}'><img src='{SKINPATH}/miniarrowright.gif' alt='{MB_NEXT_MONTH}' title='{MB_NEXT_MONTH}' /></a></th>
</tr>
<tr>
<!-- day name loop -->
<pattemplate:tmpl name="DayNameLoop">
<td class='{TYPEOFDAY}'>{DAYNAME}</td>
</pattemplate:tmpl>
</tr>
<!-- weekly loop -->
<pattemplate:tmpl name="WeekLoop">
<tr>
<!-- daily loop -->
<pattemplate:tmpl name="DailyLoop" type="condition" conditionvar="DATE_TYPE">
<pattemplate:sub condition="0">
<td><img src='{SKINPATH}/spacer.gif' alt='' class='spacer-day' /></td>
</pattemplate:sub>
<pattemplate:sub condition="1">
<td class='{TYPEOFDAY}'><a href='{GET_TARGET}?caldate={LINK}&{QUERY_STRING}'>{DATE}</a></td>
</pattemplate:sub>
<pattemplate:sub condition="default">
<td class='{TYPEOFDAY}'><a href='{GET_TARGET}?caldate={LINK}&{QUERY_STRING}'><span class='event-day'>{DATE}</span></a></td>
</pattemplate:sub>
</pattemplate:tmpl>
</tr>
</pattemplate:tmpl>
<tr>
<td colspan='7' class='add-linktoday'><a href='{GET_TARGET}' class='calfoot'>{MB_LINKTODAY}</a></td>
</tr>
</table>
</pattemplate:tmpl>
-> créer un fichier minical.css dans le même dossier et mettre ceci :
/******* MINI CALENDAR *******/
table.minical {
width: 100%;
line-height: normal;
margin: auto;
border-collapse: collapse;
border: 0px;
background-color: white;
}
table.minical th {
padding: 0px;
vertical-align: middle;
text-align: center;
font-size: small;
color: #009900;
background-color:#CCFFCC;
}
table.minical th img {
width: 18px;
height: 14px;
border: 0px;
vertical-align: top;
}
table.minical td {
text-align: center;
font-size: small;
}
table.minical td.weekday-name {
color: #000066;
}
table.minical td.weekday-name-sunday {
color: #cc0000;
}
table.minical td.weekday-name-saturday {
color: #0000ff;
}
table.minical td.spacer-day {
width: 20px;
height: 12px;
}
table.minical td.weekday, table.minical td.weekday a {
background-color: #ffffff;
color: #000066;
}
table.minical td.weekday-sunday, table.minical td.weekday-sunday a {
background-color: #ffeeee;
color: #cc0000;
}
table.minical td.weekday-saturday, table.minical td.weekday-saturday a {
background-color: #eef7ff;
color: #0000ff;
}
table.minical td.weekday-holiday, table.minical td.weekday-holiday a {
background-color: #ffeeee;
color: #cc0000;
}
table.minical td span.event-day {
text-decoration:underline;
}
table.minical td.add-linktoday {
text-align: center;
vertical-align: middle;
}
Après il ne te restera plus qu'à faire mumuse avec la feuille de style pour optenir ce que tu souhaites.
Dernière chose, il y a une erreur W3C. Pour la corrigé, il suffit d'intégré le contenu de la feuille de style dans celle de ton thème puis d'effacer la ligne d'appel au css du template.
Cela fait plusieurs jours que je réfléchi et essaye diverse solution pour palier à cette erreur de manière transparente pour l'utilisateur... finalement je vais voir avec une extension de piCal dérivé de cssadmin (qui a un jolie bug au passage  ).
J'espère que celà te conviendra.
|
|
