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  Lance Corporal 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!