Des trucs et des astuces

Alors amusons -nous ;)

22 juin 2007

Modifier le Calendrier

lors le calendrier est paramétrable en CSS.
on peut modifier sa présentation, changer les jours, afficher la date du jour et y mettre un fond, tout cela paramétrable directement par CSS, et cerise sur le gâteau, ajouter des images en entête, qui se changent toutes les 7 secondes.

Pour les besoins de l'exemple, j'ai donc créé un fond pour le calendrier (200*300 pixels) et deux images (190*110Pixels).

fondcalendar

|
imagecalendar1

imagecalendar2

|

Le code: -il se décompose en trois parties:
Une première partie à mettre dans le <head> </head>
Une autre partie après le bloc d'affichage du calendrier
Et enfin une dernière grosse partie dans le CSS

Et commençons, par le CSS, car c'est en fait le plus important

nous avons:
#cadrecalendar qui définit la taille de l'encadrement du calendrier et le fond (N'en pas tenir compte si on ne veut pas de fond)
#imagecalendrier qui permet d'afficher les image en entête du calendrier (N'en pas tenir compte si on ne veut pas d'image)

.jourdicalendar, .jourlucalendar... .joursacalendar qui définissent les 7 jours. (N'en pas tenir compte si on ne veut pas de jours personalisés)
.circlecalendar qui permet de diférencier le jour courant sur le calendrier. (N'en pas tenir compte si on ne veut pas différencier le jour présent )


donc ce code est à recopier dans la feuille de style général, (et si on veut rester cohérent, avant ou après le #calendar, c'est plus facile de tout regrouper)

ensuite le CSS pour le calendrier étant défini...
passons à la déclaration des images  (ici la variable imageducalendar) (Ne pas tenir compte si on ne veut pas d'image)

et chargeons le fichier javascript ----.js qui s'occupe de tout mettre en forme.
-Tout cela (le script en entier) est à mettre dans les pages avant </head>

Nota: le script et son fichier *****.js est le seul qui doit toujours être présent dans <head></head>

Maintenant, la partie qui change tout: à insérer juste après les commandes de bloc du calendrier
        <CBCalendar><$BlogCalendar$></CBCalendar>

Sur la page d'accueil

Sur les autres pages


afficher_jours("calendar","v") ou afficher_mois("calendar","p")  permettent de changer le calendrier et accepte des arguments:
(seul "calendar" n'est pas à modifier)
"" laisse en l'état (équivaut à ne rien faire)
"v" n'affiche que le style (permet de n'afficher que des images définies dans les styles .jourdicalendar...)
"p" affiche les jour (Dim Lun Mar Mer Jeu Ven Sam) avec un fond dans le style défini
"u" Affiche l'initiale (D L M m J V S D) avec un fond dans le style défini.
AfficherImagesCalendar() affiche les images définies dans la variable "imageducalendar" selon un cycle de 7 secondes

(Evidemment, ne pas mettre les commandes des choses que l'on ne veut pas)
donc....
en partant d'un calendrier standard comme
calendarnormal
celui-ci en ajoutant dans la feuille de style le code
stylegen
dans l'entête
pageaccueil
et le code javaScript sous les blocs de calendrier
pageaccueilcalendar
on se retrouve (magique) avec un calendar dans ce genre..
calendar1puiscalendar2

voili, voilà, j'espère qu'il n'est pas trop compliqué.
NB: du 06/09/2007, mon moteur remplace également en date du jour tous les 1..9 des dizaines également... pb que je vais tâcher de régler. dès que j'en ai le temps...


Commentaires

    bonjour et merci!!

    J'aime bcp tes tutos, même si qd j'ai commencé à bidouiller le html je les trouvais trop ardus. maintenant,...., ben ça me paraît tjrs difficile mais au moins je vois de quoi tu parles.

    Bon j'ai un souci. J'ai chargé ton calendrier, ça fonctionnait bien, sauf que qd j'ai changé tes images et rajouté mes images (celles qui changent toutes les 7 secondes) ben y'en a plus une qui s'affiche. Aurais-je oublié de faire un changement minime mais néanmoins crucial ds le script???

    merci d'avance de ton aide!!

    Posté par miss bunny, 27 janvier 2008 à 17:03
  • c'est bon

    j'avais juste zapé un "!!!
    merci!!

    Posté par miss bunny, 27 janvier 2008 à 17:18
  • de rien

    sympa ton blog [Clin d oeil]

    Posté par Alérion, 27 janvier 2008 à 20:24
  • ben merci!!!

    Je suis encore que débutante, alors c pas parfait, mais c'est vrai que je suis assez satisfaite. M'enfin faut être honnête, sans les gens comme toi qui prennent du temps à nous expliquer comment ça marche, j'en serai encore au stade blog de départ deux colonnes bleu pas beau!!

    Donc, au risque de me répéter, merci!

    Posté par miss Bunny, 30 janvier 2008 à 10:28
  • help

    Hello!!!

    Tout d'abord merci pour ton site, ça m'aide beaucoup!!!

    Et ensuite ... j'ai changé mon "circlecalendar", et il apparaît bien sur la page d'accueil, mais pas sur les autres pages...

    Comment faire??

    Merci!!!

    Posté par SailorVenus, 17 février 2008 à 12:27
  • c'est vrai,

    parceque la page d'accueil est toujours le mois courant, alors que sur les autres pages c'est sur le mois de publication du/des messages...[Triste ouin]

    je vais changer ça, sur le même principe que pour les calendars en lien... mais bon, pas prévu dans les jours qui suivent [Coder]

    Posté par Alérion, 17 février 2008 à 13:29
  • Merci

    Je te remercie beaucoup, pour ta réponse.
    bonne journée

    Posté par SailorVenus, 18 février 2008 à 13:57
  • merci

    bonjour , j'ai déjà un canalblog et je veux en faire un autre . tes descriptions me paraissent assez simples (je suis archi nulle )
    mais je te donne une autre adresse où j'ai aussi un blog . en fin de compte , j'aimerais bien en faire à peu près autant avec canal blog
    comme mettre une pendule , des images volantes , de belles images sur les côtés de page .
    enfin , si tu as le temps , va faire un tour et si tu pouvais me dire ce que tu en pense ?
    http://magnet.over-blog.com/
    amitiés
    bernadette

    Posté par bernadette, 26 mars 2008 à 13:53
  • Super mais comment on fait pour un calendrier humain???

    Posté par stefnanie, 20 juin 2008 à 11:09
  • Ce fût long [Baver], je suis une [S]quiche[/S] (déformation régionale) guiche en informatique [Sais pas] mais avec ce tuto j'y suis arrivée. Un énorme MERCI [Heeehooo]

    Posté par komete, 06 août 2008 à 13:13
  • comme je vois comment tu avances...
    ne serait-il pas possible de personnaliser le calendrier en mode normal?
    dans le même style que pour les smileys?
    s'te plaiiiiiii ^^ :yeux doux et aguicheurs:

    Posté par Goldie, 06 novembre 2008 à 09:56
  • heuuuuuuuuu [Attend] un peu que j'y réfléchisse...
    moui ce serait possible
    pas si simple, mais possible....
    vais voir

    Posté par Alérion, 06 novembre 2008 à 19:45
  • Je suis allée voir le blog de kométe alors sous internet explorer je vois bien les images au-dessus du calendrier mais pas sous mozilla et moi je suis obligée d'ouvrir sous mozilla car sinon je ne vois plus mes vidéos etc. sur mon blog :o(
    Pfff... dur, dur! Tu comprends pourquoi Alérion? Moi je suis nulle en informatique..
    Mais je suis super contente que grâce à toi mon blog soit bcp plus sympa fond, pluie d'étoiles même si je n'arrive tjrs pas à changer la couleur mais c'est super quand même

    Posté par violaine, 27 août 2010 à 12:37
  • Je suis allée voir le blog de kométe alors sous internet explorer je vois bien les images au-dessus du calendrier mais pas sous mozilla et moi je suis obligée d'ouvrir sous mozilla car sinon je ne vois plus mes vidéos etc. sur mon blog :o(
    Pfff... dur, dur! Tu comprends pourquoi Alérion? Moi je suis nulle en informatique..
    Mais je suis super contente que grâce à toi mon blog soit bcp plus sympa fond, pluie d'étoiles même si je n'arrive tjrs pas à changer la couleur mais c'est super quand même

    Posté par violaine, 27 août 2010 à 12:49
  • merci

    merki pour le boulot ! je teste ca demain si j'ai le temps ;)

    Posté par Filou, 23 juin 2007 à 04:24
  • ARRRGH!

    Désolé,mais j'y comprend absolument rien,mais ça fait pas longtemps que je me suis mise à utiliser un ordi alors...Est-ce qu'il y a une façon moins compliquer pour souligner la date du jour sur mon calendrier?[Attend]
    Merci quand même Alérion[dingding]

    Posté par Tasha, 24 juin 2007 à 01:56
  • mais t'es trop sympa toi de faire un blog comme ça, juste pour aider ceux qui ne s'en sortent pas!

    Posté par calalalere, 26 juin 2007 à 22:32
  • Bonjour,
    Je ne poste pas au bon endroit, veuillez m'en excuser... Je connais votre capacité à tout résoudre, alors, pourriez-vous m'aider s'il-vous-plait? Problème tout bête je pense, je voudrais agrandir la taille de ma colonne principale sur mon blog, seulement quand je passe du 600 px au 700 c'est le drame, ma colonne de droite disparait. Et comme je ne souhaite pas non plus réduire la taille des deux colonnes de chaque côté... En attente de vous lire. En vous remerciant par anticipation.

    Posté par Dlle au catogan, 08 juillet 2007 à 20:30
  • tant qu'à ne pas etre au bon endroit....
    moi j'aimerai si possible savoir comment tu fais pour n'avoir qu'un message à la fois et qu'on peut changer en cliquant sur les flèches

    tu s'rais choux tout plein de nous espliquer
    il y a pas de bizou dans tes smileys? bizzzzzzzzzzzzz alors .
    Ninie

    Posté par Annie, 11 juillet 2007 à 16:49
  • Bonjour Dlle au catogan. C'est trop d'honneur, et je peux effectivement aider:
    il faut modifier dans la feuille de style la largeur également du #container, car pour comprendre un peu,
    les colonne sont incluse dans un conteneur nommé "#container", la colonne de gauche est "collée à l'élément de gauche (il n'y en a pas, donc contre le container) la colonne du centre est collée à l'élément de gauche (donc la colonne de gauche "#leftbar") et la colonne de droite est collée à l'élément de gauche (donc le centre "#content") et tout ça si ça tient en largeur, sinon c'est affiché (tout comme le texte) par un retour à la ligne. Donc ton #container doit être suffisamment grand pour contenir leftbar, content et rigthbar (ne pas oublier les bordures dans le compte).
    Ainsi si tu rajoutes 100px au #content, il faut également les rajouter à #container.

    Voilà :)))[Coder]

    Bonsoir Ninie, non désolé, mais je n'ai pas fais, et ne suis pas prêt non plus à le faire, de tuto pour n'afficher qu'une seule page de message, car c'est un peu compliqué et pas facile à expliquer pour que tout le monde puisse comprendre.[Help]

    Posté par Alérion, 12 juillet 2007 à 20:57
  • Essai calendrier

    Salut Alérion,

    Alors d'abord je te remercie pour le script de mon décompteur, ou j'ai réussi à changer la couleur (oué chuis trop forte...)

    J'ai essayé le nouveau calendrier, seulement je me pose une question. J'ai l'impression, que le fond que tu crée, est en .js (si je comprend tout bien) non?

    Seulement voilà, j'ai aucune idée de comment on crée un .js... Et ça, c'est plutot embetant pour mon projet... Tu peux m'aider? [mmm]

    Merci![Bouée]

    Posté par nharicot, 26 juillet 2007 à 23:36
  • bah heu nan, le fond est défini dans le css
    il faut ajouter
    #cadrecalendar {
    border:none;
    background:transparent url("http://p6.storage.canalblog.com/65/55/289312/14436521.gif") no-repeat 50% 50%;
    height: 300px;
    width: 200px;
    display: block;
    }
    et dans l'url tu changes par l'url de ton image

    Posté par Alérion, 27 juillet 2007 à 06:14
  • grrrrrrrrrrrr

    Ben écoutes, il y a quelque chose qui m'échappe...

    Lors de la déclaration des images, tu y mets tes deux adresses d'images, ça c'est bon, mais y'en a une troisième qui de termine par .js dasn ton exemple...

    Qu'est-ce que c'est?[Bouée]

    Posté par nharicot, 27 juillet 2007 à 14:30
  • ça c'est le fichier javascript qui doit toujours être chargé, c'est le moteur, si tu ne le charges pas rien ne marche
    "et chargeons le fichier javascript ----.js qui s'occupe de tout mettre en forme.
    tout cela à mettre dans les pages avant
    Nota: le fichier [G]*****.js [/G]est le seul qui doit toujours être présent dans [G][/G]" qu'il est précisé en dessus de la fenêtre de code...
    mais tu as raison, pour la meilleur compréhension je vais séparer les déclarations

    Posté par Alérion, 27 juillet 2007 à 15:57
  • voila, ce devrait être plus compréhensible maintenant[Coder]

    Posté par Alérion, 27 juillet 2007 à 16:21
  • Beh....

    Ou alors c'est moi qui suis conne (fort possible d'ailleurs)...

    Le problème, c'est que sur la partie des adresses de photos, je comprend tout à fait comment je dosi faire pour les avoir, mais pour le .js, je sais pas du tout d'où ça sort...

    Dois-je le créer, où est-il dispo qqpart sur le DD de canal blog?

    Tu vois ce que je veux dire ou pas??

    C'est à dire que je ne sais pas du tout où je dois voir, ni ce que je dosi faire pour obtenir ce .js....

    Si tu veux plus de renseignements, tu peux me joindre directement sur mon mail, je reste ici tant que j'aurai pas compris!

    MErci,
    BEan.[Bouquet]

    Posté par nharicot, 28 juillet 2007 à 19:03
  • hum heuuuuuuuu[Attend]
    tu prends le script avec le xxxx.js tel qu'il est là, sans rien rajouter, ni modifier, ni rien, c'est comme un programme, c'est une script Java Script externe, d'où le Js, je l'ai écrit[Coder], et tu ne le changes seulement lorsque je le modifie [Danser]
    voila rien à créer, à modifier, ou quoique ce soit, juste à prendre et le mettre avant
    suis un peu plus clair?[mmm]

    Posté par Alérion, 28 juillet 2007 à 19:38
  • [I]il faut vraiment que je fasse quelque chose pour afficher le code moi [/I]
    [G]-donc disais-je à mettre avant </head> [/G]

    Posté par Alérion, 28 juillet 2007 à 19:43

Poster un commentaire