« Nouvelle fonctionnalité : notification automatique Twitter et FriendFeed | Accueil | Se jouer des apparences : nouvelles pièces - modèle d'origine »

31/03/2009

Se jouer des apparences : Leçon 4 - adapter un design lambda

Pour la 4ème édition de cette série "Se jouer des apparences", nous allons nous intéresser à la transposition d'un thème graphique générique sur TypePad.

En effet, malgré les nombreux thèmes disponibles d'emblée dans TypePad, il est fort à parier que vous en voudrez un autre, plus à vos couleurs, plus ceci, moins cela, bref un design qui vous a tapé dans l'oeil.

Je prends aussi le postulat de faire une transposition sans recourir à l'habillage avancé. Le passage en habillage avancé ne doit se faire à mon sens que dans des cas bien précis, comme l'implémentation de fonctionnalités non disponibles dans TypePad (moteur de recherche Ajax Google, Tumulus WP, modification de la présentation de base, etc...) ou la mise en place d'un design atypique et l'utilisation spécifique de tags TypePad (type DarkPlanneurs ou Psychologies Luxe).

Nous en resterons donc pour ce cas pratique à l'utilisation de l'assistant "Création de thème", couplé à l'ajout d'une feuille de style en surcharge.

J'ai jeté mon dévolu sur un thème WordPress pour l'occasion, proposé sur le site eblog templates et intitulé The Morning After Theme.

Ci-dessous les captures du thème tel que dispo sur une instance WordPress.org et son rendu hébergé par un blog TypePad.
Image 18
Image 19

Si le résultat vous semble satisfaisant, c'est le moment de rentrer dans le vif du sujet.


A. Comment fonctionne le design sous TypePad ?
La structure utilisée par TypePad est très simple et très normalisée sur le principe du contenant/contenu.
Elle peut être schématisée comme ci-dessous :

Overview-tp-structure

Un container (#container) global gère l'apparence de chaque blog.
Au sein de ce container, vous pouvez accéder aux propriétés de chaque sous-élément (bannière, barre de navigation, colonnes latérales et de contenus).
Evidemment chacun de ces sous-éléments aura ses propres éléments (un titre de note, un élément de module en colonne latérale).
Partant de cette base, transposer un design X sur TypePad est à la portée de toute personne ayant des notions de base en CSS/HTML.


B. Faire son deuil
Un habillage classique sur TypePad est dans la forme schématisée ci-dessus, et c'est tout. Ne vous entêtez donc pas à adapter un design présentant 4 colonnes de contenu ou 3 zones en en-tête de bannière. Cela ne sera pas possible sauf passage en habillage avancé. Evaluez rapidement ce qu'il est envisageable de transposer et ce qui ne peut l'être.
Dans le cas présent, je n'ai pas cherché un incorporer le module de recherche dans la bannière, ni à placer la note "signalée comme mise en avant" en 2ème position. J'ai cherché à respecter l'esprit du design avec ce que TypePad offre comme personnalisation possible.

C. Remise à zéro de tout
1ère étape dans la transposition, régler dans l'assistant "Création de thème" de TypePad les paramètres de base de la mise en forme.

  • Le thème WordPress choisi présente les caractéristiques principales suivantes :
  • La police de base est de type Helvetica
  • La couleur de fond est #ebeff2
  • La couleur de fond des colonnes latérales est le blanc #ffffff
  • La couleur de police est grise #333333
  • Les liens dans le corps de note sont en bleu #003366

Je vais donc saisir ces paramètres directement dans TypePad, ci-dessous à titre indicatif les paramètres saisis dans l'ordre :

Image 2

Image 3

Image 4

Image 5 Image 6

Le résultat est le suivant, c'est bien mais pas suffisant :

Image 7

Je vais donc utiliser la fonction CSS personnalisé pour "surcharger" mon thème généré par TypePad avec des propriétés de mon crû, quitte à copier/coller les classes telles quelles depuis leur utilisation sur WordPress depuis leur correspondance dans TypePad.

D. Paramètres généraux
Commençons par les premiers éléments à personnaliser que nous ne pouvons atteindre directement via l'assistant dans TypePad, majoritairement cela concerne le fond global (ajout d'un ombré) et les marges appliquées aux paragraphes, titres et listes.

Le résultat donne ça.

Image 8

E. Une bannière sinon rien
Occupons nous rapidement de la mise en forme de la bannière et de la navigation.
Pas de problème pour le titre et la description du blog, dans TypePad c'est #banner-header et #banner-description.
Pour caler ses éléments côté mise en page, il nous suffit de régler le contenant(#banner) et son bloc de contenu(#banner-header).

Image 9

F. Navigation - 1ère transposition réelle
Dans TypePad il est possible de définir une barre de navigation avec ses propres liens, sur le thème WordPress nous pouvons utiliser le fond qui sert de chemin de fer pour sa mise en forme. Ce sera notre première transposition.
Je vais donc m'occuper du conteneur #nav, de chaque élément de liste .nav-list-item et du lien qui s'y rattache.
Cela commence à prendre tournure.

Image 10
Réglons maintenant son compte à mes colonnes de contenus.

G. Dimensionnement des colonnes
Notre modèle est de type wtt (wide-thin-thin, soit large-étroit-étroit en français dans le texte).
De fait #alpha est notre colonne de contenu, #beta et #gamma nos colonnes latérales.
Je dois donc redéfinir la taille de chaque colonne.
J'applique à ma colonne de contenu une largeur de 470 pixels, et respectivement 260 et 200 pour mes 2ème et 3ème colonnes, j'explique à TypePad que je souhaite le tout dans un conteneur global de 960 pixels de large.
J'obtiens ceci :

Image 11

H. Revoir la liste des entrées
Quelques petites touches sont à apporter à nos listes de notes, notamment un petit effet d'inversion lors du survol de la souris sur un titre ainsi qu'un lien "Lire la suite" avec une icône.
J'ai à ma disposition l'ensemble des classes nécessaires .entry-header, .entry-more-link, j'en profite également pour régler son cas à mes dates et mes pieds de notes (.date-header et .entry-footer).
Le résultat est satisfaisant.

Image 12


I. Note mise en avant
Pour réhausser cette fonctionnalité, un style différent des autres notes n'est pas de trop. Là aussi j'ai ce qu'il faut pour modifier en profondeur l'apparence de cette note.
L'ensemble des styles (titre, pied, contenu) est modifiable via le sélecteur .entry-featured.
Ma note mise en avant est désormais bien différentiée des autres notes.

Image 13
J. Permaliens
J'en profite pour m'intéresser à la note complète (le permalien), notamment les commentaires et trackbacks. Chaque permalien présente une navigation (suivant / précédent via le sélecteur .content-nav) ainsi que des sélecteurs dédiés aux interactions (.comment, .comment-content, .comments-header).

Image 14

K. Eléments généraux de colonne latérale
Je vais indiquer ici le format des titrages pour chaque module de colonne latérale via le sélecteur .module-header.

Image 16

L. 1ère colonne latérale
Autre transposition, sur un habillage classique TypePad, la liste des notes récentes n'est pas aussi détaillée que sur notre design d'origine. Les élements à adapter ici sont la présentation de la liste des éléments par module (#beta-inner .module li), notamment un petit effet sur le survol d'un élément de liste cliquable ainsi qu'une bordure basse personnalisée en image.
Et voilà notre première colonne mise en forme.

Image 15

Juste pour la forme, je vais aussi transposer le module de recherche. Il va être géré via une TypeListe de note dont voici le contenu :

<div id="search_menu">
    <div id="search" class="column first">
        <div id="search-form">                 
        <form method="get" id="searchform" action="http://www.eblogtemplates.com/demo/">
            <div><input name="s" id="s" class="search_input" value="" type="text">
        <input id="searchsubmit" class="submit_input" value="Rechercher" type="submit"></div>
        </form>
        </div>
    </div>
    <ul id="menu">
        <li><span class="about"><a href="#">A propos</a></span></li>
        <li><span class="archives"><a href="#">Archives</a></span></li>
        <li><span class="subscribe"><a href="#">S'abonner</a></span></li>
    </ul>           
</div>

Des sélecteurs spécifiques au sein de cette TypeListe vont me permettre de le mettre en forme dans TypePad.

Image 16

M. 2ème colonne latérale
Dernière transposition, il n'y a pas de notions de sous-catégories dans TypePad, mais je vais garder le principe issu du thème fait pour WordPress. Sur ma colonne #gamma, je vais donc ajouter des styles spécifiques pour les listes (#gamma-inner ul et leurs éléments #gamma-inner ul li).
Voilà le résultat.

Image 17


Pour résumer, si l'envie vous prend d'adapter un design réalisé pour une autre plateforme ou mis à disposition sous une forme générique CSS/HTML il vous faudra :

  • séparer ce qui peut être transposé de ce qui ne peut pas l'être
  • commencer à régler les paramètres généraux via l'assistant de création de thèmes (taille et type de police par élément, couleurs de fond, liens)
  • en vous référant au schéma de structure, ajouter aux styles TypePad les éléments de personnalisation par emplacement. Vous disposez pour cela de l'ensemble des sélecteurs nécessaires par emplacement (#banner, #alpha, #beta, #gamma, ...) et pour chaque élément (.entry-header, .entry-content, .entry-footer, .module, ...).
  • pour plus d'infos sur les styles dans TypePad, référez-vous à cet article : Custom CSS

Ci-dessous vous trouverez 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
  2. Télécharger les images du zip sur votre blog via le gestionnaire de fichiers dans l'emplacement de votre choix
  3. Mettez à jour la feuille de style pour que les URLs des images correspondent à l'emplacement choisi ci-dessus
  4. Copiez là dans "CSS personnalisé" depuis Weblogs > Habillage.

A vous de jouer.

Feuille de style

Zip des images

Mise à jour 1 :

Mis en ligne une version de Tout sur TypePad à laquelle le tutoriel a été appliqué : http://45ez.typepad.com/design/

La feuille de style est commentée de sorte à correspondre aux étapes décrites ci-dessus.

Pour donner votre propre petit cachet à ce design, vous pouvez par exemple changer la bannière de fond de la navigation (gardez juste le même nom et les mêmes dimensions).

Pour le tutoriel je n'ai pris en considération que le format wtt (wide-thin-thin). Si vous voulez l'adapter pour un autre format par défaut de TypePad, il suffit d'intervertir les propriétés appliquées aux colonnes alpha, beta, gamma et de spécifier le format concerné, par exemple :

La propriété

.layout-three-column-right #beta-inner {
background:#FFFFFF none repeat scroll 0 0;
border:0 none;
padding:15px;
}

deviendrait

.layout-three-column #alpha-inner {
background:#FFFFFF none repeat scroll 0 0;
border:0 none;
padding:15px;
}

si le format de blog choisi était un 3 colonnes simple (une colonne latérale de chaque côté).

Mise à jour 2

Si vous souhaitez que le moteur de recherche soit celui de Google par défaut le code de la TypeListe de note est le suivant :

<div class="module-typelist module">
<h2 class="module-header">Rechercher</h2>
<div class="typelist-plain module-content">
<ul class="module-list">
<li class="module-list-item"><div class="typelist-note"><div id="search_menu">
<div id="search" class="column first">
<div id="search-form">
<form method="get" id="searchform" action="http://www.google.fr/search">
<div>
<input type="hidden" name="sitesearch" value="votre-compte.typepad.fr
" />

<input name="q" id="s" class="search_input" value="" type="text">
<input id="searchsubmit" class="submit_input" value="Rechercher" type="submit"></div>
</form>
</div>
</div>
<ul id="menu">
<li><span class="about"><a href="http://votre-compte.typepad.fr/about.html">A propos</a></span></li>
<li><span class="archives"><a href="http://votre-compte.typepad.fr
/votre-blog/archives.html">Archives</a></span></li>
<li><span class="subscribe"><a href="http://votre-compte.typepad.fr
/votre-blog/atom.xml">S'abonner</a></span></li>

 </ul> 
</div></div></li>

</ul>
</div>

</div>

En veillant à remplacer "votre-compte.typepad.fr/votre-blog" par l'URL de votre compte TypePad.

Et pour faire suite à la remarque de Michel, le design transposé est prévu à la base pour que ses contenus
 en colonne de droite tiennent sur une ligne, si, comme Michel, vous placez des contenus
tenant sur plusieurs lignes dans cette colonne alors il faut changer :

#gamma-inner ul li a {
background:transparent url(http://45ez.typepad.com/themes/morning_after/arrow.png) no-repeat scroll 177px 3px;
border-bottom
:1px solid #DADADA;
border-left:3px solid #DADADA;color:#000000;
display
:block;
font-size:0.9em;
font-weight:bold;
height:19px; // hauteur fixe de 19 pixels
margin:0;
padding:3px 12px 0 7px;
text-decoration:none;text-transform:uppercase;
}

par
#gamma-inner ul li a {
background
:transparent url(http://45ez.typepad.com/themes/morning_after/arrow.png) no-repeat scroll 177px 3px;

border-bottom
:1px solid #DADADA;

border-left
:3px solid #DADADA;
color:#000000;
display:block;font-size:0.9em;
font-weight
:bold;
height:1%;
margin:0;padding:3px 12px 0 7px;
text-decoration:none;
text-transform
:uppercase;
}


dans la feuille de style que vous avez téléchargé.

Mise à jour 3 : Placer une ombre en bord de page
A la demande de Florent, ci-dessous l'explication plus détaillée concernant la mise en place d'un effet ombré en bord de page.
A la différence du design originel, j'ai fait le choix d'un petit ombré encadrant ma colonne de blog, pour lui donner un peu plus de relief.
Ce genre d'effet est très simple à produire et se gère en une ligne appliqué au <body> de notre page via CSS.
body {
background:#EBEFF2 url(http://45ez.typepad.com/themes/morning_after/body_main.png) repeat-y scroll center top;
line-height:1.5;
margin:0;
}
C'est la propriété background qui nous intéresse ici.
Nous lui indiquons :
  • la couleur de fond de <body> : #EBEFF2
  • une image par dessus cette couleur de fond : http://45ez.typepad.com/themes/morning_after/body_main.png, c'est notre ombre. En fait une image de 1000 pixels de large et 20 pixels de haut contenant à chaque extrémité l'effet ombré désiré.
  • le fait de répéter cette image verticalement sur toute la hauteur de <body>
  • le fait que cette image se déplace si le lecteur fait scroller sa page (sans effet normalement dans le cas présent)
  • et surtout le fait que cette image est centrée à partir du haut de <body> via : center top. Ceci nous assure que, quelle que soit la résolution d'écran du visiteur, notre image de fond sera toujours calée au centre de son navigateur.
Evidemment pour que cette image d'ombre soit toujours visible, il faut que sa dimension soit supérieure à notre container de blog, dans le cas présent, notre container a les propriétés suivantes :
.layout-three-column-right #container {
margin:0 auto;
padding:0;
position:relative;
width:960px;
}
Soit une largeur de 960px, notre image de fond appliquée à <body> "dépassera" donc de 20 pixels de chaque côté, c'est ce dépassement qui doit contenir notre effet ombré.



TrackBack

URL TrackBack de cette note:
http://www.typepad.com/services/trackback/6a00d83451c82369e201156fa61d7d970b

Voici les sites qui parlent de Se jouer des apparences : Leçon 4 - adapter un design lambda :

Commentaires

Les commentaires sont modérés, ils n'apparaîtront qu'après validation par l'auteur.

Créez votre blog !

Solution complète. Aucune installation. Simple et puissant.

Nos recommandations

    Statut TypePad