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).
|
|
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
celui-ci en ajoutant dans la feuille de style le code
dans l'entête
et le code javaScript sous les blocs de calendrier
on se retrouve (magique) avec un calendar dans ce genre..
puis
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...
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=272783&pid=5391266
Liens vers des weblogs qui référencent ce message :
Commentaires
merci
merki pour le boulot ! je teste ca demain si j'ai le temps ;)
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]
mais t'es trop sympa toi de faire un blog comme ça, juste pour aider ceux qui ne s'en sortent pas!
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.
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
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]
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]
bah heu nan, le fond est défini dans le css
il faut ajouter
#cadrecalendar {
border:none;
background:transparent url("http://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
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]
ç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
voila, ce devrait être plus compréhensible maintenant[Coder]
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]
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]
[I]il faut vraiment que je fasse quelque chose pour afficher le code moi [/I]
[G]-donc disais-je à mettre avant </head> [/G]
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!!
c'est bon
j'avais juste zapé un "!!!
merci!!
de rien
sympa ton blog [Clin d oeil]
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!
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!!!
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]
Merci
Je te remercie beaucoup, pour ta réponse.
bonne journée
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
Super mais comment on fait pour un calendrier humain???
Poster un commentaire