PEAK XOOPS - My evolution - Interested????? in englishin japanese

Top > XOOPS Modules >piCal >My evolution - Interested?????

My evolution - Interested?????

List posts in the topic

question My evolution - Interested?????

msg# 1
depth:
0
Previous post - Next post | Parent - Children.1 .2 .3 | Posted on 2006/5/13 4:47
PinMaster  上等兵 From: Marseille (France)  Posts: 40
Hello, currently I work on an evolution of the PiCal module... and I acknowledge, that certain parts are not so obvious, that that.

The goal of this evolution is to be able to make more flexible the appearance of PiCal following various theme from a single site. It primarily carries on the extraction of all working made into hard through functions present in the file pical.php.
Thus, one can have a file css which will occupy all that with the place of the data base.

To have a fast idea of it, you can go on my site of test (click-here), with firefox and its WebDeveloper extension to dynamically modify the appearance of the views: sight day labourer, weekly sight (not conformity W3C for the moment), seen annual (not finished).

-> daily.tmpl.html
<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>
The function which turns over the variable is modified consequently.

-> The code css :
/******* CATEGORY FORM *******/
table.pical-categoryform {
	table-layout:fixed;
	width: 100%;
	text-align: center;
	border: 0px;
	white-space:nowrap;
	background-color:#CCFFCC;
}
td.pical-categoryform-nav {
	width: 18px;
	vertical-align: middle;
}
td.pical-categoryform-nav img {
	border:0px;
	width: 18px;
	height: 14px;
}
td.pical-categoryform-selform {
	text-align: center;
	vertical-align: middle;
}
td.pical-categoryform-spacer, td.pical-categoryform-spacer img {	/*spacer img for separate selectform and title */
	width: 8px;
	height: 4px;
}
td.pical-categoryform-title {
	width: 200px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-size: large;
	font-weight: bold;
	color: #009900;
}
td.pical-categoryform-title .calhead-day {
	color: #000066;
	font-size: small;
}
td.pical-categoryform-title img {	/*spacer img for center title */
	width: 200px;
	height: 4px;
}
td.pical-categoryform-smode {
	text-align: right;
	vertical-align: middle;
}
td.pical-categoryform-smode img {
	border: 0px;
	width: 30px;
	height: 24px;
}
/******* FIN CATEGORY FORM *******/

/******* 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 *******/

/******* CALENDAR WEEKLY *******/
table.pical-calendar-weekly {
	width: 98%;
	border: 0px;
	border-collapse: collapse;
	margin: 10px;
}
td.pical-calendar-weekly-cday {
	width: 100px;
	height: 80px;
	border: solid 1px green;
	text-align: center;
	vertical-align: middle;
	font-size: medium;
	font-weight: bold;
}
td.pical-calendar-weekly-cevent {
	border: solid 1px green;
	vertical-align: top;
}
td.pical-calendar-weekly-cevent table {
	width: 100%;
	border: 0px;
	border-spacing: 2px;
}
td.pical-calendar-weekly-cevent td.event-time {
	width: 120px;
	vertical-align: top;
	text-align: center;
}
td.pical-calendar-weekly-cevent td.event-time pre {
	margin: 0px;
	font-size: small;
}
td.pical-calendar-weekly-cevent td.event-desc {
	vertical-align:top;
	font-size: small;
}
td.pical-calendar-weekly-cevent td.event-insert {
	vertical-align: bottom;
	font-size: small;
}
td.pical-calendar-weekly-cevent td.event-insert img {
	border: 0;
	width: 14px;
	height: 12px;
}
#pical-day-holiday, #pical-day-holiday span {
	background-color: #FFEEEE;
	color: #CC0000;
}
#pical-day-sunday, #pical-day-sunday span {
	background-color: #FFEEEE;
	color: #CC0000;
}
#pical-day-saturday, #pical-day-saturday span {
	background-color: #EEF7FF;
	color: #0000FF;
}
#pical-day-weekday, #pical-day-weekday span {
	background-color: #FFFFFF;
	color: #000066;
}
#pical-day-selectday {
	background-color: #CCFF99;
}
/******* FIN CALENDAR WEEKLY *******/

/******* CALENDAR MONTHLY *******/
/******* FIN CALENDAR MONTHLY *******/

/******* CALENDAR YEARLY *******/
table.pical-calendar-yearly {
	width: 98%;
	border-collapse: collapse;
	margin: 10px;
}
table.pical-calendar-yearly table.yearly-month {
	width: 150px;
	line-height: normal;
	margin: auto;
}
table.pical-calendar-yearly img {
	width: 4px;
	height: 10px;
}
/******* FIN CALENDAR YEARLY *******/

#pical_calendar_body {
	width: 100%;
	border-collapse: collapse;
	margin:0px;
}
#pical_calendar_copyright { text-align: right; margin: 2px;}
#pical_calendar_print { text-align: right; margin: 2px;}

Original Subject : on the frxoops.org
Interested by this version ?

------------ French Version / traduit par babelfish--------
Bonjour, actuellement je travaille sur une évolution du module PiCal... et j'avoue, que certaines parties ne sont pas si évidentes, que ça.

Le but de cette évolution est de pouvoir rendre plus souple l'apparence du PiCal suivant différents thèmes d'un seul et même site.
Elle porte essentiellement sur l'extraction de tout la mise en forme faite en dur au travers des fonctions présentes dans le fichier pical.php.
Ainsi, on peut avoir un fichier css qui gérera tout cela à la place de la base de données.

Pour en avoir une idée rapide, vous pouvez aller sur mon site de test (cliquez-ici), avec firefox et son extension WebDeveloper pour modifier dynamiquement l'apparence des modes d'affichage : vue journalière, vue hebdomadaire (non conforme W3C pour l'instant), vue annuelle (pas fini).
-------------------------------------
Votes:21 Average:4.76

Posts tree

  Advanced search

Login
Username or e-mail:

Password:

Remember Me

Lost Password?

Register now!