Proposé par Isabelle, de Realia.jimdo.com et Frédéric de Filmsdelover.com.

- Les dates des blogs Jimdo ont toutes la même forme et le même style sur tous les sites Jimdo. Or, la couleur ne s'accorde pas toujours avec la charte graphique de votre site.

- Dans ce tutoriel, vous allez apprendre à changer le style des dates du blog mais également à y ajouter des éléments, tels que le jour ou l'année.

- Voici l'exemple de base et deux exemples de modifications :

Suivant le niveau de personnalisation voulu, la difficulté peut varier de facile à difficile.

• CODE GENERAL

Une fois n'est pas coutume, on va partir du code intégral d'un des deux exemples que nous allons ensuite décortiquer pour vous permettre de mieux le personnaliser.

Voici le code ajouté dans le Head pour produire cet exemple :

<style type="text/css">
/*<![CDATA[*/
div.datetime
{
text-align: center;
float:right;
width:45px;
height:100%;
margin: 0px 3px 0px 3px;
background:black;
border: 1px solid red;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop')\9
}
p.day-word {
display: block;
text-align: center;
font-size: 9px;
color: white;
line-height: 9px;
}
p.day {
display: inline;
font-size: 14px;
line-height: 14px;
margin-top: none;
color: red;
}
p.mon {
display: inline;
font-size: 12px;
line-height: 12px;
color: red;
}
p.yr {
display: block;
font-size: 11px;
text-align: center;
}
/*]]>*/
</style>

Pas de panique, on va reprendre un a un les éléments et les expliquer pour mieux comprendre comment ça marche.

• QUELS ELEMENTS VOULEZ-VOUS ?

Le code ci-dessus est celui qui permet d'afficher le jour ("p.day-word"), la date ("p.day"), le mois ("p.mon") et l'année ("p.yr"). Si vous ne voulez pas de l'un des éléments, supprimez du code l'élément en question.

Par exemple, si on ne veut pas de l'année, on va effacer ce bout de code :

p.yr {
display: block;
font-size: 11px;
text-align: center;
}

• FORMAT GENERAL DE LA DATE

Au début du code, on peut spécifier l'aspect général de la "boite" qui renfermera la date. Cela se présente sous cette forme-ci :

div.datetime
{
text-align: center;
float:right;
width:45px;
height:100%;
margin: 0px 3px 0px 3px;
background:black;
border: 1px solid red;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop')\9
}

Voici ce que veulent dire toutes ces valeurs :

text-align : Mettre "center" si on veut du texte centré, "right" pour du texte sur la droite et "left" pour du texte sur la gauche.

float: Mettre "right" si on veut mettre la date des blogs à la droite du titre du billet ou "left" si on la veut à gauche.

width: la largeur de la boite de la date. Ici, 45 pixels. Modulez en fonction de ce que vous voulez.

height: 100% veut dire que la hauteur prendra toute la place qu'on lui accorde.

margin: les marges entre la date et le titre/le texte du blog. Ici, c'est 3 pixels à gauche et à droite de la boite.

background: la couleur de fond de toute la boite. Il en faut obligatoirement une pour cacher l'image par défaut.

    ! A noter que vous pouvez également prendre une image comme background à votre date. Pour cela, l'attribut background ressemblera plus à cela :

background: url(http://adresse-de-mon-image) !important;

border: la bordure autour de la date. Ici, une bordure rouge continue de 1 pixel.

filter et progid ne doivent pas être modifié. Il s'agit d'un code pour permettre que le code soit compatible sur tous les navigateurs internet.

• UN EXEMPLE : LE JOUR (p.day-word)

Pour afficher le jour, on s'est servi de ce bout de code :

p.day-word {
display: block;
text-align: center;
font-size: 9px;
color: white;
line-height: 9px;
}

Voici ce que signifient ces valeurs :

display: "block" veut dire que l'on aura seulement le jour sur la ligne. Si vous mettez "inline", vous laissez la possibilité d'avoir le jour + la date sur la même ligne.

text-align: déja vu plus haut, on centre le texte. Ce n'était pas nécessaire de l'ajouter à nouveau mais je l'ai fait.

font-size: la taille de la police de caractère.

color: la couleur de la police. Ici, blanche.

line-height: la hauteur de ligne. Je l'ai mise de la même hauteur que la taille de la police mais c'est au choix.

• GENERALITES

Tous les autres éléments, la date, l'année et le mois sont soumis aux mêmes attributs que vous pouvez modifier à loisir. Testez, expérimentez différents changements de valeurs jusqu'à obtenir quelque chose qui vous convient.

• AUTRE EXEMPLE :

Pour obtenir une date de la forme suivante :

Voici le code à ajouter dans le Head :

<style type="text/css">
/*<![CDATA[*/
div.datetime {
float:left;
text-align: center;
width: 80px;
height: 100%;
background:#eee;
border: 1px dotted #aaa;
padding: 4px;
margin: 10px 20px 8px 5px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop')\9
}
p.day-word {
display: block;
font-size: 11px;
color: #999;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
}
p.day {
font-size: 26px;
color: #607EDD;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
}
p.mon {
font-size: 15px;
color: #333;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
}
p.yr {
display: block;
font-size: 18px;
color: #333;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
}

/*]]>*/
</style>

Il comprend d'autres éléments tels que le padding (marge interne) ou la font-family (type de police).

Voilà, je crois que l'on a tout passé en revue. Bonne chance !