Fork me on GitHub




(1) 2 »


piCal plus souple avec un thème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
J'estime que ce module est le meilleur des calendriers pour xoops, mais hélas il n'est pas très "smarty" et implique bien souvent d'allez dans le code source pour l'adapter à son thème. Ce que j'ai dû faire, et comme cette modification pourrait en intérressé quelques uns, je vais vous le mettre ici.

Déjà, je me suis appuyé sur la version 0.85a et ma modification c'est portée sur le redimensionnement de certaines pages générées par ce module.

Voici une liste des fichiers modifiés :
-> piCal/class/pical.php
---------> Fonction modifiée : get_daily_html, get_monthly_html, y en a peut être une autre mais là j'avoue je l'ai oublié ^^
-> piCal/images/default/daily.tmpl.html
-> piCal/images/default/weekly.tmpl.html
-> piCal/images/default/monthly.tmpl.html
-> piCal/images/default/yearly.tmpl.html
-> piCal/templates/pical_event_list.html

Une fois la mise à jour faites, il vous faudra rajouter dans une feuille de style, le code suivant :
/* Calendrier PiCal */
.pical-categoryform {
    
width100%;
    
border0px;
}
#pical_calendar_body {
    
width100%;
    
border-collapsecollapse;
    
margin:0px;
}
#pical_calendar_copyright { text-align: right; margin: 2px;}
#pical_calendar_print { text-align: right; margin: 2px;}

#pical_monthly {
    
width100%;
    
margin0px;
    
margin-top10px;
    
border0px;
    
border-collapsecollapse;
}
#pical_monthly .calbody img { /* Dimension minimale pour une cellule */
    
width70px;
    
height70px;
}
#pical_weekly {

}
#pical_daily {
    
width100%;
    
margin0px;
    
border0px;
}
#pical_daily table {
    
width100%;
    
margin0px;
    
border0px;
}
#pical_calendar_selectday {
    
width100%;
    
border0px;
    
text-aligncenter;
}

Ce code CSS peut être mis en fonction de votre choix :
-> dans le CSS de votre thème
-> dans le CSS présent dans "piCal/images/default/style.css"
Moi j'ai préféré le mettre dans le CSS de mon thème.

Voilà donc pour sa présentation, il ne vous reste plus qu'à prendre la dernière mise à jour de piCal (voir plus haut) et de récupérer mon petit fichier (par mesure de sécurité, j'ai compressé le dossier piCal au complet comme ça rien ne manque ^^).
Euh, il manque encore mon petit fichier : piCal-0_8dim.zip

Pour voir ce que ça peut donner sur un thème tout en div, je vous conseille d'aller faire un petit tour sur le site de test : http://kernchr.free.fr/LiPom/modules/piCal/
Avec firefox, si vous dépassez la résolution 1024x768 là agrandissez et réduisez la fenêtre... le contenu s'adapte êt il est centré ^^.

Posté le : 25/02/2006 16:07
Partager Twitter Partagez cette article sur GG+
PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
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}&amp;smode=Daily&amp;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}&amp;smode=Daily&amp;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}&amp;smode=Daily&amp;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}&amp;smode=Daily&amp;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}&amp;smode=Yearly&amp;caldate={CALDATE}'><img src='{SKINPATH}/year_on.gif' alt='{ICON_YEARLY}' title='{ICON_YEARLY}' /></a>
         <
a href='{GET_TARGET}?cid={CID}&amp;smode=Monthly&amp;caldate={CALDATE}'><img src='{SKINPATH}/month_on.gif' alt='{ICON_MONTHLY}' title='{ICON_MONTHLY}' /></a>
         <
a href='{GET_TARGET}?cid={CID}&amp;smode=Weekly&amp;caldate={CALDATE}'><img src='{SKINPATH}/week_on.gif' alt='{ICON_WEEKLY}' title='{ICON_WEEKLY}' /></a>
         <
a href='{GET_TARGET}?cid={CID}&amp;smode=List&amp;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}&amp;smode=Daily&amp;{QUERY_STRING}' method='post'>
          {
YMD_SELECTS}
          <
input type='submit' name='pical_jumpcaldate' value='{LANG_JUMP}'>
          &
nbsp
          <
a href='{GET_TARGET}?cid={CID}&amp;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 {
    
width98%;
    
height350px;
    
margin10px;
    
bordersolid 1px green;
    
border-collapsecollapse;
    
border-spacing0px;
    
background-color:white;
}
table.pical-calendar-daily-list {
    
width100%;
    
border0px;
    
border-collapsecollapse;
    
border-spacing0px;
}
td.pical-calendar-daily-cl {        /* time colonne*/
    
width21%;
    
padding-top10px;
    
vertical-aligntop;
    
text-aligncenter;
}
td.pical-calendar-daily-cl pre {    /* time format*/
    
margin0px;
    
font-sizemedium;
}
td.pical-calendar-daily-cr {        /* event desciption */
    
width79%;
    
padding-top10px;
    
vertical-aligntop;
    
font-sizemedium;
}
td.pical-calendar-daily-cr imgtd.pical-calendar-daily-cl img {
    
border0px;
}
.
pical-calendar-daily-crdesc {
    
font-sizesmall;
}
td.pical-calendar-daily-insert {    /* insert event */
    
padding-top15px;
    
vertical-alignbottom;
    
font-sizesmall;
}
td.pical-calendar-daily-insert img {
    
border0px;
    
width14px;
    
height12px;
}
/******* 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

Posté le : 12/05/2006 11:33
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
WE un peu très court pour moi... donc seul chose de faite est la mise en conformité W3C du mode d'affichage hebdommadaire et correction d'une petite erreur que j'avais pas remarqué...

A part ça rien de plus...

Posté le : 14/05/2006 20:31
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Petit état d'avancement :
-> vue annuelle : OK + W3C
-> vue hebdo : OK + W3C
-> vue journalière : OK + W3C
-> vue mensuelle : OK + W3C.... cette vue m'a réellement rendu fou... j'ai tourné en rond pour une option qui est peu utiliser.

La version actuelle, diffusé sur le site de test, comporte toutes mes modifications et hack que j'ai pu créer.

Côté modification des fichiers :
-> piCal/include/read_configs.php : prise en compte du lien thème + skin
-> piCal/class/pical.php : plusieurs fonctions ont été modifiées (et ce n'est pas encore fini, va falloir que j'améliore quelques trucs)
-> piCal/images/nomduskin : moultes fichiers
----> minical.tmpl
----> minical_for_monthly.tmpl
----> minical_for_yearly.tmpl
----> monthly.tmpl
----> yearly.tmpl
----> weekly.tmpl
----> daily.tmpl
----> création du fichier minical.css, utilisé par le block minicalendar classique
----> création du fichier pical.css, non pris en charge pour le moment car tout passe par le css du theme

Ce qu'il me reste à faire en priorité est la prise en compte d'un fichier pical.css, de modifier le block minicalendar_ex...

Pour les autres templates, je pense que l'on doit pouvoir les modifier uniquement via leur template.

Voilà, bon il faud que je corrige des petits trucs côté css sinon il y a risque de petit bugs d'affichage... je l'ai vue depuis peu sur mon site de test (3themes sélectionnables)

PS : bientôt je preparais mon site de test comme il faut pour montrer ce que pourra faire ma modif

Posté le : 24/05/2006 15:50
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Semi pro
Inscrit: 25/08/2005 22:51
De Aix les bains
Messages: 1270
Merci pour cette version de Pical !

Je m'arrachais les cheveux depuis ce matin pour tenter de modifier les templates et faire tenir en largeur le module dans mon theme et j'ai finalement pu résoudre ca en un instant grace à ce fichier.

Merci encore

Posté le : 11/06/2006 18:26

Mieux vaut marcher dans la bonne direction que courir dans la mauvaise.
----------------------------------------
www.68hc08.net la communauté francophone.
www.avironroannelecoteau.net (créé mais plus exploité)
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
J'informe juste que je vient de reprendre mes modifications sur piCal. Il offrira les options suivantes :
-> chemin de skins en fonction du thème sélectionné
-> Mode CSS OFF : fonctionnement standard
-> Mode CSS ON : les pages générées utiliseront un fichier css. Avec trois mode de fonctionnement :
----> CSS présent dans le dossier skin
----> CSS présent dans le dossier du thème courant
----> CSS intégré dans celui du thème courant

Il offrira aussi, toutes les petites améliorations et correctifs que j'ai pu apporté mais aussi trouvé ici même (dont la traduction de svn). Si vous avez des idées d'ajouts et autres n'hésitez pas

Cette version est encore en développement et n'est présent que sur mon petit dd.

Voici une liste récapitulatif des fichiers actuellement modifiés et/ou créés :
-> xoops_version.php
-> index.php
-> blocks/pical_minical_ex.php (debugger + retro-compatibilité)
-> class/piCal_xoops.php (modifié : get_minical_ex(...) -> ajout de la variable $daytype)
-> class/piCal.php (modifié : ajout de la variable $skin_css, get_mini_calendar_html(...) -> ajout var $typeofday et test sur $skin_css, get_monthly_html(...) -> ajout test sur $skin_css, get_weekly_html() -> ajout test sur $skin_css, get_monthly(...) -> ajout test sur skin_css, get_weekly(...) -> ajout test sur skin_css, get_yearly(...) -> ajout test sur skin_css, get_daily(...) -> ajout test sur skin_css, création de la fonction get_css_file(...), extension de la fonction get_embed_css())
-> images/default/pical.css (créé)
-> images/default/pical_block.css (créé)
-> images/default/minical_css.tmpl.html (créé)
-> images/default/minical_for_monthly_css.tmpl.html (créé)
-> images/default/monthly_css.tmpl.html (créé)
-> images/default/yearly_css.tmpl.html (créé)
-> images/default/minical_for_yearly_css.tmpl.html (créé)
-> images/default/weekly_css.tmpl.html (créé)
-> images/default/daily_css.tmpl.html (créé)
-> include/read_configs.php (modifié)
-> include/preferences.inc.php (modifié, ajout de la gestion du mode css)
-> templates/blocks/pical_minical_ex.html (modifié ajout test sur skin_css et choix possible entre deux tables dans le même fichier)
-> blocks/pical_cssmode_hook.php (créé, block d'injection de css)
-> class/pical_cssmode.class.php (créé, class d'injection de css)

---- Correctif de francais par svn (http://avid.forum.free.fr/xs/)
-> language/french/admin.php
-> language/french/modinfo.php (ajout bloc css_mode)
-> language/french/blocks.php
-> language/french/main.php
-> language/french/pical_constant.php
-> language/french/pical_vars.php
-> language/french/mail_template/global_newevent_notify.tpl
-> language/french/mail_template/category_newevent_notify.tppl
-> locales/france.php

---- Correctif pour adapation xoops 2.0.14FR
-> pical_minical_ex.php (debugger + retro-compatibilité)
-> pluginsmanager.php (debugger)
-> myblocksadmin.php (debugger + retro-compatibilité)

A bientôt.

Posté le : 26/07/2006 11:45
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Je continue l'info :
-> intégration du choix du type d'éditeur (prise en charge des éditeurs utilisés par cbb 3.x sous xoops 2.0.x)
-> modification du template dédié au détail d'un événement, le tableau n'est plus généré en dur mais via un template. Ce template est actif qu'en mode css.

PS : ces travaux ce basent sur la dernière boutture de piCal qui est la version 0.87a.

Posté le : 30/07/2006 00:08
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Régulier
Inscrit: 26/04/2003 01:09
De Geneve - Suisse
Messages: 129
juste un mot, pour notifications...

Posté le : 05/08/2006 00:46

"Le Maitre revèle l'Art et les Disciples font des Merveilles!"
http://xoopscube.org
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Semi pro
Inscrit: 13/02/2006 17:40
De Belgique
Messages: 812
Pinmaster,

Serait-ce abuser que de te demander ton fichier corrigé ?
Je n'arrive pas !

Cela me permettrait de voir en comparaison, les modifs que tu as faites !

Merci

Cordialement

Johann *

Posté le : 14/09/2006 17:38
Partager Twitter Partagez cette article sur GG+
Re: PiCal deviendra multithème
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Fichier corrigé ?????

Enfin, ce sujet est à l'origine de ma version spécial de piCal avec tous les correctifs possibles et autres joyeusetés...
Je te conseille de lire ce sujet : piCal 0.88a modifié, recherche testeur et avis

Posté le : 14/09/2006 19:02

Membre de L'association des Ingénieurs de Polytech'Marseille : www.lipom.org (webmestre du site, ajout du Mode CSS íƒÂ  piCal)
Un autre site : general.fred.free.fr/index.php
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »




Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

30 Personne(s) en ligne (25 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 30 | Plus ...