Canevas / Tutos pour créer des papiers à lettres

Demot · Message par **Demot** » 02 juin 2011, 20:45

jeuDemot : / vs \ slash vous dit quelque chose ?

<body background="file:///C:/Dossier/sousdossier/image.gif">
<~~body background-image=(file:///C:\Dossier\sousdossier\image.gif)~~">

Utiliser / comme pour un lien

Josie · Message par **Josie** » 04 juin 2011, 20:01

Merci mais ca me semble trop compliqué ; je ferais sans

Demot · Message par **Demot** » 04 juin 2011, 20:10

Josie a écrit :je ferais sans

Sans ≈ Tu ne feras pas

Demot · Message par **Demot** » 30 juin 2011, 21:37

Bonsoir ... sans Stationery Thunderbird c'est l'age de pierre
Sa version 0.7.1 est encore en version test sur AMO et elle fonctionne chez moi
pour l'avoir c'est ici ► https://addons.mozilla.org/fr/thunderbi ... /versions/

Demot · Message par **Demot** » 27 juil. 2011, 15:00

Bonjour ▬ Le nombre de lignes de champ / lignes d'adresses / lignes destinataires
Une petite option sympa de Stationery pour modifier le nombre de lignes :

Dans ses options / Personnification de l'interface
Sélectionner le nombre de lignes désirées avec Addresing Widget number of Lines

Correspondance dans l’éditeur de configuration → stationery.AddresingWidget_Lines (defaut 2)

Humour on : Salut MPL75 et J2M06

je vous ai vu

nheavy · Message par **nheavy** » 14 sept. 2011, 21:39

Petit Tuto pour créer une lettre en 3 parties verticales avec des images :

- Vous aurez besoin du module Stationery sous Thunderbird

- Il vous faut créer 3 images pour :

-> le header : image d'en tête de votre lettre (chemin/header.jpg)
-> le contenu : une image pour le contenu entre le header et le footer, de préférence une image qui pourra être répéter verticalement pour qu'elle puisse s'adapter selon la hauteur de votre message (chemin/contenu.jpg)
-> le footer : image de pied de page (chemin/footer.jpg)

- Sur le modèle que je présente, nous aurons en fond de page l'image "chemin/contenu.jpg" sur laquelle nous appliqueront le header et le footer.

1) Tout d'abord, il va falloir mettre un peu de style dans la balise head :

Code : Tout sélectionner

<head>
<style type="text/css">
body {background-repeat: repeat-y; background-position:50%; width:620px; margin:auto;}
.contenu {width:580px; margin-top:10px; margin-left:20px; font-size:16px; text-align: justify;}
</style>
</head>

Sur cet exemple, votre lettre aura une largeur de 620px, il faudra donc que vos 3 images mesures 620px de large.
Le positionnement à 50% et le margin:auto nous permettront de centrer votre lettre, c'est plus sympa que d'avoir tout collé à gauche de son écran.
Grâce à la classe contenu, le texte de votre message sera émargé de 20px par rapport à votre image de fond.

2) Nous allons à présent définir le fond de page en 3 parties :

Code : Tout sélectionner

<body background="chemin/contenu.jpg" bgcolor="#FFFFFF" link="#0000EE" text="#000000">
<img src="chemin/header.jpg" alt="">
<div class="contenu">

!!! Taper votre message ici !!!

</div>
<img src="chemin/footer.jpg" alt="">
</body>

3) Voici le code entier :

Code : Tout sélectionner

<head>
<style type="text/css">
body {background-repeat: repeat-y; background-position:50%; width:620px; margin:auto;}
.contenu {width:580px; margin-top:10px; margin-left:20px; font-size:16px; text-align: justify;}
</style>
</head>
<body background="chemin/contenu.jpg" bgcolor="#FFFFFF" link="#0000EE" text="#000000">
<img src="chemin/header.jpg" alt="">
<div class="contenu">

!!! Taper votre message ici !!!

</div>
<img src="chemin/footer.jpg" alt="">
</body>

Et voila, vous obtenez une très belle lettre en 3 parties qui fonctionne sur la plupart des logiciels de messageries.

Voici un exemple de lettre en 3 parties : cliquez ici pour voir l'exemple

Demot · Message par **Demot** » 15 sept. 2011, 09:38

Bonjour ... En impression rapide :

Dans ta capture : Ton image de fond est où ? (background) celle qui devrait se répéter en colonne (repeat-y)
Pourquoi ce background-position:50%; qui bouffe une partie d'une possible image de fond, si on l'envoie à l’expéditeur qui en supporte le poids autant qu'il la voit
Pourquoi tu n'as pas mis par exemple background-position: left;

Demot · Message par **Demot** » 15 sept. 2011, 11:48

Essaie ceci ... (j'ai bien mis repeat-y) et j'ai rajouté la police et sa taille en point

Code : Tout sélectionner

<html><head><style>
body {font-family: "Trebuchet MS"; font-size:12pt; text-align: justify;
margin-top:10pt; margin-left:50pt; margin-right:10pt;
background-position: left; background-repeat: repeat-y; }
</style></head>
<body background="file:///D:/test/imgfond.jpg">
<img src="file:///D:/test/imghaut.jpg" alt=""><br><br>
!!! Taper votre message ici !!!<br> <br>
<img src="file:///D:/test/imgbas.gif" alt="">
</body></html>

J'ai omis une couleur de fond vu qu'une image devrait faire le fond

patrick67 · Message par **patrick67** » 15 sept. 2011, 13:15

Bonjour,
C'est bien beau tout ça ,mais ou est ce qu'on trouve une image qui as cette largeur.C'est du beau travail que vous faite !!!

Bien cordialement.

nheavy · Message par **nheavy** » 15 sept. 2011, 19:44

patrick67 a écrit :Bonjour,
C'est bien beau tout ça ,mais ou est ce qu'on trouve une image qui as cette largeur.C'est du beau travail que vous faite !!!

Bien cordialement.

Faut en faire une soi-même évidement, ça ne tombe pas du ciel ^^

Demot,

Le 50% permet de centrer l'image de fond de body, si non elle se colle en haut à droite. J'ai pas vraiment compris pourquoi, sur un site web, je n'aurais pas eu à utiliser ça mais ici c'est nécessaire.

L'image de fond c'est le cadre qui est derrière "Bonjour ..." , elle fait les bords doits et gauches.

Demot · Message par **Demot** » 15 sept. 2011, 19:51

Toute image que j'ai essayée avec ta position 50% width:620px; a été bouffée de sa partie gauche... et ça n’écrit pas au même endroit que ta capture... hum !

@ Patrick même si on peut en trouver des plus grosses exemple plein sur ce site, je n'en fais pas avec img supérieure à 1024 en largeur.

ceci dit, on n'a pas besoin de facto d'une grande image pour faire un fond, certaines images peuvent se répéter à l'infini sans que ça se remarque très fort, et même des images animées, genre bulles qui montent.

patrick67 · Message par **patrick67** » 27 mars 2012, 12:27

Bonjour,
Je reviens sur ce sujet,cars j'arrive pas a trouver mon problème....
Alors voici j'ai mis une image dans un dossier et ça marche pas je trouve pas le problème et pourtant je pense que le chemin est juste.
Voici le chemin que j'ai mis:
"file:///C:/Documents/Papier à lettres/Images/Paysage.jpeg"

Si je sort l'image du dossier ça marche,alors le chemin est "Paysage.jpeg"

Bien cordialement.

nheavy · Message par **nheavy** » 27 mars 2012, 18:26

Bonjour,

Avec Thunderbird tu fais "ecrire un message", dans le menu tu choisis "insérer" puis "image".
Tu va récupérer ton image et tu aura le chemin correct.

Après si ça ne fonctionne pas avec le chemin correct, ça vient sûrement de ton code, il faudrait que tu nous le fasse voir.

Cordialement
Nheavy

patrick67 · Message par **patrick67** » 28 mars 2012, 16:14

Bonjour nheavy,
merci pour cette astuce ça marche mais quand je l'envoie a une personne il y a pas d'image

Merci encore.

patrick67 · Message par **patrick67** » 30 mars 2012, 12:52

Bonjour,
Je confirme que ça marche pour les courrielleurs, mais pas pour les web mails mais ça c'est normal

Problème résolu pour moi alors

Merci encore .

Geckozone

Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Re: Canevas / Tutos pour créer des papiers à lettres

Qui est en ligne ?