Styler la date du blog

En construction !

Nous allons voir dans ce tutoriel comment customiser la date qui s'affiche dans le coin des billets postés sur les blogs de Jimdo. Pour le moment, on n'a aucun choix quant au format ou à l'aspect de ce tampon : en effet, la date apparaît forcément en haut à droite des billets, sous la forme d'une petite étiquette bleue aux contours légèrement ombrés.

 

Après de multiples expérimentations, j'ai réussi à modifier l'aspect de l'étiquette (sa taille, le type de police, les couleurs de la police et de fond, la bordure du cadre, l'image de fond), ainsi que son emplacement (à gauche), mais surtout, j'ai trouvé deux nouvelles variables à exploiter : l'année et le nom du jour de la semaine.  

Mon premier essai : une date complète, sans image de fond

Pour cet essai, j'ai modifié l'affichage de la date en ajoutant deux nouvelles variables (l'année et le nom du jour de la semaine) ; j'ai aussi changé sa place par défaut en la déplaçant à gauche ; enfin, j'ai modifié son aspect (police, taille, couleurs... )

Premier essai de modification de la date dans Jimdo
Premier essai : ajout de l'année, du nom du jour ; sans image de fond

Mon deuxième essai : avec une autre image de fond, une date enrichie

Même chose avec ce deuxième essai : j'ai ajouté l'affichage de l'année, modifié l'image de fond par défaut et changé l'aspect graphique (couleur, taille et choix de la police).

Capture du deuxième essai de modification de la date
Deuxième essai : nouvelle image de fond & affichage de l'année

Site à consulter : http://favoris.jimdo.com

Contenu de ce tutoriel

Ce tutoriel se compose de plusieurs parties, chacune étant destinée à un profil d'utilisateur différent.

 

Après un petit exposé des différentes variables du code qui composent la date dans le blog de Jimdo, je vais détailler, dans un tutoriel destiné aux débutants, la méthode qui permet uniquement, mais simplement, de remplacer l'image de fond bleue native par une image de même taille de son choix.

 

Dans un deuxième temps, on verra comment un utilisateur un peu plus avancé peut afficher une date enrichie dans un cadre coloré, sans utiliser d'image de fond. (En effet, une fois qu'on a compris les différentes composantes du code, c'est assez facile d'adapter le code fourni à ses propres besoins.)

 

Enfin, je vous propose une galerie d'exemples de codes prêts à l'emploi : les débutants pourront les intégrer tels quels à Jimdo en copiant-collant le code fourni. Mais seuls des utilisateurs avancés pourront adapter ce code à leurs propres besoins (changer les couleurs, les tailles, les polices, etc. ). En effet, de bonnes connaissances en CSS sont nécessaires pour faire les ajustements dans la CSS ; il faut tâtonner pour trouver la bonne formule. Cela se fait au cas par cas.

Détail du code qui affiche la date

Niveau débutant : personnaliser l'image de fond

Niveau intermédiaire : personnaliser la date sans image

Galerie d'exemples prêts à l'emploi

Plein d'idées à piocher dans cette galerie

D'abord, pour l'inspiration, un lien vers une galerie d'images de fond de calendrier :

http://www.smashingmagazine.com/2008/02/22/gallery-of-date-stamps-and-calendars/
Plein d'icônes de fond ici

6 icônes de CSS Bits

CSS Bits n°1

CSS Bits n°1

 

 

CSS Bits n°2

CSS Bits n°2

CSS Bits n°5

CSS Bits n°5

CSS Bits n°6

CSS Bits n°6

Les modèles 3 et 4 sont horizontaux ; je ne suis pas sûre qu'ils soient adaptables à Jimdo.

CSS Bits n°4
Modèle n°4
CSS Bits n°3
Modèle n°3

5 icônes de Dryicons

Coquette de Dryicons
Simplistica de Dryicons
Aesthetica de Dryicons

Aesthetica (version 2)

Grungy aesthetica de Dryicons
Aesthetica calendar de Dryicons

Artistica (part 2)

3 icônes de Justfreetemplates

Icône 1 de Justfreetemplates

Justfreetemplates n°1 : une icône bicolore

Justfreetemplates n°2

Jusfreetemplates n°2 : une icône avec un dégradé

Justfreetemplates n°3

Justfreetemplates n°3 : une icône et ses 6 variations

Justfreetemplates n°3 : les variations de couleurs
Variations de couleurs possibles

Une icône déclinée en 20 variations

Preview des icônes d'Euphorish
Joli set : pour tous les goûts

Une icône glossy et 16 couleurs

Source : http://mintyferret.com/photoshop-freebies/free-web-20-calendar-icons/

Un tutoriel sur le même site détaille la méthode pour faire ces icônes avec Photoshop.

L'icône glossy de Minyferret
Icône glossy à la mode web 2.0

Une icône arrondie et ses 16 variantes

Around the web : un set d'icônes arrondies
15 variantes pour cette icône tout en rondeur

La parole est à vous !

Écrire commentaire

Commentaires : 10
  • #1

    Marine (jeudi, 15 avril 2010 17:54)

    Trop contente que tu sois revenue ! Tes tutoriels me manquaient, celui ci va être bien pratique pour mon blog !

  • #2

    ratsi (mercredi, 28 juillet 2010 19:56)

    c est pas les vacances en ce moment ?
    ;)

  • #3

    Primero Nsangou Omar (mardi, 03 août 2010 10:43)

    super enfin j'auari un alandar sur ma page ...
    cool

  • #4

    Location Ile Rousse (dimanche, 13 février 2011 12:49)

    Merci pour ce tuto très interressant.

  • #5

    Pascal (vendredi, 08 juillet 2011 13:44)

    Un énorme merci pour tous ces tutos, widgets et autres codelets. Grâce à eux et à leur auteure (sic), je commence à comprendre comment marche le binz :-).

    Dans le blog, j'étais ennuyé par le peu d'espace qui séparait les billets les uns des autres (template F4046). J'y ai remédié en ajoutant le codelet suivant :

    /* ajouter une ligne de séparation et/ou agrandir l'espace entre les billets */

    div.j-blogarticle
    {
    border-bottom: 1px dotted #888888;
    margin-bottom: 20px;
    }

    Hth

    Pascal

  • #6

    AM. (samedi, 26 mai 2012 11:50)

    salut enfaite je voulais te demander si tu savais comment on change l'ordre des article sur le blog, j'ai beaucoup essayé mais j'y arrive toujours pas, si tu pouvait m'aide sa serait génial, merci d'avance. xoxo

  • #7

    CHAUD Lionel (mardi, 29 mai 2012 21:02)

    Avec le hackatlon de mai 2012, le tutoriel devient obsolète : on peut personnaliser soi même la date du blog !!

  • #8

    ShimiSource (mercredi, 26 décembre 2012 10:49)

    Il y a plus les codes .. Dégouter ..

  • #9

    lebricabracdesfilles (dimanche, 31 mars 2013 21:26)

    Comment on l'a met la date ?

  • #10

    Locations Ile Rousse (vendredi, 10 mai 2013 01:16)

    Merci beaucoup pour cet article

Ruban