Du CSS pour Events-Calendar en Widget

Vous l’aviez surement remarqué ?! Non ?

Notre chère extension Events-Calendar n’a rien prévu comme habillage pour le petit calendrier en widget ! C’est à dire celui qui apparait dans la sidebar, pas le calendrier mastoque que l’on peut insérer dans un article.

C’est ballot comme manque non ? La plus part de ceux qui utilisent ce plugin se sont employés à créer les règles CSS adaptées à leur site. Mais il leur a fallut démarrer de zéro. Et tout le monde n’a pas cette capacité :)

Petite correction : en fait tout dépend de votre thème. Si votre thème a prévu un habillage du calendrier standard Wordpress, alors Events-Calendar en héritera. Comme mon thème n’avait rien prévu de ce coté là … je m’était gouré !

Il y a quelque jours je m’y suis aussi collé. Ça me titillait. Et puis maintenant que j’ai MON blog hein… Mais ce ne fut pas aussi simple qu’il n’y parait. J’ai d’abord pondu vite fait quelque chose qui tienne la route. Sur Firefoxe 3 (FF3 pour les initiés) tout allait bien. Et puis à l’occasion d’un test sur IE7 (Internet Explorer 7 pour les non initiés) .. arghhh la cata ! C’était moche ! Je suis allé voir avec Opéra, puis Safari (oui j’ai installé toute la panoplie des navigateurs) … encore plus moche !!

Alors comme j’avais du temps en ce beau lundi, et que j’ai passé un excellent weekend en famille, donc la pêche, je m’y suis recollé ! Je ne pensais pas en avoir pour longtemps. J’avais prévu de me pencher surtout sur un plugin de backup de ma base de données, et sur le passage en multilangues. Avant de m’attaquer à une compilation de toutes les suggestions reçues pour Events-Calendar. Et bien, je n’ai pas été déçu du temps passé ! je viens seulement de finir après 4 heures de prise de têtes !

Alors je me suis dis que cela pouvait en intéresser parmi vous de savoir ce qu’il est possible de faire pour rendre joli ce petit calendrier.

Donc voilà un petit tutoriel d’habillage CSS.

Prérequis :

  • Il faut avoir un minimum de connaissance CSS, sinon c’est vraiment pas la peine. Vous pouvez trouver sur Internet une pagaille de tutoriels plus ou moins bons. Je vous ferais seulement deux recommandations :
  • Ne pas avoir peur de modifier un plugin ! Garder cependant bien au chaud une version originale. Et quand vous jugez vos modifications intéressantes et généralistes ne pas hésiter à les communiquer à son auteur ou son distributeur ;)
  • Disposer d’un éditeur capable d’analyser la syntaxe des langages web les plus courants, dont le CSS. Pour ma part j’en utilise trois, suivant mes besoins : ScITE, PSPad et Notepad++.

Repérages dans Events-Calendar

  1. Pour commencer, ouvrez les deux fichiers suivants :
    - ../plugins/events-calendar/ec_calendar.class.php
    -../plugins/events-calendar/css/ec_calendar.css
    Dans ec_calendar.class.php repérer la fonction

    function displayWidget($year, $month, $days = array(), $day_name_length = 2)

    Toute les chaines commençant par id= et class= nous intéressent.
    Dans ec_calendar.css il n’y a rien concernant le Widget Calendar, seulement pour le Large Calendar. Alors nous nous placerons à la fin de la liste.

La feuille de style dédiée au Widget d’Events-Calendar

Voilà ce que moi j’y ai inséré :

    /*
 * Widget Calendar formatting
 */
.EC_Widget_display {
 text-align: center;
}
.widgettitle {
 text-align: left;
 margin: 0 0 1em;
}
.calendar-month {
 text-align: center;
 font-weight: bold;
 background-color: white;
 border: thin solid darkgray;
}
#wp-calendar {
 margin: 0 1px 0 2px;
 border-collapse: collapse;
}
*+html #wp-calendar #today {
	border: 3px solid blue !important;
}
#wp-calendar #today {
 border: 2px solid blue;
 font-weight: bold;
 background-color: #a8c3d6;
}
#wp-calendar .pad {
 font-weight: bold;
}
#wp-calendar .padcent {
 background-color: white;
 border: thin solid darkgray;
}
#wp-calendar .padday {
 background-color: gainsboro;
}
#wp-calendar th {
 width: 11%;
 color: white;
 background-color: #173b6d;
}
#wp-calendar td {
 border: thin solid darkgray;
 background-color: white;
 text-align: center;
}

Analysons un peu tout cela :

  • EC_Widget_display : est la classe qui englobe tout le widget et nous nous y contentons d’un centrage par défaut.
  • widgettitle : concerne le titre, “Evénements” en français.
  • calendar-month : c’est l’affichage du mois en cours
  • wp-calendar : c’est le calendrier lui même dans son ensemble
  • wp-calendar today : c’est l’encadrement du jour en cours (aujourd’hui). Dans la version officielle ce marquage est inscrit dans le code PHP de la fonction displayWidget() : 
    if(!$todaySet) {
   $dayID = ("$month/$day/$year" == date('m/j/Y')) ? " id=\"today\" style=\"border:thin solid red;\"" : "";
} else {
   $dayID = ("$month/$day/$year" == date('m/j/Y')) ? " id=\"today\"" : "";
}

    Il sous suffit de transformer cette condition en :

    $dayID = ("$month/$day/$year" == date('m/j/Y')) ? " id=\"today\"" : "";

    Mais vous pouvez par sécurité transformer cela en :

    // if(!$todaySet) {
//   $dayID = ("$month/$day/$year" == date('m/j/Y')) ? " id=\"today\" style=\"border:thin solid red;\"" : "";
//} else {
   $dayID = ("$month/$day/$year" == date('m/j/Y')) ? " id=\"today\"" : "";
//}
  • wp-calendar .pad : où pad est la classe de toutes zones qui ne sont pas des jours du mois.
  • wp-calendar .padcent : où padcent est la zone centrale entre la navigation d’un mois à l’autre.
  • wp-calendar .padday : où padday est la zone de début et de fin de mois sans jours.
  • Dans la version officielle ces deux dernières classes n’existent qu’en “.pad”. je les ai modifiées dans le code afin de pouvoir les styliser différement :Est donc devenu :Puis : 
    if($weekday > 0) $calendar .= "\t\t
 
";

    et :

    if($weekday != 7) $calendar .= "\n\t\t
 
";

    Sont devenus :

    if($weekday > 0) $calendar .= "\t\t
 
";

    et :

    if($weekday != 7) $calendar .= "\n\t\t
 
";
  • Le meilleur pour la fin : 
    *+html #wp-calendar #today {
	border: 3px solid blue !important;

    Est un hack dédié à IE7 et versions précédente. C’est à dire une méthode, non conventionnelle mais nécessaire, afin que TOUS les cotés la bordure du jour courant apparaissent dans Internet Explorer.

    Le résultat avec Opéra est très correct. En revanche avec Safari la bordure autour du jour courant a des débordements .. tant pis !

Voilà j’espère que cela pourra vous êtes utile.

Faites le moi donc savoir ;)

Heirem 4 août 2008 22:34 Events-Calendar, Web Design 9 commentaires URI du rétrolien Comments RSS

Donations Wikipedia Affiliate Button

for help Heirem's

9 réponses à “Du CSS pour Events-Calendar en Widget”

  1. Goule 13 août 2008 à 0:35 Lier au commentaire

    Bonjour,

    Merci beaucoup pour ces indications très précieuses. Il me manque juste quelques détails pour pouvoir adapter complètement le widget calendrier à mes besoins : comment changer la couleur des jours ayant des événements ? l’apparence de “l’infobulle” qui apparait quand on passe la souris dessus ? l’affichage de l’événement détaillé qui aparait lorsqu’on clique sur le jour de l’événement ?
    J’ai essayé d’explorer un peu les fichiers, mais n’y connaissant pas grand chose, je n’ai encore rien trouvé…

  2. Heiremle 13 août 2008 à 0:44 Lier au commentaire

    Gou >
    Bonsoir,
    La couleur des jours pointant sur un évènement peut être spécifiée dans les options du calendrier. C’est le champs “CSS pour marquer un évènement”.

    Par exemple en y mettant : “color:red;font-weight: bold;”.

    Pour modifier l’infobulle et la “thickbox”, c’est nettement plus compliqué. Elle est produite par un script jQuery. Dans les prochaines mise à jour il est prévu de faire évoluer tout ce qui est jQuery en profitant des dernières versions de cette bibliothèque. Mais chaque chose en son temps n’est ce pas ? ;)

    Amicalement
    Heirem

  3. Goule 13 août 2008 à 8:36 Lier au commentaire

    Merci beaucoup pour cette réponse aussi précise que rapide :)
    À force d’aller tripatouiller dans les fichiers css et php, j’avais fini par en perdre de vue les options de base ;-)
    Pour l’infobulle et la “thickbox”, j’attends avec impatience la suite alors ;)

    Merci beaucoup pour votre implication en tout cas !

  4. Scortole 17 août 2008 à 23:23 Lier au commentaire

    Bonjour,
    J’ai essayé de suivre ce post pour mettre le widget utilisable sur mon site mais je n’y arrive pas. Le calendrier en widget s’afficher, mais je ne peux pas naviguer d’un mois à l’autre, les fléches de défilement n’apparaissent pas et la mise en forme ne semble pas fonctionner :(

    j’ai modifier les 2 fichiers cités mais sans succès :(

    d’autre pas au niveau de l’avant dernier point, je n’ai pas su ou modifier les éléments….

    ce module m’intéresse beaucoup mais je galère à l’adapter à mon site :(

    Merci de votre aide.
    Je l’ai mis en widget afin que vous puissiez vous en rendre compte.

    Merci
    Cordialement

  5. Heiremle 18 août 2008 à 0:10 Lier au commentaire

    Scorto > merci de prendre la peine d’écrire en français ;)
    Votre problème de calendrier n’est pas un problème de CSS. Vérifiez que vous avez la bonne version de Wordpress, que jQuery fonctionne bien avec votre site, et que toutes les options d’Events-Calendar ont bien été enregistrées.

    A mon avis la nouvelle version du plugin (v6.5), que je viens de terminer, devrait résoudre beaucoup de vos problèmes.

    Amicalement
    Heirem

  6. Scortole 20 août 2008 à 22:35 Lier au commentaire

    Bonjour Heirem
    Merci pour ces précisions. Je continue à avoir des problèmes, je suis en version wp 2.3.2.

    J’ai vu que sur la page référencée wp plugins pour ce plugin, l’auteur indiquait que la version 6.5 allait sortir, savez vous quand? Peut être est ce mieux que je patiente plutôt que de me casser la tête sur ces problèmes?

    merci de vos informations et conseils.
    Cordialement

  7. Sephile 11 septembre 2008 à 3:45 Lier au commentaire

    Bonjour,

    Dans la thickbox qui s’affiche à partir du widget, la date est écrite dans un mauvais format, genre “Septembre Mercredi 17 2008″. Est-il possible de changer l’ordre de ces éléments ? Sait-on jamais…

    Merci !

  8. Heiremle 12 septembre 2008 à 3:38 Lier au commentaire

    Scorto, Sur ce blog vous avez la version 6.5.1 à votre disposition téléchargeable dans ma sidebar ;) Mais attendez un peu car la version 6.5.2, sur laquelle j’ai porté mes efforts à résoudre les problèmes que vous avez rencontré, est en bêta test et ne saurait tarder à être disponible au même endroit.

    Sephi, C’est ajustable par une option du plugin, celle organisant le format de la date dans le grand calendrier ;) Faites des essais, vous allez trouver !

  9. Sephile 12 septembre 2008 à 16:57 Lier au commentaire

    Merci, j’ai effectivement trouvé. Je pensais que c’était un problème de jQuery, mais j’ai bien fait de poser la question :)

URI du rétrolien Comments RSS

Laisser une réponse