Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

01.12.2009

Créez une feuille de styles dédiée à l'impression

Nous avions abordé le principe dans « Pourquoi et comment adapter des feuilles de styles pour l'impression et les mobiles ? », voyons maintenant le procédé qui permettra d'imprimer sans faire mauvaise impression.

Copions d'abord la feuille de styles courante


- Ouvrez un éditeur en mode texte comme Notepad ou Notepad++
- Ouvrez votre navigateur internet et connectez vous à l'administration du blog
- Dans l'onglet PRÉSENTATION, cliquez sur Configuration avancée
- Cliquez sur Oui, je veux aller dans le design avancé
- Dans la liste des modèles, repérez « Feuille de styles » et cliquez sur Modifier le template
- Cliquez une fois dans le cadre de la feuille de styles.
- Sélectionnez tout, par exemple avec la combinaison de touche [Ctrl]+[A]
- Copiez le code, par exemple avec la combinaison de touche [Ctrl]+[C]
- Cliquez sur [Annuler]
- Retournez à l'éditeur en mode texte, collez le code, enregistrez le fichier.

Vous avez une copie de votre feuille de styles.
Enregistrez une copie sou un autre nom pour la modifier en toute sécurité.

Notepad++ facilitera la modification des fichiers CSS, notamment par l'utilisation d'un code de couleurs.


Comment modifier la feuille de styles ?

Vous pourriez tout changer, mais je me contenterai d'évoquer les points qui me paraissent essentiels. Je vous rappelle que la feuille de styles pour l'affichage est disponible à l'adresse :  http://geemee.hautetfort.com/style.css et pour l'impression à l'adresse : http://geemee.ouvaton.org/geemee-css-print.css


Choisir les éléments à imprimer.

Vous ne pourrez pas toujours précisément choisir ce que vous souhaitez imprimer. Ainsi, j'ai dû choisir entre tous les éléments de la colonne de droite, ou rien. Puisque je considère que cela n'apporte rien à la version imprimée, je l'ai neutralisée.C'est une commande que vous connaissez peut-être déjà pour avoir analysé votre feuille de styles. Il s'agit de display, que l'on règle sur "none".

Ainsi pour la colonne de droite, au lieu de :

#right {
overflow : hidden;
float : right;
top : -20px;
width : 225px;
background : #ddb866 url(images/aspire/body-bg.jpg);
color : #000000;
}

on aura :

#right {
display : none;
}

Pour les modèles à trois colonnes, c'est vraisemblablement possible de neutraliser une colonne sur deux seulement ; je doute de l'intérêt, et vous aurez de nouveaux soucis d'alignement à gérer.


Autorisez le fractionnement des blocs

L'affichage fonctionne souvent par bloc, dont la taille est plus ou moins précisément définie ainsi que la règle de gestion du « débordement ». Ce qui force les retours à la ligne, évite les chevauchement à l'écran peut revenir à clore la cellule en limite de page, sans que tout le contenu n'ait pu être imprimé. Il faut donc intervenir sur overflow et imposer "visible".

Ainsi au lieu de :

#center {
width : 760px;
overflow : hidden;
float : left;
background : #ddb866 url(images/aspire/content-bg.jpg);
}

Nous aurons :

#center {
width : 100%;
overflow : visible;
float : left;
}


Et que fait la police ?

De fait, vous devrez la surveiller, notamment dans sa couleur. Des caractères blancs sur fond marron, c'est lisible, mais s'il n'y a plus d'arrière plan... Il faudra donc être attentif à des lignes comme

color : #FFFFFF;

et limiter l'utilisation des arrière-plans comme

background : #ddb866 url(images/aspire/content-bg.jpg);


Difficile d'aller plus loin...

Chaque feuille de styles étant particulière, je ne peux que proposer une méthode. Allez, je vous en propose une autre. Plutôt que prendre votre feuille de styles d'origine pour la simplifier par modifications successives, vous pouvez faire le chemin inverse : prenez une feuille de styles de base, sommaire, et ajoutez les éléments qui vous manquent.

J'ai fait un test avec cette feuille de styles, geemee-css-print-brut.css qui donne des résultats somme toute acceptables.


La prochaine fois, nous aborderons la feuille de styles pour écrans mobiles. Cela nous amènera à faire apparaître des éléments habituellement masqués, et à concevoir une forme de navigation simplifiée.

15:17 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, media, imprimer, print, style | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.