Fork me on GitHub






css piCal !
Régulier
Inscrit: 09/09/2005 23:49
Messages: 297
Bonjour,

Beaucoup de monde a travaillé sur des morceaux de ce module, mais après avoir lu de nombreux posts, je n'ai pas trouvé de version définitive sur la liaison CSS de ce module ?
ci-joint mon mini calendar pour voir qu'il n'est pas centré dans la colonne de gauche ou alors qu'il n'est pas de la bonne largeur ?!
Dans le dédale des templates de ce module, y'a t-il un endroit précis où contrôler cela ?
D'autre part, dans le bloc juste au dessus des évènements à venir, j'aurai aimé changer la couleur du mois qui est en noir (donc quasi invisible).
Dernier point, peut-on rajouter une lettre à l'abréviation du mois, genre JUIL au lieu de JUI qui peut être confondu avec juin ?
Oh, j'avais oublié, on ne peut visiblement pas imposer une couleur précise pour situer les évènement dans le minicalendar, par défaut il sont timidement soulignés, pas terrible !!?
D'avance merci...


module piCal (colonne gauche)

Posté le : 05/06/2006 15:28
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Je te conseille la lecture de ce post :
PiCal plus souple avec le thème -- Pical deviendra multitheme

Maintenant pour avoir une belle version finalisé, va falloir attendre un peu car en ce moment j'oscille entre pas de temps et manque de motivation.

Pour ce qui est de ton soucis du mois Jui ---> Juil, lit bien ce post : Pical version française

Posté le : 05/06/2006 16:12
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Régulier
Inscrit: 09/09/2005 23:49
Messages: 297
Merci pour la réponse rapide !
Cependant à moind de ma tromper, je ne vois pas dans ton travail de feuille de style concernant le minicalendar mais uniquement le calendrier principal du bloc central ?
Pas d'infos sur le centrage ou largeur du tableau ?
Et je n'ai pas trouvé dans ton deuxième lien des éléments concernants l'ortographe des abréviation de mois, normalement cela devrait se trouver dans le dossier "language" ?

Posté le : 05/06/2006 17:02
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Sur mon site de test, on peut voir que mes travaux touchent aussi les block de PiCal (minical et minical_ex).

Je te conseille de bien lire les deux post que je t'ai donné, tu y trouvera les infos voulu... mais il faud lire et comprendre, enfin comprendre... lit pas vite ^^

Demain je prendrai un peu de temps pour te donner une réponse satisfaisante côté apparence du block minical.

Maintenant, PiCal est très très bien... cependant il a un fonctionnement assez spécial côté template.

Posté le : 05/06/2006 23:06
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Moi qui allez me pencher sur ton problème, je constate que t'as résolu ton problème avec un autre module.

Donc j'arrête de suite...

Posté le : 06/06/2006 16:37
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Régulier
Inscrit: 09/09/2005 23:49
Messages: 297
Non je viens juste d'interchanger avec ce module très incomplet mais PiCal reste le plus intéressant pour moi !
Simplement je dois livrer le site demain au client et en attendant une solution plus aboutie de PiCal, je viens d'opter pour AM EVENTS et qui me dépanne dans l'urgence !
Mais de toute façon j'aimerai bien utiliser PiCal dans bien d'autres site avec une correSpondance CSS...
Merci pour ton soutien.

Posté le : 07/06/2006 14:45
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Bon alors voici une infime partie du travail que j'effectue sur piCal, celà devrait te donner de quoi personnaliser le minicalendrier.

Voici la marche à suivre :
-> Ouvrir le fichier minical.tmpl.html (dans le dossier images/default de piCal)
-> Remplacer tout le code par :
<pattemplate:tmpl name="WholeBoard">
<
link rel="stylesheet" type="text/css" href="{SKINPATH}/minical.css" />

<
table class='minical'>
<!-- 
header part -->
<
tr>
  <
th nowrap='nowrap' colspan='7'><a href='{GET_TARGET}?caldate={PREV_MONTH}'><img src='{SKINPATH}/miniarrowleft.gif' alt='{MB_PREV_MONTH}' title='{MB_PREV_MONTH}' /></a>{YEAR_MONTH_TITLE}<a href='{GET_TARGET}?caldate={NEXT_MONTH}'><img src='{SKINPATH}/miniarrowright.gif' alt='{MB_NEXT_MONTH}' title='{MB_NEXT_MONTH}' /></a></th>
</
tr>

<
tr>
  <!-- 
day name loop -->
  <
pattemplate:tmpl name="DayNameLoop">
  <
td class='{TYPEOFDAY}'>{DAYNAME}</td>
  </
pattemplate:tmpl>
</
tr>

<!-- 
weekly loop -->
<
pattemplate:tmpl name="WeekLoop">
<
tr>
  <!-- 
daily loop -->
  <
pattemplate:tmpl name="DailyLoop" type="condition" conditionvar="DATE_TYPE">
    <
pattemplate:sub condition="0">
      <
td><img src='{SKINPATH}/spacer.gif' alt='' class='spacer-day' /></td>
    </
pattemplate:sub>
    <
pattemplate:sub condition="1">
      <
td class='{TYPEOFDAY}'><a href='{GET_TARGET}?caldate={LINK}&amp;{QUERY_STRING}'>{DATE}</a></td>
    </
pattemplate:sub>
    <
pattemplate:sub condition="default">
      <
td class='{TYPEOFDAY}'><a href='{GET_TARGET}?caldate={LINK}&amp;{QUERY_STRING}'><span class='event-day'>{DATE}</span></a></td>
    </
pattemplate:sub>
  </
pattemplate:tmpl>
</
tr>
</
pattemplate:tmpl>

<
tr>
  <
td colspan='7' class='add-linktoday'><a href='{GET_TARGET}' class='calfoot'>{MB_LINKTODAY}</a></td>
</
tr>
</
table>

</
pattemplate:tmpl>

-> créer un fichier minical.css dans le même dossier et mettre ceci :
/******* MINI CALENDAR *******/
table.minical {
    
width100%;
    
line-heightnormal;
    
marginauto;
    
border-collapsecollapse;
    
border0px;
    
background-colorwhite;
}
table.minical th {
    
padding0px;
    
vertical-alignmiddle;
    
text-aligncenter;
    
font-sizesmall;
    
color#009900;
    
background-color:#CCFFCC;
}
table.minical th img {
    
width18px;
    
height14px;
    
border0px;
    
vertical-aligntop;
}
table.minical td {
    
text-aligncenter;
    
font-sizesmall;
}
table.minical td.weekday-name {
    
color#000066;
}
table.minical td.weekday-name-sunday {
    
color#cc0000;
}
table.minical td.weekday-name-saturday {
    
color#0000ff;
}
table.minical td.spacer-day {
    
width20px;
    
height12px;
}
table.minical td.weekdaytable.minical td.weekday a {
    
background-color#ffffff;
    
color#000066;
}
table.minical td.weekday-sundaytable.minical td.weekday-sunday a  {
    
background-color#ffeeee;
    
color#cc0000;
}
table.minical td.weekday-saturdaytable.minical td.weekday-saturday a  {
    
background-color#eef7ff;
    
color#0000ff;
}
table.minical td.weekday-holidaytable.minical td.weekday-holiday a  {
    
background-color#ffeeee;
    
color#cc0000;
}
table.minical td span.event-day {
    
text-decoration:underline;
}
table.minical td.add-linktoday {
    
text-aligncenter;
    
vertical-alignmiddle;
}


Après il ne te restera plus qu'à faire mumuse avec la feuille de style pour optenir ce que tu souhaites.
Dernière chose, il y a une erreur W3C. Pour la corrigé, il suffit d'intégré le contenu de la feuille de style dans celle de ton thème puis d'effacer la ligne d'appel au css du template.
Cela fait plusieurs jours que je réfléchi et essaye diverse solution pour palier à cette erreur de manière transparente pour l'utilisateur... finalement je vais voir avec une extension de piCal dérivé de cssadmin (qui a un jolie bug au passage ).

J'espère que celà te conviendra.

Posté le : 07/06/2006 15:45
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Régulier
Inscrit: 09/09/2005 23:49
Messages: 297
Bonjour merci tes recherches,

j'ai mis aussitôt en application tes pages de codes,
et voici le résultat :
Module piCal

mais il semble pour prendre un exemple, que tous les jours du mois soient sous l'influence da la feuille de style de mon thème et non pas celle de minical.css !
En effet c'est :
a
{
    
color#003366;
    
text-decorationnone;
    
font-weightbold;
    
background-colortransparent;
}
a:hover
{
    
color#ff0000;
}
ul
{
    
margin2px;
    
padding2px;
    list-
styledecimal inside;
    
text-alignleft;
}


qui influence tous les élément du minical à cause de l'effet de lien,
peut-on éliminer ces liens et les laisser uniquement pour les jours d'évènements ?
Dernier point, peux t-on avoir le mois sous la forme "Juin 2006" au lieu de "2006 Jui" ?

Posté le : 08/06/2006 13:37
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Et oui, petit oublie de ma part... faud aussi modifier une portion de code d'un fichier

Bon voici la marche à suivre :
-> ouvrir le fichier piCal.php se trouvant dans le dossier class de piCal
-> aux alentours de la ligne 496, tu doit avoir la fonction : function get_mini_calendar_html( $get_target = '' , $query_string = '' , $mode = '' )
----> supprime tout le contenu de celle ci, tu dervai allez vers la ligne 669
----> met tout le code qui suit à la place :
function get_mini_calendar_html$get_target '' $query_string '' $mode '' )
{
    
// ¼Â¹Ô»þ´Ö·×¬¥¹¥¿¡¼¥È
    // list( $usec , $sec ) = explode( " " , microtime() ) ;
    // $picalstarttime = $sec + $usec ;

    // $PHP_SELF = $_SERVER['SCRIPT_NAME'] ;
    // if( $get_target == '' ) $get_target = $PHP_SELF ;

    
$original_level error_reportingE_ALL E_NOTICE ) ;
    require_once( 
"$this->base_path/include/patTemplate.php" ) ;
    
$tmpl = new PatTemplate() ;
    
$tmpl->setBasedir"$this->images_path) ;

    
// É½¼¨¥â¡¼¥É¤Ë±þ¤¸¤Æ¡¢¥Æ¥ó¥×¥ì¡¼¥È¥Õ¥¡¥¤¥ë¤ò¿¶¤êʬ¤±
    
switch( $mode ) {
        case 
'NO_YEAR' :
            
// Ç¯´Öɽ¼¨ÍÑ
            
$tmpl->readTemplatesFromFile"minical_for_yearly.tmpl.html" ) ;
            
$target_highlight_flag false ;
            break ;
        case 
'NO_NAVIGATE' :
            
// ·î´Ö¤Î²¼Éô»²¾ÈÍÑ
            
$tmpl->readTemplatesFromFile"minical_for_monthly.tmpl.html" ) ;
            
$target_highlight_flag false ;
            break ;
        default :
            
// Ä̾ï¤Î¥ß¥Ë¥«¥ì¥ó¥À¡¼¥Ö¥í¥Ã¥¯ÍÑ
            
$tmpl->readTemplatesFromFile"minical.tmpl.html" ) ;
            
$target_highlight_flag true ;
            break ;
    }

    
// Åö·î¤Î³ÆÆü¤¬¥¤¥Ù¥ó¥È¤ò»ý¤Ã¤Æ¤¤¤ë¤«¤É¤¦¤«¤ò¼èÆÀ
    
$event_dates $this->get_flags_date_has_eventsmktime(0,0,0,$this->month,1,$this->year) , mktime(0,0,0,$this->month+1,1,$this->year) ) ;

    
// Á°·î¤Ï·îËö¡¢Íâ·î¤Ï·î½é¤È¤¹¤ë
    
$prev_month date("Y-n-j"mktime(0,0,0,$this->month,0,$this->year));
    
$next_month date("Y-n-j"mktime(0,0,0,$this->month+1,1,$this->year));

    
// $tmpl->addVar( "WholeBoard" , "PHP_SELF" , '' ) ;
    
$tmpl->addVar"WholeBoard" "GET_TARGET" $get_target ) ;
    
$tmpl->addVar"WholeBoard" "QUERY_STRING" $query_string ) ;

    
$tmpl->addVar"WholeBoard" "MB_PREV_MONTH" _PICAL_MB_PREV_MONTH ) ;
    
$tmpl->addVar"WholeBoard" "MB_NEXT_MONTH" _PICAL_MB_NEXT_MONTH ) ;
    
$tmpl->addVar"WholeBoard" "MB_LINKTODAY" _PICAL_MB_LINKTODAY ) ;

    
$tmpl->addVar"WholeBoard" "SKINPATH" $this->images_url ) ;
    
$tmpl->addVar"WholeBoard" "FRAME_CSS" $this->frame_css ) ;
//    $tmpl->addVar( "WholeBoard" , "YEAR" , $this->year ) ;
//    $tmpl->addVar( "WholeBoard" , "MONTH" , $this->month ) ;
    
$tmpl->addVar"WholeBoard" "MONTH_NAME" $this->month_middle_names$this->month ] ) ;
    
$tmpl->addVar"WholeBoard" "YEAR_MONTH_TITLE" sprintf_PICAL_FMT_YEAR_MONTH $this->year $this->month_middle_names$this->month ] ) ) ;
    
$tmpl->addVar"WholeBoard" "PREV_MONTH" $prev_month ) ;
    
$tmpl->addVar"WholeBoard" "NEXT_MONTH" $next_month ) ;

    
$tmpl->addVar"WholeBoard" "CALHEAD_BGCOLOR" $this->calhead_bgcolor ) ;
    
$tmpl->addVar"WholeBoard" "CALHEAD_COLOR" $this->calhead_color ) ;

    
$first_date getdate(mktime(0,0,0,$this->month,1,$this->year));
    
$date = ( - $first_date['wday'] + $this->week_start ) % ;
    
$wday_end $this->week_start ;

    
// ÍËÆü̾¥ë¡¼¥×
    
$rows = array() ;
    for( 
$wday $this->week_start $wday $wday_end $wday ++ ) {
        if( 
$wday == ) { 
            
//    Sunday
            
$bgcolor $this->sunday_bgcolor ;
            
$color $this->sunday_color ;
            
$typeofday "weekday-name-sunday";
        } elseif( 
$wday == ) { 
            
//    Saturday
            
$bgcolor $this->saturday_bgcolor ;
            
$color $this->saturday_color ;
            
$typeofday "weekday-name-saturday";
        } else { 
            
// Weekday
            
$bgcolor $this->weekday_bgcolor ;
            
$color $this->weekday_color ;
            
$typeofday "weekday-name";
        }

        
// ¥Æ¥ó¥×¥ì¡¼¥ÈÍÑÇÛÎó¤Ø¤Î¥Ç¡¼¥¿¥»¥Ã¥È
        
array_push$rows , array(
            
"BGCOLOR" => $bgcolor ,
            
"COLOR" => $color ,
            
"DAYNAME" => $this->week_short_names$wday ] ,
            
"TYPEOFDAY" => $typeofday
        
) ) ;
    }

    
// ¥Æ¥ó¥×¥ì¡¼¥È¤Ë¥Ç¡¼¥¿¤òËä¤á¹þ¤à
    
$tmpl->addRows"DayNameLoop" $rows ) ;
    
$tmpl->parseTemplate"DayNameLoop" 'w' ) ;

    
// ½µ (row) ¥ë¡¼¥×
    
for( $week $week $week ++ ) {

        
$rows = array() ;

        
// Æü (col) ¥ë¡¼¥×
        
for( $wday $this->week_start $wday $wday_end $wday ++ ) {
            
$date ++ ;
            if( ! 
checkdate($this->month,$date,$this->year) ) {
                
// ·î¤ÎÈϰϳ°
                
array_push$rows , array(
                    
"GET_TARGET" => $get_target ,
                    
"QUERY_STRING" => $query_string ,
                    
"SKINPATH" => $this->images_url ,
                    
"DATE" => date'j' mktime$this->month $date $this->year ) ) ,
                    
"DATE_TYPE" => 0
                
) ) ;
                continue ;
            }

            
$link "$this->year-$this->month-$date;

            
// ÍËÆü¥¿¥¤¥×¤Ë¤è¤ëÉÁ²è¿§¿¶¤êʬ¤±
            
if( isset( $this->holidays[$link] ) ) {
                
//    Holiday
                
$bgcolor $this->holiday_bgcolor ;
                
$color $this->holiday_color ;
                
$typeofday "weekday-holiday";
            } elseif( 
$wday == ) { 
                
//    Sunday
                
$bgcolor $this->sunday_bgcolor ;
                
$color $this->sunday_color ;
                
$typeofday "weekday-sunday";
            } elseif( 
$wday == ) { 
                
//    Saturday
                
$bgcolor $this->saturday_bgcolor ;
                
$color $this->saturday_color ;
                
$typeofday "weekday-saturday";
            } else { 
                
// Weekday
                
$bgcolor $this->weekday_bgcolor ;
                
$color $this->weekday_color ;
                
$typeofday "weekday";
            }

            
// ÁªÂòÆü¤ÎÇØ·Ê¿§¥Ï¥¤¥é¥¤¥È½èÍý
            
if( $date == $this->date && $target_highlight_flag $bgcolor $this->targetday_bgcolor ;

            
// ¥Æ¥ó¥×¥ì¡¼¥ÈÍÑÇÛÎó¤Ø¤Î¥Ç¡¼¥¿¥»¥Ã¥È
            
array_push$rows , array(
                
"GET_TARGET" => $get_target ,
                
"QUERY_STRING" => $query_string ,

                
"BGCOLOR" => $bgcolor ,
                
"COLOR" => $color ,
                
"LINK" => $link ,
                
"DATE" => $date ,
                
"DATE_TYPE" => $event_dates$date ] + 1,
                
"TYPEOFDAY" => $typeofday
            
) ) ;
        }
        
// ¥Æ¥ó¥×¥ì¡¼¥È¤Ë¥Ç¡¼¥¿¤òËä¤á¹þ¤à
        
$tmpl->addRows"DailyLoop" $rows ) ;
        
$tmpl->parseTemplate"DailyLoop" 'w' ) ;
        
$tmpl->parseTemplate"WeekLoop" 'a' ) ;
    }

    
$ret $tmpl->getParsedTemplate() ;

    
error_reporting$original_level ) ;

    
// ¼Â¹Ô»þ´Öµ­Ï¿
    // list( $usec , $sec ) = explode( " " , microtime() ) ;
    // error_log( "MiniCalendar " . ( $sec + $usec - $picalstarttime ) . "sec." , 0 ) ;

    
return $ret ;
}

Là ça devrait être bon, mais je te conseille de le tester en local d'abord et de vider ton cache.

PS : partie du code péché dans ma modif de piCal, aucune garantie pour le moment.

Posté le : 12/06/2006 14:52
Partager Twitter Partagez cette article sur GG+
Re: css piCal !
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2340
Bonjour, je suis pas très doué avec les CSS, mais j'ai quand mme réussi à modifier un peu le template et le css propoé pour permettre de modifier la couleur de fond du titre ou se troue le mois courant et les boutons:

a ajoter dans le CSS
-------------------------
table.minicaltitre {
width: 100%;
line-height: normal;
margin: auto;
border-collapse: collapse;
border: 0px;
background-color: #ccffcc;
}




dans au début template remplacer
-----------------------------
<table class='minical'>
<!-- header part -->
<tr>
<th nowrap='nowrap' colspan='7'><a href='{GET_TARGET}?caldate={PREV_MONTH}'><img src='{SKINPATH}/miniarrowleft.gif' alt='{MB_PREV_MONTH}' title='{MB_PREV_MONTH}' /></a>{YEAR_MONTH_TITLE}<a href='{GET_TARGET}?caldate={NEXT_MONTH}'><img src='{SKINPATH}/miniarrowright.gif' alt='{MB_NEXT_MONTH}' title='{MB_NEXT_MONTH}' /></a></th>
</tr>
<tr>


par
------------------------
<table class='minicaltitre'>
<!-- header part -->
<tr>
<th nowrap='nowrap' colspan='7'><a href='{GET_TARGET}?caldate={PREV_MONTH}'><img src='{SKINPATH}/miniarrowleft.gif' alt='{MB_PREV_MONTH}' title='{MB_PREV_MONTH}' /></a>{YEAR_MONTH_TITLE}<a href='{GET_TARGET}?caldate={NEXT_MONTH}'><img src='{SKINPATH}/miniarrowright.gif' alt='{MB_NEXT_MONTH}' title='{MB_NEXT_MONTH}' /></a></th>
</tr>
</table'>
<table class='minical'>
<tr>


l'idée est d'inséré un tableau pour le titre et de lui assocoé la class adoc

JJDAI

Posté le : 29/06/2006 00:26
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant




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

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