(OverBlog) Modifier le module Calendrier

Nous allons modifier le design du module Calendrier : police, background et encadrements.
Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Le titre

.calendrier .box-titre h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le mois

.calendrier .calendarTop1 a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les jours

.calendrier .calendarHeader1 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les dates avec parution d'articles et les flèches vers la gauche

.calendrier .calendarDays1 a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les jours sans parution d'article et les flèches vers la droite

.calendrier .calendarDays1 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le jour courant

.calendrier .calendarToday1  {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police
font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans le module en entier

.calendrier {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le titre

.calendrier .box-titre h2{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le contenu

.calendrier .box-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le mois

.calendrier .calendarTop1 a{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans les jours

.calendrier .calendarHeader1{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans la date courante

.calendrier .calendarToday1 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le pied de module (certains CSS en ont un)

.calendrier .box-footer {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer tout le module

.calendrier {border:solid 1px #D8D7D7}

Pour encadrer le titre

.calendrier .box-titre h2 {border:solid 1px #D8D7D7}

Pour encadrer le contenu

.calendrier .box-content {border:solid 1px #D8D7D7}

Pour encadrer la date courante

.calendrier .calendarToday1 {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

Créer son propre calendrier décoratif

Voici les explications pour 2 sortes de calendrier.

Le premier :

Choisissez et hébergez une image d'environ 60*60 px.

Dans l'HTML, vous collez :

<table height="120" cellspacing="0" cellpadding="0" width="80" border="3">
<tbody>
<tr>
<td bordercolor="#000066" bgcolor="#000000">
<table height="120" cellspacing="0" cellpadding="0" width="80" border="0">
<tbody>
<tr>
<td align="center" bgcolor="#000000" height="20"><font color="#ffffff">
<SCRIPT LANGUAGE="JavaScript">
Today = new Date;
Heure = Today.getHours();
Min = Today.getMinutes();
Message =Heure + "h" + Min + "m";
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
document.write(Message);
</SCRIPT></font></td>
</tr>
<tr>
<td align="center" bgcolor="#000000" height="60"><img height="68" alt="" src="adresse de l'image" width="60" /></td>
</tr>
<tr>
<td align="center" bgcolor="#000000" height="20"><font color="#ffffff">
<SCRIPT LANGUAGE="JavaScript">
Today = new Date;
Jour = Today.getDate();
Mois = (Today.getMonth())+1;
Annee = Today.getFullYear();
Message = Jour + "/" + Mois + "/" + Annee;
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
document.write(Message);
</SCRIPT></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Maintenant, personnalisez votre calendrier

bordercolor="#000066" couleur de l'encadrement
bgcolor="#000000" couleur de fond
font color="#ffffff" couleur de la police
http://idata.over-blog.com/0/37/17/67/trouvailles/ch35.gif adresse de votre image

Et vous obtenez : 


L'heure et la date n'apparaîtront qu'à l'édition

Installer un calendrier décoratif

Ces calendriers sont purement décoratifs, ils ne peuvent pas être utilisés comme outils :

• pour mettre des liens vers des articles ou annoncer des dates importantes.
• pour réaliser des plannings

Le calendrier suivant ne contient pas de javascript :

FISHAFRIEND

Allez sur  FISHAFRIEND

Copiez le code

<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="flashplayer" src="http://www.wishafriend.com/calendars/swf/flowers1.swf"
quality="high" width="260" height="210" swliveconnect="true" allowscriptaccess="samedomain" /><br><a href="http://www.wishafriend.com/calendars/" target="new">Myspace
Calendars</a> at WishAFriend.com

Collez le en HTML

Les calendriers suivants contiennent du javascript ou des iframe :

LADYLONY

Allez chez Ladylony

Copiez le code, de ce type

<iframe src="http://ladylony.com/newcc77.htm" name="main" width="154" height="197" scrolling="no" frameborder="no" id="main" allowtransparency="true" border="0"
framespacing="0"></iframe>

Collez le en HTML et vous obtenez



Des scripts à copier

SERVICEWEBMASTER

Chez SERVICE WEBMASTER

Un code à copier

<script type="text/javascript" src="http://www.service-webmasters.com/1/calendriers2.php?id=2135&num=12"></script>

et à coller en HTML

Proposer un calendrier interactif

Pour mettre un calendrier en ligne, vous pouvez vous connecter à Bravenet, un site américain qui vous propose un produit performant et gratuit. Il vous suffira de vous inscrire (sign up), le site vous renverra un mot de passe provisoire pour votre premier log-in.

Une fois dans votre administration Bravenet, cliquez sur l'onglet "webtools" puis "online calendar" (attention, l'option "professionnelle" à droite est payante)

Les possibilités de personnaliser votre calendrier sont trop nombreuses pour être détaillées ici, notamment au niveau du design.
Le mieux est de naviguer dans les menus. Néanmoins, il y a quelques points importants à souligner :

- si vous voulez que votre calendrier soit interactif, sélectionner "yes, the public can post in my online calendar" dans General Settings. A noter que vous pouvez également donner un droit d'accès limité à certains de vos visiteurs, en leur communiquant le mot de passe que vous sélectionnerez dans "privacy settings".

- si vous voulez mettre une image personnelle en fond de votre calendrier, vous devez tout d'abord l'héberger.

Enfin, lorsque que vous avez configuré un calendrier à votre convenance, allez dans "Utilities" et "copy-paste code". Vous aurez le choix entre diverses présentations pour le lien vers votre calendrier. Sélectionnez celui que vous désirez, le code à copier et coller en HTML sur votre blog apparait en surbrillance.

Exemple :

View my Online Calendar