Se jouer des apparences : nouvelles pièces - modèle d'origine

La précédente leçon ayant visiblement eu un écho favorable de votre part, je remet le couvert avec un design d'un esthétisme totalement différent.
Bien loin de la sagesse et de la clarté du thème The Morning After, j'ai cette fois-ci pris comme victime le thème Magazeen, trouvé sur Smashing Magazine.

Celui-ci présente en effet plusieurs intérêts en terme d'étude :

• Il est dédié à des notes "scénarisées" en image (typiquement une image d'intro + un texte d'intro)
• Ses fonds graphiques sont en pleine page (fluide pour les initiés) pour des contenus en taille fixe (ce qui n'est pas un format habituel sur TypePad)
• Il alterne les couleurs des commentaires pairs et impairs
• Les modules latéraux présentent une composition arrondie très peu courante sur TypePad

Là aussi, c'est une transposition, ne vous attendez donc pas à un résultat 100% conforme à l'original.
Ci-dessous le design tel que présenté sur une instance WordPress :

Et le résultat sur un blog hébergé sur TypePad :

Si vous voulez suivre le comment de l'histoire, cliquez sur le lire la suite.

Je vais reprendre le cheminement décrit lors de la précédente leçon, entrons donc dans le vif du sujet :

A. Faire son deuil
Adieu la barre de recherche en header, la sous-navigation "Check out the Latest Articles" ainsi que le colonnage 1 colonne / 2 colonnes des contenus centraux. Il n'y aura pas d'effet de menu déroulant non plus sur le pied de note. Du CSS seulement on a dit.

B. Remize à zéro de tout
Je commence par un tour sur l'assistant Création de Thème de typePad et je lui indique les propriétés générales du thème choisi à savoir :

• La police de base est de type Arial
• Les liens en colonne centrale sont roses (#BD4478 pour être exact)
• Ceux de la colonne latérale sont bleus
• Le pied de note utilise une police de fond de type Georgia
• La couleur de fond est bleu (#E0EDF3)

On base le tout sur un design fluide car le graphisme est fait pour occuper toute la largeur de l'écran.
Ci-dessous les réglages appliqués à mon blog.

Bon voyons voir le résultat:

C'est... original (comme laid). Guère étonnant, sachant que l'attrait de ce thème tient pour beaucoup à une mise en forme soignée et des images de fond sur chaque élément principal (bannière, navigation, notes, modules de colonne latérale).

C. Un petit fixe dans le fluide
Voyons le premier intérêt de ce design, il utilise toute la largeur de l'écran pour ses éléments graphiques. C'est un réglage impossible à réaliser via l'assistant de TypePad pour le moment. Nous allons donc procéder aux ajustements nécessaires via CSS.
Sur la base du principe conteneur / contenu expliqué lors de la précédente leçon, pour chaque sélecteur principal (page complète / bannière / navigation / corps de blog / pied de blog), nous allons spécifier à TypePad que le conteneur est fluide, mais lui demander que le contenu lui soit 1/ centré 2/ d'une largeur fixe.
Ainsi chaque sélecteur de contenu à élément graphique large (#pagebody-inner, #banner-inner, #nav-inner) va se voir affublé de la propriété suivante :
margin:0 auto;
width:940px;
qui permet au navigateur de placer au centre de sa fenêtre une colonne de 940 pixels de large, toujours centrée.
Je procède donc à ces réglages et en profite pour aussi :

• ajouter les images de fond à nos containers principaux
• ajouter 2/3 trucs pour que IE ne nous fasse pas de misères (sélecteur "body")

Au résultat :

Ca commence à prendre forme.

D. Bannière simple mais la tête à l'envers
Petite subtilité de ce design, la description est placée avant le titre du blog.
Pas de souci via CSS, on fixe la position des 2 sélecteurs concernés #banner-description et #banner-header, et on ajoute tout ce que nous n'avons pas pu mettre dans l'assistant Création :
#banner-header{
-x-system-font:none;
color:#FEFEFE;
display:block;
font-size:3.53em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
text-transform:lowercase;
line-height:normal;
margin:-10px 0 0;
padding:0;
position:relative;
top:20px;
}

#banner-header a:hover{
color:#d7d7d7;
}

pour le titre

#banner-description{
-x-system-font:none;
color:#B9B9B9;
font-size:0.83em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
position:relative;
top:-40px;
}

pour la description.
Rien de passionnant ici, au final le résultat est sans surprise.

E. Navigation
Rien de bien original ici non plus à part un effet de survol plus travaillé que lors de la précédente leçon, ceci notamment grâce à l'utilisation d'une image en fond lors du survol d'un lien de cette barre via :
.nav-list-item a:hover{
background:#171615 url(http://45ez.typepad.com/themes/magazeen/navigation-hover.gif) repeat-x scroll center bottom;
color:#F1F8FF;
margin:-3px 0 0;
padding:15px 15px 14px;
position:relative;
}

Le résultat est plutôt sympathique :

F. Revoir la liste des entrées
Pas grand chose à signaler ici, par rapport au modèle d'origine je vais faire une image pour la bordure figurant sous le titre, l'emplacement figé de la date dans TypePad ne me permettant pas de l'obtenir de façon satisfaisante.
On notera 3 éléments d'importance pour que chaque note soit élégamment présentée :

• Un contraste du plus bel effet entre le titre et l'encadré blanc présentant le contenu
• Les images non incorporées dans le texte sont centrées automatiquement (idéal pour une structure grande image + texte d'intro)
• Le footer est différentié par sa police et une couleur légèrement plus sombre

G. Colonne latérale

Le modèle choisi est un 2 colonnes, je n'ai donc qu'une colonne latérale à habiller.
Là encore, une différence de taille par rapport aux designs classiques de TypePad, c'est la présence d'une image de fond (2 en fait) pour donner un aspect arrondi à chaque module de cette colonne.
Nous allons pour répliquer cette effet nous intéresser à 2 sélecteurs en particulier .module et .module-header.
Le premier va nous permettre d'afficher notre bas arrondi ainsi que les 2 couleurs de fond.
.module{
background: #F5FBFE url(http://45ez.typepad.com/themes/magazeen/sidebar-bottom.gif) no-repeat scroll center bottom;
width:auto;
margin:0 0 20px;
padding:0 0 56px;
}
Le second va nous permettre d'afficher le haut arrondi. C'est la "magie" du CSS, ce haut arrondi va en fait être affiché par dessus le bas arrondi et masquer le recouvrement pour que l'ensemble nous donne l'impression d'une seule image.
.module-header {
-x-system-font:none;
background:#F5FBFE url(http://45ez.typepad.com/themes/magazeen/sidebar-top.gif) no-repeat scroll center top;
height:55px;
line-height:normal;
margin:0;
padding:28px 0 0 20px;
width:285px;
letter-spacing: 0;
}

Les autres styles présents pour cette partie nous permettent de caler notre contenu pour chaque module, de sorte que là aussi le lecteur ait l'impression que le contenu présenté fasse partie de la boîte graphique en arrière plan.
Juste pour la forme, j'ajoute aussi une propriété dédiée au module Albums Photos qui permet de mieux les mettre en valeur :
.typelist-thumbnail {
background:#FFFFFF url(http://45ez.typepad.com/themes/magazeen/sidebar-preview-back.gif) no-repeat scroll center top;
float:left;
height:65px;
margin:0;
padding:3px 0 0 4px;
width:65px;
}

Et voilà le travail :

H. Finish it - Commentaires et autres titrages
Encore un petit détail qui fait la différence sur ce design soigné, c'est l'alternance de couleur entre commentaires pairs et impairs.
TypePad dispose des sélecteurs adéquats pour cela via .comment-odd et comment-even.
Dans le cas présent, nous allons définir en premier l'affichage de tous les commentaires via le sélecteur .comment
.comment {
background:transparent url(http://45ez.typepad.com/themes/magazeen/white.gif) repeat-x scroll center bottom;
border-bottom:1px solid #D9E1E6;
margin:0;
padding:30px;
}
puis indiquer à TypePad de surcharger spécialement les commentaires pairs :
.comment-even {
background:#F9FCFD url(http://45ez.typepad.com/themes/magazeen/white.gif) repeat-x scroll center bottom;
}

Et puis je ne sais pas pour vous, mais personnellement j'aime beaucoup le gros encadré rose utilisé pour mettre en valeur le nombre de commentaires avec sa mise en page excentrée. Je vais donc réutiliser cette idée pour l'affichage de mes dates (.date-header) de mon titre de commentaires (.comments-header) et de trackbacks (.trackbacks-header).
.date-header, .trackbacks-header, .comments-header{
background:#F23183 none repeat scroll 0 0;
color:#FFFFFF;
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:1.65em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
left:-10px;
line-height:normal;
padding:10px 20px;
position:relative;
text-align:left;
top:0;
width:auto;
}

I. Soigner la navigation entre les notes
Là aussi, pour fignoler le rendu, j'accorde un peu d'attention à des éléments annexes : la navigation entre notes et archives.
L'ensemble peut être résolu en s'intéressant de près au sélecteur .content-nav.
.content-nav {
background:#DCE8EE url(http://45ez.typepad.com/themes/magazeen/box-highlight.gif) repeat-x scroll center bottom;
border-color:#EBF2F5 #EBF2F5 #D4E0E6;
border-style:solid;
border-width:1px;
margin:0;
margin-bottom: 20px;
padding:8px 10px;
}

.content-nav a{
-x-system-font:none;
color:#656C71;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:0.92em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}

.content-nav a:hover{
color:#35383A;
}

Hop, terminé :

J. En bonus le pied de blog.
A perfectionner, mais comme certains d'entre vous ont eu le courage de passer sur TypePad Beta, autant aller jusqu'au bout.
Le pied de blog originel pourrait être copié/collé tel quel via la fonction source HTML du pied de blog de TypePad, mais là encore, je fais le choix de ne pas vous faire faire du code HTML.
On en restera à la mise en forme des liens insérés dans votre interface de contenu TypePad.
La principale curiosité ici, c'est une classe dédiée au survol d'un autre élément qu'un lien.
.footer-list-item:hover, .footer-cat li:hover a {
background-position:0 -23px;
color:#171615;
cursor:pointer;
}

Couplée aux autres classes définies sur les liens et pour le sélecteur .footer-list-item, elle nous permet d'obtenir un effet de surbrillance arrondi très joli, quoique complètement inutile. Juste pour la forme on vous a dit.

C'est fini pour cette leçon. Comme pour la précédente je vous laisse à disposition la feuille de style de surcharge appliquée, ainsi qu'un Zip contenant l'intégralité des images nécessaires à la mise en forme de ce thème.
Si vous souhaitez l'appliquer sur votre blog :

1. En assistant Création de thème réglez vos paramètres comme décrits ci-dessus (étape B, voir les screenshots)
2. Télécharger les images du zip sur votre blog via le gestionnaire de fichiers dans l'emplacement de votre choix : Magazeen.zip
3. Mettez à jour la feuille de style pour que les URLs des images correspondent à l'emplacement choisi ci-dessus : Feuille de style
4. Copiez là dans "CSS personnalisé" depuis Weblogs > Habillage.

En bonus de bonus, ci-dessous la table de correspondance que je me suis faite entre le thème WordPress et la structure par défaut de TypePad, sans doute à enrichir/corriger selon le thème porté :
WP => TP
#header => #banner
#logo => #banner-inner
#navigation => #nav
#navigation ul.pages => .nav-list
#navigation ul li => .nav-list-item
h3 => .entry-header
.post-content => .entry-content
.post-image img => .entry-body img
.post-footer => .entry-footer
#sidebar => #beta-inner
#sidebar li ul => .module-content
#footer => #footer
.footer-cat li => .footer-list-item
.post-box => .comments
.comment-content => .comments-content
.commentlist li => .comment
.commentlist li .comment-wrap => .comment-content
.comment-author => .comment-footer