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

My evolution - Interested?????

  • You cannot open a new topic into this forum
  • Guests cannot post into this forum
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 diffrents thmes d'un seul et mme site.
Elle porte essentiellement sur l'extraction de tout la mise en forme faite en dur au travers des fonctions prsentes dans le fichier pical.php.
Ainsi, on peut avoir un fichier css qui grera tout cela la place de la base de donnes.

Pour en avoir une ide 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 journalire, vue hebdomadaire (non conforme W3C pour l'instant), vue annuelle (pas fini).
-------------------------------------
Votes:21 Average:4.76
Previous post - Next post | Parent - Children.1 | Posted on 2006/5/13 6:53
GIJOE  Ǥ   Posts: 4110
hi PinMaster.

It sounds marvelous work

If you want to apply your css into blocks etc, try to include mycssadmin.

http://good-tea.ddo.jp/dev/modules/mydownloads/singlefile.php?lid=4

Votes:21 Average:4.76
Previous post - Next post | Parent - Children.1 | Posted on 2006/6/7 23:30
PinMaster  ʼ From: Marseille (France)  Posts: 40
I sought another solution and I note that your proposal is much better.
However, the module cssadmin and your extension mycssadmin for pical have a bug (easyphp1.8 + Win XP) with $mod_url.
Here my small correction :
-> going to line 41 :
$mod_url = ( str_replace($xoops_root_path, XOOPS_URL, strtr($mod_replace_path, '\\', '/')) );
$mod_name = basename(dirname(dirname(__FILE__)));
-> replace by :
//$mod_url = ( str_replace($xoops_root_path, XOOPS_URL, strtr($mod_replace_path, '\\', '/')) );
$mod_name = basename(dirname(dirname(__FILE__)));
$mod_url = XOOPS_URL.'/modules/'.$mod_name;

(vive google^^)
Votes:18 Average:3.89
Previous post - Next post | Parent - Children.1 | Posted on 2006/6/8 3:43
GIJOE  Ǥ   Posts: 4110
Thank you PinMaster.
I've just told it to gusagi.
Votes:21 Average:5.24
Previous post - Next post | Parent - Children.1 | Posted on 2006/7/26 18:29
PinMaster  ʼ From: Marseille (France)  Posts: 40
I inform just that I has just taken again my modifications on piCal. It will offer the following options:
-> way of skins according to the selected theme
-> Mode CSS OFF: standard operation
-> Mode CSS ON: the generated pages will use a file css. With three operating mode:
----> CSS is in the file skin
----> CSS is in the file of the current topic
----> CSS integrated in that of the current topic

Here for the small summary.



------------------------------ french -------------------------
J'informe juste que je vient de reprendre mes modifications sur piCal. Il offrira les options suivantes :
-> chemin de skins en fonction du thme slectionn
-> Mode CSS OFF : fonctionnement standard
-> Mode CSS ON : les pages gnres utiliseront un fichier css. Avec trois mode de fonctionnement :
----> CSS prsent dans le dossier skin
----> CSS prsent dans le dossier du thme courant
----> CSS intgr dans celui du thme courant
Votes:23 Average:3.91
Previous post - Next post | Parent - No child | Posted on 2006/7/30 7:19
PinMaster  ʼ From: Marseille (France)  Posts: 40
Adding information:
-> integration of the choice of the type of editor (dealt with of the editors used by cbb 3.x under xoops 2.0.x)
-> modification of the template dedicated to the detail of an event, the table is not generated any more into hard but via a template. This template is active that in css mode.

View source of template :
-> pical_event_detail.html
<{$detail_body}>

<div style="text-align: right; padding: 0px; margin: 0px;">
  <a href="<{$print_link}>" target="_blank"><img src="<{$skinpath}>/print.gif" alt="<{$lang_print}>" title="<{$lang_print}>" border="0" /></a>
</div>

<div style="text-align: center; padding: 3px; margin: 3px;">
  <{$commentsnav}>
  <{$lang_notice}>
</div>

<div style="margin: 3px; padding: 3px;">
<!-- start comments loop -->
<{if $comment_mode == "flat"}>
  <{include file="db:system_comments_flat.html"}>
<{elseif $comment_mode == "thread"}>
  <{include file="db:system_comments_thread.html"}>

<{elseif $comment_mode == "nest"}>
  <{include file="db:system_comments_nest.html"}>
<{/if}>
<!-- end comments loop -->
</div>

<{include file='db:system_notification_select.html'}>
-> pical_event_detail_css.html (for css mode)
<div id='pical_calendar_body' class='calframe'>
<h2><{$legend_detail.title}> <small>-<{$legend_detail.subtitle}>-</small></h2>
<table cellspacing='2'>
	<tr>
		<td class='head'><{$legend_detail.summary}></td>
		<td class='even'><{$value_detail.summary}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.startdatetime}></td>
		<td class='even'><{$value_detail.start_datetime}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.enddatetime}></td>
		<td class='even'><{$value_detail.end_datetime}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.location}></td>
		<td class='even'><{$value_detail.location}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.contact}></td>
		<td class='even'><{$value_detail.contact}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.description}></td>
		<td class='even'><{$value_detail.description}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.categories}></td>
		<td class='even'><{$value_detail.categories}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.submitter}></td>
		<td class='even'><{$value_detail.submitter}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.class}></td>
		<td class='even'><{$value_detail.class}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.rrule}></td>
		<td class='even'><{$value_detail.rrule}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.admissionstatus}></td>
		<td class='even'><{$value_detail.admission_status}></td>
	</tr>
	<tr>
		<td class='head'><{$legend_detail.lastmodified}></td>
		<td class='even'><{$value_detail.last_modified}></td>
	</tr>
	<tr>
		<td colspan="2" align='center'>
			<div style='display: block;'><div style='float:left;margin: 2px;'><{$button.edit_button}></div>
			<div style='float:left;margin: 2px;'><{$button.delete_button}></div>
			<div style='float:left;margin: 2px;'><{$button.ics_button}></div></div>
		</td>
	</tr>
</table>

<div id='pical_calendar_copyright'><{$pical_copyright}></div>
<{if $for_print <> true}>
<div id='pical_calendar_print'><a href="<{$print_link}>" target="_blank"><img src="<{$skinpath}>/print.gif" alt="<{$lang_print}>" title="<{$lang_print}>" /></a></div>
<{/if}>
</div>

<div style="text-align: center; padding: 3px; margin: 3px;">
  <{$commentsnav}>
  <{$lang_notice}>
</div>
<div style="margin: 3px; padding: 3px;">
<!-- start comments loop -->
<{if $comment_mode == "flat"}>
  <{include file="db:system_comments_flat.html"}>
<{elseif $comment_mode == "thread"}>
  <{include file="db:system_comments_thread.html"}>

<{elseif $comment_mode == "nest"}>
  <{include file="db:system_comments_nest.html"}>
<{/if}>
<!-- end comments loop -->
</div>

<{include file='db:system_notification_select.html'}>

Votes:27 Average:4.07
Previous post - Next post | Parent - Children.1 | Posted on 2006/8/5 6:44
gigamaster  From: Geneva, Switzerland  Posts: 94
Hi PinMaster,

That's really a great improvement to pical GUI!
I'll reply in french on FRXoops site.

Best Reagards,


Votes:25 Average:5.20
Previous post - Next post | Parent - Children.1 | Posted on 2006/8/15 5:05
PinMaster  ʼ From: Marseille (France)  Posts: 40
Here my alpha2 version of my evolution : pical_087a_css_Alpha2.zip

- > One can dependent a theme on a skin, the way of the skin varies according to the theme used
- > an amelioration of the function dedicated to the injection of css with the catch in dependent of the navigator
- > Correction of mini calendar minical_ex under xoops 2.0.14
- > Correction of the manager of block of piCal, taken into account of xoops 2.0.14 and former version.
- > Choice of the editor type, no modification to make if you use cbb 3.x with xoops 2.0.x.
- > Installation of mode CSS:
-------> Mode CSS OFF: standard operation
-------> Mode CSS ONE: the generated pages will use a file css. With three operating modes:
-------------> CSS present in the file skin
-------------> CSS present in the file of the current theme
-------------> CSS integrated in that of the current theme
- > Correction of the width of the schedules for weekly and daily.
- > Optimization of display for Monthly, weekly, daily. Use of balise dedicated to the lists (<ul>,<li>,<dl>,...) and suppression of that dedicated to the tables with an identical display.

It will be necessary to translate the following lines and added in the file "modinfo.php" this finding in the directory . "language/..."
Quote:
---- Variable traduire prsente dans le fichier modinfo.php (dossier language)
// Title of config items
define("_MI_SKINFOLDER", "Nom des chemins de skin");
define("_MI_DESCSKINFOLDER", "Mettre la valeur '{theme}' pour crer un lien avec le thme courant.");
define("_MI_SKINCSS", "Mode CSS");
define("_MI_DESCSKINCSS", "Le mode 'CSS OFF' est le fonctionnement classique du module. Le mode 'CSS ON' permet au module de s'appuyer sur une feuille de style pour faciliter son intgration sur divers sites.");
define ("_MI_PICAL_WYSIWYG", "Type d'diteur");
define ("_MI_PICAL_WYSIWYGDESC", "Slectionner le type d'diteur que vous dsirez utiliser. Attention : tout autre diteur que XoopsEditor doit tre install sur votre site.");

// Options of each config items
define("_MI_OPT_CSSOFF", "CSS OFF (mode standard)");
define("_MI_OPT_CSSON_SKIN", "CSS ON (css prsent dans le dossier skin)");
define("_MI_OPT_CSSON_THEME", "CSS ON (css prsent dans le dossier du thme)");
define("_MI_OPT_CSSON_INCTHEME", "CSS ON (css intgr dans celui du thme courant)");

// Names of blocks for this module (Not all module has blocks)
define("_MI_PICAL_CSSMODEHOOK", "Bloc - Mode CSS");
define("_MI_PICAL_CSSMODEHOOK_DESC","Permets de mettre en en-tte les feuilles de style lies aux blocs, en fonction du mode slectionn dans les prfrences du module. Ce bloc reste invisible.");

// Template description type
define ("_MI_PICAL_TEMPLATE_CSSOFF1", "Template utilis en fonctionnement normal, CSS OFF");
define ("_MI_PICAL_TEMPLATE_CSSOFF2", "Template du block utilis en fonctionnement normal, CSS OFF");
define ("_MI_PICAL_TEMPLATE_CSSON1", "Template utilis quand le mode CCS est activ");
define ("_MI_PICAL_TEMPLATE_CSSON2", "Template du block utilis quand le mode CCS est activ");

I seek testers and opinions.

PS: sorry for my english (google).
Votes:2 Average:0.00
Previous post - Next post | Parent - Children.1 | Posted on 2006/8/23 18:26
PinMaster  ʼ From: Marseille (France)  Posts: 40
I use this version on the site: www.lipom.org

-> theme : default
-> css mode : enabled on skin directory
-> using wysiwig : inbetween
Votes:7 Average:4.29
Previous post - Next post | Parent - Children.1 | Posted on 2006/8/25 3:20
PinMaster  ʼ From: Marseille (France)  Posts: 40
Here, my last version of piCal CSS:
- > fix a bug related to the loading of a style sheet for the blocks
- > piCal CSS in version 0.88a

Here the link of download: pical_088a_css_Alpha3.zip

Version put on the site of lipom.
So long.
Votes:2 Average:0.00
Previous post - Next post | Parent - No child | Posted on 2006/8/30 17:25
gigamaster  From: Geneva, Switzerland  Posts: 94
Thanks again, merci !
Hope this may be added to next release.

Votes:0 Average:0.00
Previous post - Next post | Parent - Children.1 | Posted on 2006/9/19 22:48
PinMaster  ʼ From: Marseille (France)  Posts: 40
This version is compatible full xoops version (2.0.14 xoops.org).

-> Add support wisywig with choice editor (piCal preference), no modification to make if you use cbb 3.x with xoops 2.0.x.
-> way of skins according to the selected theme
-> Mode CSS OFF: standard operation (fix error W3C)
-> Mode CSS ON: the generated pages will use a file css. (CSS and generated page optimized). With three operating mode:
----> CSS is in the file skin (/piCal/images/skinfolder/)
----> CSS is in the file of the current topic (/themes/yourtheme/piCal)
----> CSS integrated in that of the current topic
-> Fix minicalendar_ex for xoops 2.0.14 + (xoops.org)
-> Fix managed block for xoops 2.0.14 + (xoops.org)
As a recall.

See the page genereted : lipom
Download beta : pical_088a_css_Beta1.zip

More info : See subject of frxoops.org
Votes:3 Average:3.33
Previous post - Next post | Parent - No child | Posted on 2006/11/3 21:34
www.gemtech.info  ʼ   Posts: 7
Since you work with the source, have you been able to change or add fields when you create a new event?


Votes:5 Average:8.00

  Advanced search


Login
Username or e-mail:

Password:

Remember Me

Lost Password?

Register now!