| PiCal deviendra multithème |
Titre du sujet : PiCal deviendra multithème
par PinMaster sur 12/05/2006 11:33:57
Comme c'est une évolution de la version ci-dessus de PiCal, je vous informes donc de l'arrivée prochaine d'une version PiCal0.86-CSS (ou multithème).
Pourquoi ma petite extension CSS?
Simple, je reprend une classe de PiCal (ce n'est pas une mince affaire) pour extraire tout le contenu lié au format des tableaux et autres avec reprise de certain template en conséquence.
Ceux qui ont firefox et son extension WebDeveloper, pourront modifié en live l'apparence de certain mode d'affichage de PiCal.
Les modes actuellement fait sont :
-> vue journalière
-> vue hebdommadaire
-> vue annuelle (en cours)
Voici certaines sources:
-> vue journalière son code ne ressemble plus à l'ancien mais fait la même chose en plus léger
<pattemplate:tmpl name="WholeBoard">
<div id='pical_calendar_body' class='calframe'>
<!-- header -->
<table class='pical-categoryform'>
<tr>
<td class='pical-categoryform-selform'>{CATEGORIES_SELFORM}</td>
<td class='pical-categoryform-spacer'><img src='{SKINPATH}/spacer.gif' alt='' /></td>
<td class='pical-categoryform-nav'><a href='{GET_TARGET}?cid={CID}&smode=Daily&caldate={PREV_MONTH}'><img src='{SKINPATH}/arrowleftleft.gif' alt='{MB_PREV_MONTH}' title='{MB_PREV_MONTH}' /></a></td>
<td class='pical-categoryform-nav'><a href='{GET_TARGET}?cid={CID}&smode=Daily&caldate={PREV_DATE}'><img src='{SKINPATH}/arrowleft.gif' alt='{MB_PREV_DATE}' title='{MB_PREV_DATE}' /></a></td>
<td class='pical-categoryform-title'><img src='{SKINPATH}/spacer.gif' alt='' /><br />{YMD_TITLE}<span class='calhead-day'>{DISP_DAY}</span><br /><img src='{SKINPATH}/spacer.gif' alt='' /></td>
<td class='pical-categoryform-nav'><a href='{GET_TARGET}?cid={CID}&smode=Daily&caldate={NEXT_DATE}'><img src='{SKINPATH}/arrowright.gif' alt='{MB_NEXT_DATE}' title='{MB_NEXT_DATE}' /></a></td>
<td class='pical-categoryform-nav'><a href='{GET_TARGET}?cid={CID}&smode=Daily&caldate={NEXT_MONTH}'><img src='{SKINPATH}/arrowrightright.gif' alt='{MB_NEXT_MONTH}' title='{MB_NEXT_MONTH}' /></a></td>
<td class='pical-categoryform-smode'>
<a href='{GET_TARGET}?cid={CID}&smode=Yearly&caldate={CALDATE}'><img src='{SKINPATH}/year_on.gif' alt='{ICON_YEARLY}' title='{ICON_YEARLY}' /></a>
<a href='{GET_TARGET}?cid={CID}&smode=Monthly&caldate={CALDATE}'><img src='{SKINPATH}/month_on.gif' alt='{ICON_MONTHLY}' title='{ICON_MONTHLY}' /></a>
<a href='{GET_TARGET}?cid={CID}&smode=Weekly&caldate={CALDATE}'><img src='{SKINPATH}/week_on.gif' alt='{ICON_WEEKLY}' title='{ICON_WEEKLY}' /></a>
<a href='{GET_TARGET}?cid={CID}&smode=List&caldate={CALDATE}'><img src='{SKINPATH}/list_on.gif' alt='{ICON_LIST}' title='{ICON_LIST}' /></a>
</td>
</tr>
</table>
<!-- evenement du jour -->
{CALENDAR_BODY}
</div>
<br />
<div id='pical_calendar_selectday'>
<form action='{GET_TARGET}?cid={CID}&smode=Daily&{QUERY_STRING}' method='post'>
{YMD_SELECTS}
<input type='submit' name='pical_jumpcaldate' value='{LANG_JUMP}'>
<a href='{GET_TARGET}?cid={CID}&smode=Daily'>{MB_LINKTODAY}</a>
</form>
</div>
<div id='pical_calendar_copyright'>{COPYRIGHT}</div>
<div id='pical_calendar_print'><a href="{PRINT_LINK}" target="_blank"><img src="{SKINPATH}/print.gif" alt="{LANG_PRINT}" title="{LANG_PRINT}" {PRINT_ATTRIB} /></a></div>
</pattemplate:tmpl>
-> l'extrait du css associé à la vue journalière:
/******* CALENDAR DAILY *******/
table.pical-calendar-daily {
width: 98%;
height: 350px;
margin: 10px;
border: solid 1px green;
border-collapse: collapse;
border-spacing: 0px;
background-color:white;
}
table.pical-calendar-daily-list {
width: 100%;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
td.pical-calendar-daily-cl { /* time colonne*/
width: 21%;
padding-top: 10px;
vertical-align: top;
text-align: center;
}
td.pical-calendar-daily-cl pre { /* time format*/
margin: 0px;
font-size: medium;
}
td.pical-calendar-daily-cr { /* event desciption */
width: 79%;
padding-top: 10px;
vertical-align: top;
font-size: medium;
}
td.pical-calendar-daily-cr img, td.pical-calendar-daily-cl img {
border: 0px;
}
.pical-calendar-daily-crdesc {
font-size: small;
}
td.pical-calendar-daily-insert { /* insert event */
padding-top: 15px;
vertical-align: bottom;
font-size: small;
}
td.pical-calendar-daily-insert img {
border: 0px;
width: 14px;
height: 12px;
}
/******* FIN CALENDAR DAILY *******/
Actuellement tout est dans le fichier style(NN).css du thème de mon site de test.
Il y a encore un petit soucis avec la normes W3C sur le mode de vue hebdomadaire... des id identiques, va falloir que je me penche dessus correctement.
En attendant, je vais vous donner le site pour faire des petits tests avec firefox et webdeveloper :
-> Module PiCal - tester les vues journalière/hebdo/annuelle
Je n'ai pas touché aux colories de base du module, mais ce hack offre les avantages du précédent avec la possibilité de custom via css... ainsi son apparence pourra changer dynamiquement en fonction du thème utilisé et non plus en fonction de la base de données qui rendait les couleurs statiques.
Le travail est plus long que prévue donc j'espère qu'il sera prêt fin de la semaine prochaine.
Si vous êtes intéressés ou si vous avez des remarques et autres, n'hésitez pas.
A bientôt et bon test 
|
|
